HTML | DOM parentNode 属性(1)

📌 相关文章

📜 HTML | DOM parentNode 属性(1)

📅 最后修改于: 2023-12-03 15:01:12.089000 🧑 作者: Mango

HTML | DOM parentNode 属性

在 HTML 中，DOM（文档对象模型）是对 XML 和 HTML 文档的编程接口。每一个 HTML 元素都是节点，这些节点通过树形的结构组成了整个页面。DOM parentNode 属性用于获取一个元素的父节点。

使用语法

element.parentNode

element: 必需。获取其父节点的元素。

返回值

parentNode 属性返回元素的父节点。如果该元素没有父节点，则返回 null。

示例

HTML 代码片段：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>DOM parentNode 示例</title>
  </head>
  <body>
    <div id="parent">
      <div id="child">
        <p>这是一个段落。</p>
      </div>
    </div>
    <script>
      var child = document.getElementById("child");
      var parent = child.parentNode;
      console.log(parent.id); // "parent"
    </script>
  </body>
</html>

代码解释：

通过 getElementById() 方法获取 id 为 "child" 的元素。
通过 parentNode 属性获取该元素的父节点。
通过 console.log() 方法输出父节点的 id。

执行上面的代码可以看到，控制台输出了 "parent"，即获取到了正确的父节点。

需要注意的是，如果元素本身是根节点，或者添加到一个还未添加到文档树的元素中，那么 parentNode 属性将会返回 null。因此，在使用该属性时需要进行判断。