JS 获取父元素|极客笔记

JS 获取父元素

在前端开发中，经常会遇到需要操作DOM元素的情况，其中获取父元素是一个常见的需求。在JavaScript中，我们可以通过一些方法来获取元素的父元素。本文将详细介绍如何使用JavaScript来获取父元素。

获取父元素的方法

1. parentNode属性

在JavaScript中，每个DOM元素都有一个parentNode属性，该属性可以获取当前元素的父元素。只需简单地使用parentNode属性即可获取父元素。

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

运行上述代码后，将会输出childElement的父元素。

2. parentElement属性

除了parentNode属性外，还可以使用parentElement属性来获取父元素。parentElement属性也可以获取当前元素的父元素。

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

运行上述代码后，将会输出childElement的父元素。

3. closest方法

在DOM中，有时我们需要获取最接近的具有指定选择器的祖先元素。这时可以使用closest方法来实现。

const childElement = document.getElementById('childElement');
const parentElement = childElement.closest('.parentClass');
console.log(parentElement);

运行上述代码后，将会输出具有类名为parentClass的最接近的祖先元素。

获取父元素的实际应用

示例：通过点击子元素获取父元素

在实际开发中，经常需要根据用户的操作来获取不同元素的父元素。下面是一个通过点击子元素来获取父元素的示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Parent Element</title>
</head>
<body>
    <div class="parent" style="background-color: lightblue; padding: 20px;">
        <p>Parent Element</p>
        <div class="child" style="background-color: lightgreen; padding: 10px;">
            Child Element
        </div>
    </div>
    <script>
        document.querySelector('.parent').addEventListener('click', function (event) {
            const clickedElement = event.target;
            const parentElement = clickedElement.parentElement;
            console.log(parentElement);
        });
    </script>
</body>
</html>

在上述示例中，当点击子元素时，会输出子元素的父元素。