JS 获取父元素|极客教程

JS 获取父元素

在前端开发中，经常需要对页面中的元素进行操作和交互。而要进行元素操作，首先就需要获取到该元素。有时候我们需要获取一个元素的父元素，以便对它进行一些特定的操作。本文将详细介绍如何使用 JavaScript 获取父元素。

一、获取父元素的基本概念

在 HTML 中，每个元素都位于文档树中的某一个位置，包括父元素、子元素和兄弟元素等关系。要获取一个元素的父元素，可以使用 JavaScript 的 parentNode 属性。该属性返回指定元素的父元素。

二、使用 parentNode 属性获取父元素

在 JavaScript 中，可以通过 parentNode 属性获取元素的父元素。语法如下所示：

var parentElement = element.parentNode;

其中，element 是指定需要获取父元素的元素。

下面是一个简单的示例，我们通过 JavaScript 获取一个 div 元素的父元素：

<!DOCTYPE html>
<html>
  <head>
    <title>获取父元素示例</title>
  </head>
  <body>
    <div id="myDiv">
      <p>Hello, World!</p>
    </div>

    <script>
      var childElement = document.getElementById("myDiv").firstElementChild;
      var parentElement = childElement.parentNode;
      console.log(parentElement); // 输出 <div id="myDiv">...</div>
    </script>
  </body>
</html>

以上示例中，我们首先通过 getElementById 方法获取到 id 为 "myDiv" 的 div 元素的第一个子元素，即 <p> 元素。然后使用 parentNode 属性获取到该子元素的父元素，即 <div> 元素。最后通过 console.log 打印出父元素内容。

在实际开发中，可以根据需求选择不同的获取父元素的方式。比如通过 getElementById、querySelector 或 getElementsByClassName 等方法获取到需要的元素，然后再使用 parentNode 属性获取到父元素。

三、获取父元素的注意事项

获取的父元素可能是一个元素节点、文档节点或者是 null。
如果元素没有父元素（即该元素是根元素），则 parentNode 属性返回 null，需注意处理。
如果通过 parentNode 属性获取到的是文档节点，则表示当前元素在文档中没有父元素。

下面是一些示例，演示 parentNode 属性的使用及注意事项：

var element = document.getElementById("myElement");

var parentElement = element.parentNode;
console.log(parentElement); // 若存在父元素则输出父元素节点，否则输出 null

var documentNode = document.parentNode;
console.log(documentNode); // 输出 null，document 本身就是文档节点

var rootElement = document.documentElement.parentNode;
console.log(rootElement); // 输出 #document，因为根元素没有父元素

var bodyElement = document.body.parentNode;
console.log(bodyElement); // 输出 #document，与上面一样，因为 body 是根元素的子元素

var noParentElement = document.documentElement.parentNode.parentNode;
console.log(noParentElement); // 输出 null，document.parentNode.parentNode 为 null，不存在父元素

在具体应用过程中，需要根据实际开发需求处理获取到的父元素，避免出现意外错误。