JS 获取父级元素|极客笔记

JS 获取父级元素

在前端开发中，经常会遇到需要获取元素的父级元素的情况。无论是处理事件委托、样式修改还是其他操作，都可能需要用到父级元素。本文将详细介绍如何使用JavaScript获取父级元素。

1. 使用parentNode属性

JavaScript中的DOM节点对象有一个parentNode属性，可以获取其父级元素。parentNode属性返回的是一个节点对象，如果该节点没有父级元素，则返回null。

示例代码如下：

let childElement = document.getElementById('child');
let parentElement = childElement.parentNode;
console.log(parentElement);

运行结果：

<div id="parent">
  <div id="child"></div>
</div>

2. 使用parentElement属性

除了parentNode属性，DOM节点对象还有parentElement属性，该属性也可以用来获取父级元素。parentElement属性返回的是一个元素对象，如果该节点没有父级元素，则返回null。

示例代码如下：

let childElement = document.getElementById('child');
let parentElement = childElement.parentElement;
console.log(parentElement);

运行结果：

<div id="parent">
  <div id="child"></div>
</div>

3. 使用closest方法

在现代浏览器中，可以使用closest方法来获取最接近的父级元素。closest方法接收一个CSS选择器作为参数，返回与选择器匹配的最接近的父级元素。

示例代码如下：

let childElement = document.getElementById('child');
let parentElement = childElement.closest('.parent');
console.log(parentElement);

运行结果：

<div id="parent" class="parent">
  <div id="child"></div>
</div>

4. 使用parentNode属性循环

如果需要一直向上获取父级元素直到满足某个条件，可以使用parentNode属性进行循环操作。通过不断获取节点的parentNode属性，直到满足条件为止。

示例代码如下：

let childElement = document.getElementById('child');
let parentElement = childElement.parentNode;
while (parentElement && !parentElement.classList.contains('parent')) {
  parentElement = parentElement.parentNode;
}
console.log(parentElement);

运行结果：

<div id="parent" class="parent">
  <div id="child"></div>
</div>

以上就是使用JavaScript获取父级元素的几种方法，可以根据具体的情况选用合适的方法来获取父级元素。在实际开发中，熟练掌握这些方法将会帮助我们更有效地操作DOM元素。

JS 获取父级元素