parentNode详解

一、parentnode.parent.node啥意思

在学习”parentNode”之前，先了解一下”parent”和”child”这两个词的含义。
在DOM中，一个元素可以有多个子元素，而这些子元素也可以再有自己的子元素，形成多层嵌套的结构。我们把一个元素的直接上级元素称作“父元素”，而把这个元素称为“子元素”。
而”parent node”是指某个节点的父节点，也就是在DOM树中，该节点上一级的节点，用来访问该节点所在的父节点元素对象。

二、parentnode什么意思

“parentnode”即为”parentNode”的格式化表现，是从”parent”和”node”两个词复合而成的单词，中文意思是“父节点”。
如下代码所示：

<!DOCTYPE html>
<html>
<head>
  <title>ParentNode Demo</title>
</head>
<body>
  <div id="container">
    <h1>This is the parent node.</h1>
    <p>This is a child element.</p>
  </div>
  <script type="text/javascript">
    var container = document.getElementById("container");
    console.log(container.parentNode);// 输出：body
  </script>
</body>
</html>

上述代码中，我们先定义了一个id为”container”的div元素，它包含一个h1元素和一个p元素。然后，使用JavaScript获取到id为”container”的元素，通过调用”parentNode”方法获取它的父节点元素对象，最后使用”console.log()”输出父节点元素对象的标签名”name”。

三、parentnode是祖先节点嘛

“parentNode”是DOM中指代一个节点的父节点，包括直接父节点和祖先节点。所以，”parentNode”既可以表示一个节点的直接上级节点，也可以表示该节点的所有祖先节点。
如下代码示例所示：

<!DOCTYPE html>
<html>
<head>
  <title>ParentNode Demo</title>
</head>
<body>
  <div id="container">
    <p id="parent">This is the parent node.</p>
    <div>
      <p id="child">This is the child element.</p>
    </div>
  </div>
  <script type="text/javascript">
    var child = document.getElementById("child");
    var parent = document.getElementById("parent");
    console.log(child.parentNode == parent);// 输出：true
    console.log(child.parentNode.nodeName);// 输出："DIV"
  </script>
</body>
</html>

上述代码中，我们定义了一个包含id为”parent”和”child”两个元素的嵌套结构。然后，我们使用JavaScript获取到id为”child”的元素，通过调用”parentNode”方法获取它的父节点元素对象。接着，我们分别使用“==”和“nodeName”属性来判断”child”节点的父节点是否为id为”parent”的元素，并输出结果。

四、parentNode方法

“parentNode”是Element对象的一个成员方法，用于获取该元素的父节点元素对象，具体用法如下：

element.parentNode

其中，”element”表示要获取父节点的元素对象。

五、parentnode的子元素

“parentNode”方法可以用来获取某个节点的父节点元素对象。除此之外，父节点元素对象也有一些属性和方法，可以用来获取或操作父节点的子元素。常用的属性和方法包括：

childNodes：获取该元素的所有子节点，返回一个NodeList对象。
firstChild：获取该元素的第一个子节点，返回一个Node对象。
lastChild：获取该元素的最后一个子节点，返回一个Node对象。
previousSibling：获取该元素在DOM结构中的上一个兄弟节点，返回一个Node对象。
nextSibling：获取该元素在DOM结构中的下一个兄弟节点，返回一个Node对象。
children：获取该元素的所有子元素，返回一个HTMLCollection对象。只包含元素节点，不包含其他类型的节点。
firstElementChild：获取该元素的第一个子元素，返回一个Element对象。
lastElementChild：获取该元素的最后一个子元素，返回一个Element对象。
previousElementSibling：获取该元素在DOM结构中的上一个兄弟元素，返回一个Element对象。
nextElementSibling：获取该元素在DOM结构中的下一个兄弟元素，返回一个Element对象。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>ParentNode Demo</title>
</head>
<body>
  <div id="container">
    <h1>This is the parent node.</h1>
    <p>This is a child element.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <script type="text/javascript">
    var parent = document.getElementById("container");
    console.log(parent.childNodes);// 输出：[h1, p, ul]
    console.log(parent.firstChild);// 输出：h1
    console.log(parent.lastChild);// 输出：ul
    console.log(parent.children);// 输出：[h1, p, ul]
    console.log(parent.firstElementChild);// 输出：h1
    console.log(parent.lastElementChild);// 输出：ul
  </script>
</body>
</html>

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/236960.html