学到DOM时，看到关于文档（结构树）、节点（node）、和DOM提供的一些方法获取（找到）所需的节点、还有DOM属性，我很混乱，我无法弄清节点的关系层级属性和方法的关系，所以在使用DOM之前我要先了解DOM，当我们用javascript对HTML DOM进行操作的时候我们要明确HTML DOM中节点类型和层级才能准确定找到你想要增删改查的位置。
目录
1.DOM是什么？是干啥的？
2.带你了解DOM
3.DOM的属性
4.参考资料
1.DOM是什么？是干啥的？
DOM，文档对象模型（Document Object Model）。DOM是 W3C（万维网联盟）的标准，DOM定义了访问HTML和XML文档的标准。在W3C的标准中，DOM是独于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
其实上面的摘抄看完也是一脸懵逼;
2.带你了解DOM
① 网页形成
html为我们搭建结构使你的网页有了内容css来定义网页的样式，做装修让你的网页更漂亮JavaScript赋予了页面的行为，交互动效让你可以和网页互动
这才是完整的网页
② javascript究竟通过什么来实现这些交互呢?????
有一个ECMAScript标准，基于这个标准我们可以编写程序（例如js）让浏览器来解析，在编写程序时，浏览器为我们提供了一个BOM对象（即browser object model）用来操作浏览器窗口、浏览器导航对象(navigator)、屏幕分辨率(screen)、浏览器历史(history)、cookie等等。
但这个通过BOM来实现的交互远远不够。要实现页面的动态交互和效果，操作html才是核心。
③ 那如何操作html呢？
是htmlDOM，这时候浏览器给我们提供了DOM，DOM给我们提供了用程序(例如js)来动态控制html的接口(方法)这就是传说中的API
DOM是针对xml经过扩展用于html的应用程序编程接口，我们又叫API。
当浏览器打开网页时候，DOM把整个html页面绘制为一个多层的节点结构，html页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。（节点（node）和数据）
然后javascript通过一些方法（例如下面会讲到）根据htmlDOM树对里面的节点（节点类型下面会介绍）进行增删改查
④ 这是w3school提供的HTML DOM 树图片：（图1）
⑤ 举个例子
下面是一个网页html（代码1）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DocumentFragment文档片段节点</title> </head> <body> <!-- tip区域 --><div id="tip">test1</div> <ul class="list-node"><li>test2<li></ul> <script> var frag = document.createDocumentFragment(); for (var i = 0; i < 10; i++) { var li = document.createElement("li"); li.innerHTML = "List item" + i; frag.appendChild(li); } document.getElementById("list-node").appendChild(frag); </script> </body> </html>
转换成DOM树后：（图2）
（图2）中每一个元素都是一个节点，可以看到有很多类型不同的节点。
HTML DOM 节点是由多种类型的节点组合而成，所以当我们用javascript对HTML DOM进行操作的时候我们要明确HTML DOM中节点类型和层级才能准确定找到你想要增删改查的位置。
⑥ 节点类型
节点有12种类型。
下面是html DOM中常出现的类型：
当使用.nodeType所的到的值就是表格中的数值常量和字符常量；可以用.nodeType（后面详解）节点类型。
此时我们知道了DOM的常用节点类型，当我们编写js代码的时候可以通过DOM提供的API（方法）对htmlDOM进行增删改查（本文不写方法的具体使用）；
3.DOM的属性
每个节点都有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）属性（还有其他的常用属性这里不讲），我们可以通过
xxx.nodeType xxx.nodeName xxx.nodeValue获得（xxx代表通过DOM提供的方法获取的node）
① nodeType
通过某个节点的nodeType属性来获得节点类型，节点的类型可以是数值常量或者字符常量
看代码（代码2）：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>nodeType</title> </head> <body> <div id="container">这是一个元素节点</div> <script> var divNode = document.getElementById('container'); /*if (Node.ELEMENT_NODE || divNode.nodeType === 1) { alert("Node is an element."); }//通过.nodeType获取的值和节点类型的字符常量比较判断获取的节点是什么类型 但是IE中只支持数值常量，因为低版本IE浏览器没有内置Node对象，其他浏览器数值常量和字符常量都支持，因此可以直接用数值常量判断。 */ if (divNode.nodeType == Node.ELEMENT_NODE || divNode.nodeType === 1) { alert("Node is an element."); }//通过.nodeType获取的值和节点类型的数值常量比较判断获取的节点是什么类型 </script> </body> </html>
② nodeName和nodeValue
先代码（代码3）:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>nodeName,nodeValue</title> </head> <body> <!--nodeName,nodeValue实验哈哈哈--> <div id="container">这是一个元素节点</div> <script> var divNode = document.getElementById('container'); console.log(divNode.nodeName + "/" + divNode.nodeValue);//结果: DIV / null var attrNode = divNode.attributes[0]; console.log(attrNode.nodeName + "/" + attrNode.nodeValue);//结果： id / container var textNode = divNode.childNodes[0]; console.log(textNode.nodeName + "/" + textNode.nodeValue);//结果： #text / 这是一个元素节点 var commentNode = document.body.childNodes[1]; //表示取第二个注释节点，因为body下面的第一个注释节点为空白符。 console.log(commentNode.nodeName + "/" +commentNode.nodeValue); //结果： #comment / nodeName,nodeValue实验哈哈哈 console.log(document.doctype.nodeName + "/" + document.doctype.nodeValue); //结果： html/null var frag = document.createDocumentFragment(); console.log(frag.nodeName + "/" + frag.nodeValue); //结果： #document-fragment / null </script> </body> </html>
根据实验，得出下表格（以上面的代码为例）:
代码3中就用到了几个常用方法
.getElementById通过id获取节点.attributes获取html标签（元素节点）的属性（也就是属性节点）可以看出属性节点是元素节点的一部分并不是父子关系
4.参考资料
简书－微醺岁月的《深入浅出DOM基础—DOM探索之基础详解篇》
视频－讲的挺详细老师逻辑很清晰
书籍－《JavaScript DOM编程艺术》(第2版)
