JS 中怎么用 parentNode 和 parentElement 获取父节点-js教程-PHP中文网

parentNode返回任意父节点（含Document等），parentElement仅返回元素节点且更安全；推荐日常用parentElement，需处理非元素父节点时才用parentNode。

js 中怎么用 parentnode 和 parentelement 获取父节点

在 JavaScript 中，parentNode 和 parentElement 都用于获取当前节点的父级节点，但它们的行为有关键区别：前者返回**任意类型的父节点**（包括文档、文档片段等），后者只返回**元素节点（Element）**，更安全、更常用。

parentNode：返回直接父节点，可能是任何节点类型

parentNode 是 Node 接口的属性，所有节点（如元素、文本、注释）都继承它。它返回 DOM 树中该节点的直接父节点，类型可能是 Element、Document、DocumentFragment 等。

如果当前节点是 的子元素，parentNode 通常是该元素；
如果当前节点是 document.body 的子节点，parentNode 就是 document（Document 类型）；


  如果当前节点是 document 本身，parentNode 为 null。
⚠️ 注意：当父节点不是元素（比如是 Document 或 DocumentFragment），用 parentNode 后再调用元素专属方法（如 querySelector、classList）会报错。
parentElement：只返回父元素节点，更安全实用
parentElement 是 Element 接口的属性，只对元素节点有效，返回其**最近的父级元素节点**。如果父节点不是元素（如 Document、Text 节点），则返回 null。

适用于绝大多数操作 DOM 元素的场景（例如找上层容器、切换样式、添加 class）；
  不会因父节点是 Document 而导致后续方法调用失败；
  兼容性良好（IE9+ 支持，现代浏览器完全支持）。

✅ 推荐日常开发中优先使用 parentElement，除非你明确需要处理非元素类型的父节点。

											
												
												
													cn-json-diff
													比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。
												
												下载
												
											
										
实际用法对比示例
假设有如下 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。