【EASYDOM系列教程】之遍历节点

BigNerdCoding 发布于2019-08-20 18:18 / 2758人阅读

摘要：对象提供了一系列的属性和方法用来利用节点树结构中节点的关系实现遍历其中的节点。在上述语法结构中，属性返回指定节点的父元素节点。该属性获取一个包含指定节点的所有子节点的集合。值得注意的是及之前版本的浏览器中不存在空白节点问题。

Node 对象提供了一系列的属性和方法用来利用 DOM 节点树结构中节点的关系实现遍历其中的节点。

关于节点之间的关系，可以参考《DOM树结构》一节有关节点之间关系的内容。

获取父节点

通过 HTML 页面中指定元素查找其父级节点，我们可以使用 Node 对象的 parentNode 属性实现:

pNode = node.parentNode;

在上述语法结构中，parentNode 属性返回指定节点的父节点。

值得注意的是: 一个元素节点的父节点，可能是一个元素节点，也可能是一个文档节点。

以下代码示例，就是通过 parentNode 属性获取指定节点的父节点，再实现其他操作的:

var btn = document.getElementById("btn");
var parentNode = btn.parentNode;
var className = parentNode.className;
className += " animate";
parentNode.className = className;

获取父元素节点

Node 对象除了提供了 parentNode 属性可以获取指定节点的父节点之外，还提供了 parentElement 属性获取指定节点的父元素节点。

parentElementNode = node.parentElement;

在上述语法结构中，parentElement 属性返回指定节点的父元素节点。

值得注意的是: 如果一个节点没有父节点，或者父节点不是一个元素节点的话，parentElement 属性返回 null。

以下代码示例，就是通过 parentElement 属性获取指定节点的父元素节点，再实现其他操作的:

var btn = document.getElementById("btn");
var parentElement = btn.parentElement;
var className = parentElement.className;
className += " animate";
parentElement.className = className;

父节点与父元素节点的区别

所谓父节点，并没有指定某个节点的父节点一定是哪个类型的节点。而父元素节点，指定了某个节点的父节点一定是元素节点。

parentNode: 获取指定节点的父节点，其父节点不一定是元素节点。

parentElement: 获取指定节点的父元素节点，其父节点必须是元素节点。

如果我们获取元素的父节点的话，就是 document 文档节点。而 document 文档节点并不是一个元素节点。如下述代码示例:

// 获取  元素
var html = document.documentElement;
console.log("parentNode: " + html.parentNode);
console.log("parentElement: " + html.parentElement);

上述代码示例，输出的结果如下:

获取子节点

通过 HTML 页面中指定元素查找其子节点，我们可以通过以下 Node 对象的属性实现:

属性名	描述
childNodes	获取指定节点的所有子节点
firstChild	获取指定节点的第一个子节点
lastChild	获取指定节点的最后一个子节点

值得注意的是: HTML 页面中某个元素的子节点不一定是唯一的。

获取所有子节点

Node 对象提供了 childNodes 属性用于获取 HTML 页面中指定节点的所有子节点:

var ndList = Node.childNodes;

在上述语法结构中，childNodes 属性的返回值 ndList 是一个 NodeList 对象，并且为只读。该属性获取一个包含指定节点的所有子节点的集合。

值得注意的是: childNodes 属性返回的是一个动态的 NodeList 对象。有关动态 NodeList 的内容，请参考《定位页面元素》一节的内容。

以下代码示例，就是通过指定节点获取其所有子节点，再实现其他操作的:

var parentNode = document.getElementById("parent");
var children = parentNode.childNodes;
console.log(children);

上述代码示例，输出的结果如下:

我们会发现，获取到的所有子节点，除了真正的子节点

上述代码示例的 DOM 节点树结构如下图所示:

如果将 HTML 页面的源代码编写成一行时，这个空白节点的问题可以得到解决。但这种解决方式妨碍了我们代码的可读性，并不建议这样解决。

值得注意的是: IE 8 及之前版本的浏览器中不存在空白节点问题。

空白节点的解决方案

在开发中，空白节点的问题将 DOM 节点树结构的解析及操作增加了不少的难度和麻烦。我们这里提供一种比较简单有效的解决方式:

弃用 DOM 中 Node 对象用于获取指定节点的子节点和兄弟节点的属性。

通过使用 getElementsByTagName() 方法实现相应功能。

比如我们要查找 HTML 页面指定元素的所有子节点的话，我们按照如下代码示例实现:

var parentNode = document.getElementById("parent");
var children = parentNode.getElementsByTagName("button");
console.log(children);

上述代码示例运行的结果如下:

关于 DOM 中为什么要具有空白节点以及更完整的解决方案，可以参考 Mozilla 社区的《DOM 中的空白符》。

获取第一个子节点

Node 对象提供了 firstChild 属性用于获取指定节点的第一个子节点:

var first_child = node.firstChild;

在上述语法结构中，firstChild 属性返回的 first_child 表示当前节点的第一个子节点的引用。

值得注意的是: 如果当前节点无子节点，则 firstChild 属性返回 null。

以下代码示例，就是通过指定节点获取其第一个子节点，再实现其他操作的:

var parentNode = document.getElementById("parent");
var firstChild = parentNode.firstChild;

通过上述代码示例，我们最终得到依旧是空白节点，而并非第一个子节点。

var parentNode = document.getElementById("parent");
var firstChild = parentNode.getElementsByTagName("button")[0];
console.log(firstChild);

通过 getElementsByTagName() 方法替换之后，所得到的节点才是真正的第一个节点。

获取最后一个节点

Node 对象提供了 lastChild 属性用于获取指定节点的最后一个子节点:

var last_child = node.lastChild;

在上述语法结构中，lastChild 属性返回的 last_child 表示当前节点的最后一个子节点的引用。

值得注意的是: 如果当前节点无子节点，则 lastChild 属性返回 null。

以下代码示例，就是通过指定节点获取其最后一个子节点，再实现其他操作的:

var parentNode = document.getElementById("parent");
var lastChild = parentNode.lastChild;

通过上述代码示例，我们最终得到依旧是空白节点，而并非最后一个子节点。

var parentNode = document.getElementById("parent");
var children = parentNode.getElementsByTagName("button");
var lastChild = children[children.length-1];

通过 getElementsByTagName() 方法替换之后，所得到的节点才是真正的最后一个节点。

获取相邻兄弟节点

通过 HTML 页面中指定元素查找其相邻兄弟节点，我们可以通过以下 Node 对象的属性实现:

属性名	描述
previousSibling	获取指定节点的前面相邻兄弟节点
nextSibling	获取指定节点的后面相邻兄弟节点

获取相邻前面兄弟节点

Node 对象提供了 previousSibling 属性用于获取指定节点的前面相邻兄弟节点:

previousNode = node.previousSibling;

在上述语法结构中，previousSibling 属性返回的 previousNode 表示当前节点的前一个兄弟节点。

值得注意的是: 如果当前节点无前一个兄弟节点，则 previousSibling 属性返回 null。

以下代码示例，就是通过指定节点获取其前面相邻兄弟节点，再实现其他操作的:

var elem = document.getElementById("btn");
var previousSibling = elem.previousSibling;

通过上述代码示例，我们最终得到依旧是空白节点，而并非前面相邻兄弟节点。

// 判断获取的兄弟节点是否为元素节点
if ( previousSibling.nodeType != 1){
    previousSibling = previousSibling.previousSibling;
}

通过判断获取的节点类型是否为元素节点，实现如何获取真正的前面相邻兄弟节点。

获取相邻后面兄弟节点

Node 对象提供了 nextSibling 属性用于获取指定节点的后面相邻兄弟节点:

nextNode = node.nextSibling;

在上述语法结构中，nextSibling 属性返回的 nextNode 表示当前节点的后一个兄弟节点。

值得注意的是: 如果当前节点无后一个兄弟节点，则 nextSibling 属性返回 null。

以下代码示例，就是通过指定节点获取其后面相邻兄弟节点，再实现其他操作的:

var elem = document.getElementById("btn");
var nextSibling = elem.nextSibling;

通过上述代码示例，我们最终得到依旧是空白节点，而并非后面相邻兄弟节点。

// 判断获取的兄弟节点是否为元素节点
if ( nextSibling.nodeType != 1){
    nextSibling = nextSibling.nextSibling;
}

通过判断获取的节点类型是否为元素节点，实现如何获取真正的后面相邻兄弟节点。

本教程免费开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。

本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

云服务器 GPU云服务器系列之系列之二架构之坑系列 linux系列教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84309.html

【EASYDOM系列教程】之遍历元素

摘要：对象提供了一系列的属性和方法用来利用元素树结构中元素的关系实现遍历其中的元素。关于元素之间的关系，可以参考元素树一节有关元素之间关系的内容。该属性获取一个包含指定元素的所有子元素的集合。值得注意的是如果当前元素无子节点，则属性返回。 Element 对象提供了一系列的属性和方法用来利用 DOM 元素树结构中元素的关系实现遍历其中的元素。关于元素之间的关系，可以参考《DOM 元素树》一...

codeGoogle 2019-08-21 12:00 评论0 收藏0
【EASYDOM系列教程】之Node介绍

摘要：对象的作用树结构主要是依靠节点进行解析，称为节点树结构。对象的继承链关系对象是继承于对象的，是一个用于接收事件的对象。但需要注明作者及来源，并且不能用于商业。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 DOM 的标准规范中提供了 Node 对象，该对象主要提供了用于解析 DOM 节点树结构的属性和方法。 Node 对象的作用 DOM 树结构主要是依靠节点进行解析，...

oliverhuang 2019-08-20 18:16 评论0 收藏0
【EASYDOM系列教程】之 Element 对象

摘要：而标准规范中提供了对象，主要是依靠元素树结构访问和更新页面的内容。值得注意的是所有的页面的元素都是对象，而这个对象又是继承于对象的。我们可以简单地理解对象是对象的补充。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 DOM 的标准规范中提供了 Element 对象，该对象提供了 HTML 页面中所有元素所具有的属性和方法。我们都知道 DOM 标准规范中提供了 Nod...

jeyhan 2019-08-21 11:55 评论0 收藏0
【EASYDOM系列教程】索引

摘要：系列教程是一套免费开源，任何人都可以免费学习分享，甚至可以进行修改。本文是这套系列教程的索引也就是目录第一回介绍在最开始，我们先来了解是什么的作用，以及浏览器的支持是怎么样的。《EASYDOM》系列教程是一套免费、开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。本文是这套系列教程的索引（也就是目录）: 第一回 DOM 介绍在最开始，我...

yanwei 2019-08-21 11:51 评论0 收藏0
【EASYDOM系列教程】之删除节点

摘要：对象提供了方法实现从页面中删除指定节点。其语法结构如下在上述语法结构中，调用方法的表示参数的父节点，而参数则表示要删除的那个节点。则用于存储要删除的节点的引用，即。 Node 对象提供了 removeChild() 方法实现从 HTML 页面中删除指定节点。其语法结构如下: var oldChild = node.removeChild(child); OR element.remov...

zzbo 2019-08-20 18:23 评论0 收藏0