解析HTML中的DOM

DOM是所有前端开发每天打交道的东西，但是随着jQuery等库的出现，大大简化了DOM操作，导致大家慢慢的“遗忘”了它的本来面貌。不过，要想深入学习前端知识，对DOM的了解是不可或缺的，所以本文力图系统的讲解下DOM的相关知识，如有遗漏或错误，还请大家指出一起讨论^ ^。

DOM（文档对象模型）是针对HTML和XML文档的一个API，通过DOM可以去改变文档。

这个说法很官方，大家肯定还是不明白。

举个例子：我们有一段HTML，那么如何访问第二层第一个节点呢，如何把最后一个节点移动到第一个节点上面去呢？

DOM就是定义了如果做类似操作，那么应该怎么做的标准。比如用getElementById来访问节点，用insertBefore来插入节点。

当浏览器载入HTML时，会生成相应的DOM树。

简而言之，DOM可以理解为一个访问或操作HTML各种标签的实现标准。

对于一个HTML来说，文档节点Document（看不到的）是它的根节点，对应的对象便是document对象（严格讲是子类HTMLDocument对象，下面单独介绍Document类型时会指出）。

换句话说存在一个文档节点Document，然后它有子节点，比如通过document.getElementsByTagName(“html”)，得到类型为元素节点的Element html。

每一段HTML标记都可以用相应的节点表示，例如：

HTML元素通过元素节点表示，注释通过注释节点表示，文档类型通过文档类型节点表示等。

一共定义了12种节点类型，而这些类型又都继承自Node类型。

所以我们首先讲Node类型，因为这个类型的方法是所有节点都会继承的。

Node是所有节点的基类型，所有节点都继承自它，所以所有节点都有一些共同的方法和属性。

先讲Node类型的属性

首先是nodeType属性，用来表明节点类型的，例如：

document.nodeType; // 返回 9 ，其中document对象为文档节点Document的实例

这里面，9代表的就是DOCUMENT_NODE节点的意思，可以通过Node.DOCUMENT_NODE查看节点对应的数字

document.nodeType === Node.DOCUMENT_NODE; // true

至于一共有哪些节点，每个节点对应的数字又是多少，这个可以问谷歌就知道了。反正常用的就是元素节点Element(对应数字为1)和文本节点Text(对应数字为3)

然后常用的还有nodeName和nodeValue

对于元素节点 nodeName就是标签名，nodeValue就是null

对于文本节点 nodeName为”#text”(chrome里面测试的),nodeValue就是实际的值

每个节点还有childNodes属性，这是个十分重要的属性，它保存了这个节点所有直接子元素

调用childNodes返回的是一个NodeList对象，它极其像数组，但是有一个最关键的地方，它是动态查询的，也就是说每次调用它都会对DOM结构查询，所以对它的使用需要慎重，注意性能。

访问childNodes可以使用数组下表或者item方法

然后各个节点还存在各种属性让它们可以相互访问，下图很好的总结了

比较有用的方法和属性：

1、hasChildNodes()

如果包含子节点就返回true，比查询childNodes的length来的简单。

2、ownerDocument

返回文档节点的引用（在html里面也就是document对象）

再介绍下Node类型常用的方法

appendChild()方法可以在节点的childNodes的末尾增加一个节点，值得注意的是如果这个节点是已经存在在文档中的，那么便会删除原节点，感觉上就像是移动节点一样。

insertBefore()方法接受两个参数，一个是插入的节点，另外一个是参照的节点。如果第二个参数为null，则insertBefore和appendChild效果一样。否则便会把节点插入到参照节点之前。这里要注意的是，如果第二个参数不为null，那么插入的节点不能是已经存在的节点。

replaceChild()方法可以替换节点，接受两个参数，需要插入的节点和需要替换的节点。返回被替换掉的节点。

removeChild()移除节点。这里有个常见需求，比如我有一个节点 #waste-node ，那么如何移除它呢？

var wasteNode = document.getElementById( waste-node wasteNode.parentNode.removeClhid(wasteNode); // 先拿到父节点，再调用removeClild删除自己        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。