JS包含哪几部分？
- ES：一门语言，学习ES，学习的是语法。(ECMA：欧洲计算机协会 ECMAScript)
- BOM：浏览器对象模型。用途：提供给ES一个接口来操作浏览器
- DOM：文档对象模型。用途：提供ES一个接口来操作文档
BOM是什么？
- BOM：Browser Object Model 浏览器对象模型。
- BOM把浏览器的一切定义成了一个对象模型。
- windpw：整个浏览器被定义成了window对象。
- document：把文档定义成一个对象。
- Histroy：把历史记录定义成一个对象
- Screen：把显示浏览器窗口的屏幕定义成一个对象
- Location：把地址栏定义成一个对象
- Navigator：把浏览器的介绍信息定义成一个对象
- windpw：整个浏览器被定义成了window对象。
- BOM用途：允许ES操作浏览器的一切。
- BOM目前没有标准
DOM是什么？
- DOM：Dcoument Object Model 文档对象模型
- 用途：DOM就是为了操作文档用的。
- 在DOM眼里，整个文档的内容都是对象。
- DOM把文档的一切内容都定义成了对象。
- 文档是对象
- 元素是对象
- 文本是对象
- 属性是对象
- 注释是对象
- 样式是对象
- DOM是W3C制定的一套标准。
DOM树
DOM树树.png
DOM树是文档对象模型的树状模型。
-
在DOM眼里，全部文档内容都是对象。一共有五大常见对象：
- 文档
- 元素
- 属性
- 文本
- 注释
其中文档对象是DOM的核心对象
DOM定义了大量的属性和方法来操作这些对象
文档(document)对象
元素(elment)对象
属性(attribute)对象
文本(text)对象
节点(node)对象
Document对象
定义
- 表示：Document对象表示网页文档。
- 地位：Document对象是DOM的核心对象。
- 用途：Document对象是访问文档的入口。
用途
Document对象总主要用途：
- 查：获取元素
- 增：创建元素
- 删：删除元素
- 改：替换元素
Document对象
- 定义：document对象表示网页文档，document对象是进入文档的入口，也是DOM的核心对象
- 用途：document对象主要用来查找元素，也可以修改文档，创建元素。
- 使用document对象查找元素的时候，有三类方法：
- 传统方法
- H5新增方法
- 特殊方法（选择元素的快捷键）
获取元素的方法
传统方法
- 通过id获取元素：getElementByld()
语法:
window.document.getElementByld('id')
等同于
document.getElementByld('id')
- 通过标签名获取元素：getElementsByIagName('标签')
语法:
window.document.getElementsByIagName('tag')
等同于
document.getElementsByIagName('tag')
- element.getElementsByIagName('标签')
const ul1 = document.getElementById('ul1')
const arr1 = document.getElementsByTagName('li')
const arr2 = ul1.getElementsByTagName('li')
console.log(arr1);
console.log(arr2);
H5新增方法
- 通过class获取元素：
- document.getElementsByClassName('class')
- element.getElementsByClassName('class')
- 通过css选择器获取元素：document.querySelector('selector')
- 通过css选择器获取元素：
- document.querySelectorAll('selector')
- element.querySelectorAll('selector')
快捷方式
- document.documentElement获取文档中<html>元素
- document.title：获取文档中<title>元素
- document.head：获取文档中<head>元素
- document.body：获取文档中<body>元素
- document.links：获取<a>元素
- document.images：获取文档中的<img>元素
- document.forms：获取文档中的
表单元素
示例
console.log(document.documentElement); //重点
console.log(document.title); //重点
console.log(document.head);
console.log(document.body);
console.log(document.links)
console.log(document.images)
特殊方法
操作文档内容
在获取完元素之后，接下来我们要学习元素对对象之间的关系。DOM定义了两套API：
- Node API（节点API）：把DOM树中的对象看成节点(node)
- Element API（元素API）：把DMo树中的对象看成元素树
Node API
定义：
Node API把文档中的全部对象看成是节点(node)，并为这些对象定义了大量的属性和方法
用途：
- 查找节点的基本信息：节点名称、节点类型、节点的值
- 查找节点之间的关系：父子、兄弟
- Node API主要用来创建节点、删除节点、修改节点、查找节点。
- 操作节点：增、删、改、查
Node API中查找元素和document API查找元素的区别
- Documnet API查找元素的方式是：直接查找
- Node API查找元素的方式是：间接查找，也就是按照元素之间的关系查找
Node API查找节点的基本信息？
三大基本属性
Node.nodeType：返回节点类型，使用数字表示
定义：nodeType表示节点的类型。节点类型使用一个数字表示。Node API把节点类型分为了9种
| 节点名称 | 数字表示 |
|---|---|
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
| 注释节点 | 8 |
| 文档节点 | 9 |
| -- | -- |
//获取元素节点、文档节点、注释节点
const arr = document.body.childNodes
console.log(arr[0].nodeType);
console.log(arr[1].nodeType);
console.log(arr[3].nodeType);
//获取文档节点
console.log(document.nodeType);
//获取属性节点
const h2 = document.querySelector('h2');
console.log(h2.getAttributeNode('id').nodeType);
Node.nodeName：返回节点名称
Node.nodeValue：
- 返回文本节点，属性节点和注释节点的值
- 文档节点、元素节点返回null
Node API操作节点的五大方法
- Node.appendChild('子节点')
- Node.insertBefore(子节点，子节点位置)
//创建一个li
const li = document.createElement('li')
li.innerHTML = 'Hello Wor'
//向ul添加子元素li 1. Node.appendChild('元素')
const ul = document.querySelector('ul')
ul.appendChild(li)
//向ul添加子元素li 2. Node.insertBefore(元素，元素位置)
const li2 = document.createElement('li')
li2.innerHTML = '您好'
ul.insertBefore(li2,ul.firstElementChild)
- Node.removeChild(子节点node)：必须在父节点上执removeChild行
- Node.replaceChild(子节点)：在父节点上执行替换子节点
- Node.hasChildNodes()：在父节点上执行查询子节点
节点定义
父节点：一个节点之上直接节点
子节点：一个节点之下直接节点
兄弟节点：具有相同父节点的节点
后代节点：一个节点之下的所有层级的节点
查找节点关系
- Node.parentNode：返回当前节点的父节点对象
- Node.childNodes：返回当前节点的子节点列表
- Node.nextSibling：返回当前节点的下一个节点
- Node.previousSibling：返回当前节点的上
一个兄弟节点 - Node.firstChild：返回当前节点的第一个子节点
- Node.lastChild：返回当前节点的最后一个子节点
- Node.nodeValue：返回当前的节点的节点名称
Node API的三大基本属性
nodeType
含义：
返回节点类型。需要操控
nodeValue
定义：
返回节点的值
注意：
只有文本节点和注释节点有值
元素节点和文档节点返回的是NUL
明天日考
1.JS包含哪几部分：
- ES
- BOM
- DOM
2.什么是BOM？
- BOM即浏览器对象模型，BOM是操作浏览器的接口(AP)
3.BOM有几大对象？
- 窗口(window)
- 历史记录(history)
- 地址栏(location)
- 版本信息(navigator)
- 屏幕(screen)
4.什么是DOM？
- DOM即文档对象模型，DOM是操作文档的接口(AP)
5.DOM有几大对象？
- 文档是对象：document
- 元素是对象：elment
- 文本是对象：text
- 属性是对象：Attribute
- 节点对象：node
