js 获取父节点|极客笔记

js 获取父节点

在 JavaScript 中，通过使用 parentNode 属性可以获取一个元素的父节点。这对于在DOM中操作元素时非常有用，比如在处理事件委托或者动态添加/删除元素时。

1. 获取父节点的方法

在 JavaScript 中，我们可以通过以下几种方式来获取一个元素的父节点：

1.1 使用 `parentNode` 属性

parentNode 属性是元素节点的一个只读属性，它返回指定元素的直接父节点。如果指定元素没有父节点，则 parentNode 的值为 null。

const childNode = document.getElementById('child');
const parentNode = childNode.parentNode;
console.log(parentNode); // 输出父节点元素

1.2 使用 `parentNode` 方法

在低版本的 IE 浏览器中，可以使用 parentNode() 方法来获取父节点。

const childNode = document.getElementById('child');
const parentNode = childNode.parentNode();
console.log(parentNode); // 输出父节点元素

1.3 使用 `parentElement` 属性

除了使用 parentNode 属性外，还可以使用 parentElement 属性来获取父节点。与 parentNode 属性不同的是，parentElement 属性始终是返回一个元素节点，而不是节点列表。

const childNode = document.getElementById('child');
const parentElement = childNode.parentElement;
console.log(parentElement); // 输出父节点元素

2. 遍历父节点

有时候我们需要遍历一个元素的所有父节点，可以使用以下方法：

2.1 使用 `while` 循环

使用 while 循环来不断获取当前节点的父节点，直到根节点为止。

const childNode = document.getElementById('child');
let parentNode = childNode.parentNode;
while (parentNode !== document) {
    console.log(parentNode); // 输出当前父节点元素
    parentNode = parentNode.parentNode;
}

2.2 使用 `parentNode` 递归

使用递归函数来逐级获取父节点。

function getParents(node) {
    if (node.parentNode === document) {
        return node.parentNode;
    }
    return getParents(node.parentNode);
}

const childNode = document.getElementById('child');
const parentNode = getParents(childNode);
console.log(parentNode); // 输出根节点

3. 示例代码

下面是一个简单的示例，通过点击子元素来获取其父节点：

<!DOCTYPE html>
<html>
<head>
    <title>获取父节点示例</title>
</head>
<body>
    <div id="parent">
        <p id="child">子元素</p>
    </div>

    <script>
        const childNode = document.getElementById('child');
        childNode.addEventListener('click', function() {
            const parentNode = childNode.parentNode;
            console.log(parentNode); // 输出父节点元素
        });
    </script>
</body>
</html>

点击子元素后，控制台会输出父节点元素。