认识DOM文档的遍历指针以及如何获取根节点和body节点

淡淡的烟草味﹌ 2022-08-26 13:24 286阅读 0赞

在DOM结构树中，每一个独立的DOM节点都定义了一系列的指针(节点属性)，通过这些指针，我们可以遍历DOM结构中我们想找到的任何对象。如果指针指向的元素不存在，则对应指针的属性值为null

Node(节点)对应的5个指针：

1.parentNode：返回指定节点的父节点

2.previousSibling：返回指定节点的上一个相邻节点

3.nextSibling：返回指定节点的下一个相邻节点

4.firstChild：返回指定元素的第一个子节点

5.lastChild：返回指定元素的最后一个子节点

先来说说firstChild和lastChild，他们返回的一个节点对象的引用指针，拥有nodeType,nodeName,nodeValue属性。

这里注意，文本节点和属性节点的firstChild和lastChild属性是返回为空的。

node.childNodes\[0\] = node.fistChild  //这里的=是等价的意思

node.childNodes\[node.childNodes.length-1\] = node.lastChild

再来说说parentNode。它返回的节点永远是一个元素节点，因为只有元素节点才能包含子节点。他返回的一个节点对象的引用指针，拥有nodeType,nodeName,nodeValue属性。

这里注意，document节点没有父节点。

还有就是nextSibling和previousSibling。他们都是只读属性。他们返回的一个节点对象的引用指针，拥有nodeType,nodeName,nodeValue属性。

除了上述几个重要的指针，还有两个属性很重要。

1.childNodes

该属性能获取指定元素的所有子节点，具体返回值为一个数组。即使一个元素只有一个子节点，该属性也返回的是数组。在数组中的每个数组都是一个节点对象，都有nodeType,nodeName,nodeValue属性。下面是对应的例子：

除了这些，当我们不知道一个节点是否包含子节点的时候，我们可以用haschildNodes()方法进行判断，子节点数则用length属性获得。  
如果大家自己在上面加上代码自己测试：

比如alert(array\[0\].length)，会发现返回的是7。这是就会质疑DOM出错了？

造成是7的原因是什么呢？这要关乎到一个空格Bug的问题了，会在我的下一篇博客中讲到。

以上的childNodes是一个只读属性，如果需要给某个元素增加子节点，可以使用appendChild()或者insertBefore()方法。如果需要删除某个元素的子节点，则可以使用removeChild()方法。

2.documentElement

在DOM中，除了我们可以用一些简单的直截了当的方法获取我们所要的元素对象，比如说getElementByTagName()和getElementById()方法，我们还可以用最原始的的方法，就是从根节点开始，一级一级的往下查找，这个我们就要灵活地使用到上面所说的几个指针了。

注意，html是DOM的根节点，这点要牢记。对于根节点，我们可以用document.documentElement来获取。然后根据根节点获取body节点，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body>
    <p>DOM文档对象模型</p>
    <script>
    window.onload = function()
    {
    	var node = document.documentElement;//获取根节点
    	var a = document.documentElement.firstChild.nextSibling;//获取body元素
    	var b = node.lastChild;//另一种方法获取body元素
    	alert(a.nodeName);
    	alert(b.nodeName);
    }
    </script>
    </body>
    </html>

运行上述代码，会发现通过firstChild.nextSibling获取body节点失败了，为什么呢？因为还是那个空格Bug在作怪，当我们把<body>标签直接移到</head>后面，运行就正确了，所以在做DOM的时候，把空格Bug解决是至关重要的。