JavaScript的DOM节点

浏览器会根据DOM模型，将结构化文档(比如HTML和XML)解析成一系列的节点，再由这些节点组成一个树状结构

(DOMTree)。所有的节点和最终的树状结构，都有规范的对外接口。

JavaScript是一门编程语言，而DOM是浏览器对HTML文档结构化后的一个模型;

严格地说，DOM不属于JavaScript，但是我们最常用的就是使用JavaScript操作DOM;

图片发自App

DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树)，就是由各种不同类型的节点组成。

每个节点都可以看作是文档树的一片叶子。

最顶层的节点就是document节点，它代表了整个文档；是文档的根节点。

每张网页都有自己的document节点，window.document属性就指向这个节点的。

只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用。

每一个HTML标签元素，在DOM树上都会转化成一个Element节点对象;

文档里面最高一层一般是HTML标签，其他HTML标签节点都是它的下级。

除了根节点以外，其他节点对于周围的节点都存在三种关系:

父节点关系(parentNode):直接的那个上级节点

子节点关系(childNodes):直接的下级节点

同级节点关系(sibling):拥有同一个父节点的节点

常用dom操作：

查找页面的标签元素

标签增加、修改、删除等操作

标签的属性相关操作

给标签元素绑定事件（设置当什么什么时候，做什么什么事情）