什么是DOM？

一. 什么是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