一. 什么是DOM: Document Object Model
1. 什么是: 专门操作网页内容的一套对象和函数的总称
2. 为什么: ES标准中只规定了js语言的核心语法。没有规定如何使用js操作网页的内容。
3. 何时: 今后,只要想操作网页中的内容时,只能用DOM
4. DOM标准: 国际标准,由W3C负责制定并维护。
几乎所有浏览器100%兼容
5. 包括: 5件事: 增删改查+事件绑定
二. DOM树:
1. 什么是: 一个网页的所有内容,在浏览器内存中,以树形结构保存的
2. 为什么: 树形结构是最直观的展现上下级包含关系的结构。而网页内容中的元素结构,也是上下级包含关系。
3. 如何:
(1). 只要浏览器读取到一个网页的内容,都会先在内存中创建一个唯一的树根节点对象: document
(2). 浏览器扫描网页内容,每扫描到一项内容(元素、文本、属性...),就会自动创建一个新的节点对象(Node),保存当前这一项内容的属性和值。然后将新创建的节点对象,保存到DOM树上对应的位置。
三. 查找元素: 4大类查找方式
1. 不需要查找,就可直接获得元素/对象: 4个
(1). 根节点对象: document
(2). html元素节点对象: document.documentElement
(3). head元素节点对象: document.head
(4). body元素节点对象: document.body
2. 按节点间关系查找
(1). 什么是:按照元素在DOM树中的上下级或平级关系查找其它元素
(2). 何时: 如果已经获得一个DOM元素对象,想找这个DOM元素对象周围附近的元素时,才用节点间关系。
(3). 如何:
a. 节点树:
1). 什么是: 包含所有网页内容的完整树结构
2). 包含: 2大类关系,6个属性
i. . 父子关系: 4个属性
获得一个节点对象的父级节点对象
节点对象.parentNode —— 返回一个节点对象
父 节点
获得一个节点对象下的所有直接子节点对象的集合
节点对象.childNodes —— 返回类数组对象
子 节点们
获得一个节点对象下的第一个直接子节点对象
节点对象.firstChild —— 返回一个节点对象
第一个 孩子
获得一个节点对象下的最后一个直接子节点对象
节点对象.lastChild —— 返回一个节点对象