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/zh-tw/n/236960.html