什么是ParentElement和ParentNode？
什么是 ParentElement 和 ParentNode？
在前端开发中，经常会涉及到 JavaScript、HTML 和 DOM（文档对象模型）。而 ParentElement 和 ParentNode 就是 DOM 中的两个重要属性，用于获取元素的父节点。
ParentElement
ParentElement 是 DOM 元素的一个属性，返回该元素的直接父级元素。换句话说，ParentElement 指向的是当前元素在 DOM 结构中的直接上一级元素。
ParentElement 只能获取到元素的父元素节点，而不能获取到文本节点或其他类型节点的父节点。如果元素没有父元素，则 ParentElement 返回 null。
下面是一个示例：
const childElement = document.getElementById('child');
const parentElement = childElement.parentElement;
console.log(parentElement.id); // 输出：parent
在上面的示例中，我们通过 getElementById 方法获取了 ID 为 "child" 的元素，并使用 ParentElement 获取了它的父元素，即 ID 为 "parent" 的元素。
ParentNode
ParentNode 是 DOM 元素的另一个属性，类似于 ParentElement，也用于获取元素的父节点。和 ParentElement 不同的是，ParentNode 还可以获取到文本节点、注释节点等其他类型节点的父节点。
ParentNode 返回的结果是一个父节点对象。如果元素没有父节点，则 ParentNode 返回 null。
下面是一个示例：
Hello, World!
const paragraph = document.querySelector('p');
const parentNode = paragraph.parentNode;
console.log(parentNode.id); // 输出：container
在上面的示例中，我们使用 QuerySelector 方法获取了第一个 p 元素，并使用 ParentNode 获取了它的父节点，即 ID 为 "container" 的 div 元素。
总结
ParentElement 和 ParentNode 是用于获取元素的父节点的两个属性。
- ParentElement 只能获取到元素的父元素节点，无法获取其他类型节点的父节点。
- ParentNode 可以获取元素的父节点，包括元素、文本、注释等各种节点。
- 如果元素没有父节点，则 ParentElement 和 ParentNode 都会返回 null。
通过使用这两个属性，我们可以方便地获取元素在 DOM 结构中的父节点，进而进行相关操作和处理。
上一篇