优先使用parentelement，因其仅返回元素节点、逻辑清晰且不易越界；parentnode则返回任意父节点（含document等），需手动判空和类型过滤，适用于shadow dom等底层场景。
直接用 element.parentNode 或 element.parentElement 就能拿到父级，但选哪个、什么时候会出错，得看你要处理的是“节点树”还是“标签树”。
parentElement：只认“带标签的父级”
它严格返回上一级 Element 类型节点（比如 <div>、<code><section></section>），其他一律返回 null。适合日常操作 HTML 元素，逻辑干净，不容易越界。
- 点击按钮关闭所在卡片：
btn.parentElement.classList.add('hidden')—— 安全，不会意外走到或document - 向上找最近的
<article></article>：el.closest('article')比反复调用parentElement更简洁 - 遍历时推荐写法：
while (el = el.parentElement) { /* 处理元素 */ }—— 到document自动停，不报错
parentNode：更底层，返回任何父“节点”
它不挑类型，只要上级存在就返回——可能是 Element、Document、DocumentFragment，甚至 ShadowRoot。适合需要精确控制 DOM 层级的场景，但容易踩坑。
-
<template></template>里的元素：el.parentNode是HTMLTemplateElement，el.parentElement是null - Shadow DOM 内部节点：
parentNode可能是ShadowRoot（非 Element），此时parentElement为null - 文本节点调用：
textNode.parentNode是包裹它的元素，但textNode.parentElement无效（文本节点本身不是 Element）
常见误用和安全写法
别假设 parentElement 一定存在，也别直接链式访问多层（如 el.parentElement.parentElement），一遇到 null 就崩。
- 加空值判断：
if (el.parentElement) { el.parentElement.remove(); } - 用逻辑与短路：
el.parentElement && el.parentElement.classList.toggle('active') - 需要兼容老环境？
parentNode更稳，但记得手动过滤非 Element：node.nodeType === 1
怎么选，看你的目标
只操作页面上的 HTML 标签结构 → 优先用 parentElement；要深入模板、Shadow DOM 或 XML 等非标准结构 → 才需要 parentNode 并做类型判断。
