DOM (document object model) 文档对象模型

DOM (document object model) 

        文档对象模型，javascript 的组成部分

---

DOM树

---

DOM 节点

1.节点分类

        a.元素节点：每个 HTML元素  

                - 属性节点：HTML元素的属性

        b.文本节点：HTML元素内的文本 

                - 注释节点：注释 <!---->

        c.文档节点：整个文档document   

2.节点类型 --- nodeType

        元素节点：1  

        属性节点：2

        文本节点：3  

        注释节点：8

        文档节点：9

        文档声明：10

3.节点名称 --- nodeName

        - 元素节点：与标签名相同 

        - 文本节点：为#text 

        - 注释节点：为#comment

        - 文档节点：为#document  

---

DOM关系

        - childNodes 子节点

        - children 子元素 

        - firstChild 第0个子节点

        - firstElementChild 第0个子元素

        - lastChild 最后一个子节点

        - lastElementChild 最后一个子元素

        - nextSibling 下一个兄弟节点

        - nextElementSibling 下一个兄弟元素

        - previousSibling 上一个兄弟节点

        - previousElementSibling 上一个兄弟元素

        - parentNode 父节点

        - offsetParent 定位父级

---

nodeList和HTMLCollection 

        1. nodeList 有 forEach 方法，但是 HTMLCollection 没有forEach

        2. HTMLCollection 每次调用时都会动态的去获取, nodeList 中 childNodes 有动态更新，但是querySelectorAll 就不会动态更新

nodeList       

        1.childNodes     有动态更新

        2.querySelectorAll     不会动态更新

HTMLCollection

        1.children

        2.getElementsByTagName

        3.getElementsByClassName

---