DOM的基本知识点汇总

DOM（文档对象模型）的概念

1. D (document)
   文档表示的就是整个的HTML文档
2. O (object)
   对象表示将网页文档中的每一部分都看作对象
3. M (model)
   使用模型来表示对象之间的关系，这样方便获取指定的对象

---

节点 （构成HTML文档最基本的单元）

4. 文档节点 整个HTML文档
5. 元素节点 HTML文档中的HTML标签
6. 属性节点 元素的属性
7. 文档节点 HTML标签中的文本内容

---

节点的属性

                    NodeName    NodeType    NodeValue

        文档节点     #document      9           null
        元素节点       标签名        1           null
        属性节点       属性名        2           属性值
        文本节点       #text        3          文本内容

---

事件

 --就是文档或者浏览器窗口中发生的一些特定的交互瞬间
 --对于web应用来说，有下面代表性的事件：点击某个元素、将鼠标移至 某个元素的上方、按下鼠标上的键

---

获取元素节点

  --document进行调用

8. getElementById() 通过id属性来获取一个元素节点对象

9. getElementsByTagName() 通过标签名来获取一组元素节点对象

10. getElementsByName() 通过name属性获取一组元素节点对象

11. body 保存的时document的引用

12. documentElement 保存HTML的根标签

13. all 可以获取HTML页面中的所有的元素（对象数组）
    等价于getElementByTagName("*")

14. getElementsByClassName(“class属性值”)
    根据元素的class属性值查询一组节点对象（该方法不支持IE8及以上）

15. queryselector("选择器”) 需要一个选择器字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
    注意：使用该方法只能查询一个元数，即使满足条件的结果有多个，也只会返回第一个
    此时需要使用 querySelector()来进行代替，此方法即使满足条件的元素只有一个也会返回一个元素对象数组

    -补充：
      innerHtml 用于获取元素内部的HTML代码
      对于自结束标签，这个属性没有意义
      如果直接读取元素节点的属性直接使用 元素.属性名的格式进行读取
      例如：元素.id 元素.name 元素.value
      注意：class属性不能采用这个格式 要使用 元素.className 来获取class的属性值
    

---

获取元素节点的子节点

    --通过具体的元素节点进行调用

1. getElementByTagName()
   方法，返回当前节点的指定标签名的后代节点

2. childNodes
   属性，获取当前节点所有的子节点（包括文本在内的所有节点）

3. firstChild
   属性，表示当前节点的第一个子节点

4. lastChild
   属性：表示当前节点的最后一个节点

5. children
   属性，可以获取当前元素所有的子元素

6. firstElementChild
   属性，可以获取当前元素的第一个子节点

---

获取父节点和兄弟节点

 --通过具体的节点进行调用

7. parentNode 属性，表示当前节点的子节点

8. previousSibling 属性，表示当前节点的前一个兄弟节点

9. nextSibling 属性，表示当前节点的后一个兄弟节点

    补充
       innerHTML 可以获取元素内部的HTML代码
       innerText 可以将元素的文本内容进行返回，没有附带标签