parentNode返回任意父节点（含Document等），parentElement仅返回元素节点且更安全；推荐日常用parentElement，需处理非元素父节点时才用parentNode。
在 JavaScript 中，parentNode 和 parentElement 都用于获取当前节点的父级节点，但它们的行为有关键区别：前者返回**任意类型的父节点**（包括文档、文档片段等），后者只返回**元素节点（Element）**，更安全、更常用。
parentNode：返回直接父节点，可能是任何节点类型
parentNode 是 Node 接口的属性，所有节点（如元素、文本、注释）都继承它。它返回 DOM 树中该节点的直接父节点，类型可能是 Element、Document、DocumentFragment 等。
- 如果当前节点是
<div> 的子元素，<code>parentNode通常是该<div> 元素； <li>如果当前节点是 <code>document.body的子节点，parentNode就是document（Document 类型）； - 如果当前节点是 document 本身，
parentNode为null。 - 适用于绝大多数操作 DOM 元素的场景（例如找上层容器、切换样式、添加 class）；
- 不会因父节点是
Document而导致后续方法调用失败； - 兼容性良好（IE9+ 支持，现代浏览器完全支持）。
⚠️ 注意：当父节点不是元素（比如是 Document 或 DocumentFragment），用 parentNode 后再调用元素专属方法（如 querySelector、classList）会报错。
parentElement：只返回父元素节点，更安全实用
parentElement 是 Element 接口的属性，只对元素节点有效，返回其**最近的父级元素节点**。如果父节点不是元素（如 Document、Text 节点），则返回 null。
✅ 推荐日常开发中优先使用 parentElement，除非你明确需要处理非元素类型的父节点。
实际用法对比示例
假设有如下 HTML：
Hello
JS 中：
const span = document.getElementById('target');
console.log(span.parentNode); // <div id="container">...</div>（Element）
console.log(span.parentElement); // 同上，也是该 div
// 更典型的情况：span 的父节点是 DocumentFragment（如 Vue/React 渲染中）
// 此时 span.parentNode 可能是 DocumentFragment，但 span.parentElement 为 null
链式查找父级元素的技巧
常需向上查找特定祖先元素（如 closest .card 或 form）。可结合 parentElement 循环或直接用 closest()：
- 手动遍历：
el.parentElement.parentElement（不推荐多层硬写）； - 循环查找：
let p = el.parentElement; while (p && !p.matches('.my-class')) p = p.parentElement;； - ✅ 更简洁：
el.closest('.my-class')—— 原生支持，语义清晰，推荐替代多层parentElement。
