JavaScript中parentNode,childNodes,children属性深度解析

PDF文件

64KB | 更新于2024-08-31 | 131 浏览量 | 举报收藏

立即下载

在JavaScript中，DOM（文档对象模型）提供了对HTML或XML文档结构进行操作的方法。`parentNode`, `childNodes`和`children`是三个非常重要的属性，它们帮助我们理解和操作元素之间的关系。 1. `parentNode` `parentNode`属性用于获取当前元素的直接父节点。在HTML文档中，每个元素都有一个父节点，除非它是整个文档的根节点`<html>`。例如，如果你有一个`<div>`元素，你可以通过`parentNode`属性找到包含它的上一级元素。在示例代码中，`document.getElementById("child").parentNode`将返回`<div id="parent">`，即`<b>`元素的父节点。如果`<b>`元素嵌套在另一个`<div>`中，我们可以连续调用`parentNode`来找到更高级别的父节点，如`document.getElementById("child").parentNode.parentNode`，这将返回`<div id="childparent">`。 2. `childNodes` `childNodes`属性返回一个NodeList，包含了元素的所有子节点，包括文本节点、注释节点以及元素节点。文本节点通常包含元素之间的空白字符或文本内容。例如，在`<div id="parent">Mytext</div>`中，`"Mytext"`是一个文本节点。通过`childNodes`，我们可以遍历所有子节点，但要注意，它不仅包含元素节点，还包含非元素节点。例如，`document.getElementById("parent").childNodes`将返回一个NodeList，包含`<div id="parent">`中的文本节点`"Mytext"`。 3. `children` `children`属性与`childNodes`类似，但它只返回元素节点，不包括文本节点、注释等其他类型的节点。在上面的例子中，`document.getElementById("parent").children`将返回一个HTMLCollection，其中不包含文本节点`"Mytext"`。而`document.getElementById("childparent").children`将返回包含`<b id="child">Mytext</b>`的HTMLCollection。这些属性在实际编程中有着广泛的应用，例如在DOM遍历、元素查找、动态添加或删除元素等方面。掌握它们可以帮助你更好地操控页面元素，实现复杂的交互效果和数据绑定。在进行DOM操作时，了解和熟练使用`parentNode`, `childNodes`, `children`是提高效率的关键。

javascript中中parentNode,childNodes,children的应用详解的应用详解

本篇文章是对javascript中parentNode,childNodes,children的应用进行了介绍，需要的朋友可以过来参考下，希

望对大家有所帮助

"parentNode"

常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点

例:

<b id="child">My text

</div>

在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElementById()

方法获取粗体元素并且想知道它"爹"是谁, 返回的信息将是一个 div. 演示下面的脚本, 你就知道是怎么回事啦 ...

引用:

复制代码代码如下:

<b id="child">My text

</div>

<!--

alert(document.getElementById("child").parentNode.nodeName);

//-->

</script>

用 parentNode 不一定只找到一个"爹", "儿子"也可以成为"爹", 如下面的例子 ...

引用:

复制代码代码如下:

<b id="child">My text

</div>

上面这段代码中有两个"爹"和两个"孩子". 头一个 div ( id "parent") 是第二个 div (childparent) 的"爹".

在 "childparent" 中有个粗体元素(id "child"), 是 "childparent" div 的"孩子". 那么, 如何访问到"爷爷" (id "parent")? 很简单 ....

引用:

复制代码代码如下:

<b id="child">My text

</div>

<!--

alert(document.getElementById("child").parentNode.parentNode.nodeName);

//-->

</script>

注意到两个 parentNode 连用了吗? "parentNode.parentNode". 第一个 parentNode 是 div ( id "childparent"), 因为我们要得到

最外层的父元素, 所以另外加了一个 parentNode 就到了 div ( id "parent").

使用 parentNode 不只找到某个元素的 nodeName, 还会更多. 例如, 你可以获取包含大量元素的父节点, 并在末尾添加一个新的

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38733355

粉丝: 4

JavaScript中parentNode,childNodes,children属性深度解析

js获取HTML DOM节点详解

javaScript节点操作

javascript节点操作

Javascript技术笔记2

JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）

Treeview中checkbox选择问题

JavaScript DOM操作与事件应用详解

JavaScript DOM操作详解：节点关系与高效获取

JavaScript获取HTML节点详解：父节点、子节点的方法

JavaScript Dom API全览与常用操作详解

最新资源