异常教程

HTML DOM parentNode 属性（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，HTML DOM（文档对象模型）是连接静态页面与动态交互的核心桥梁。而parentNode属性作为DOM操作中的基础工具，能够帮助开发者快速定位和操作节点之间的层级关系。无论是调整元素样式、修改内容，还是构建复杂的动态页面，理解parentNode的原理与用法都至关重要。本文将从基础概念出发，结合实际案例，逐步解析这一属性的实现逻辑与应用场景，帮助读者掌握DOM操作的核心技巧。

什么是HTML DOM parentNode 属性？

parentNode是DOM节点的一个属性，用于获取当前节点的直接父节点。每个HTML元素在DOM树中都有明确的层级关系，例如<div>可能包含多个子元素，而它自身可能又是另一个容器的子元素。通过parentNode，开发者可以像“向上追溯家谱”一样，快速定位到目标节点的上一级节点。

形象比喻：
想象DOM树是一棵家族树，每个节点都是树上的一个分支。parentNode就像询问某个家庭成员的“父亲是谁”。例如，若一个<p>标签是<div>的子元素，那么<p>的parentNode就是对应的<div>节点。

如何使用parentNode 属性？

基本语法

parentNode的使用非常简单，只需通过JavaScript访问目标节点的该属性即可：

// 假设有一个元素节点
const element = document.querySelector("p");
const parent = element.parentNode;

此时，parent变量将指向该<p>标签的父节点。需要注意的是，parentNode返回的是直接父节点，而非所有祖先节点。

案例：动态获取父节点

以下是一个完整的案例，演示如何通过按钮点击事件，动态获取并修改父节点的样式：

<!-- HTML结构 -->
<div class="container">
  <p id="target">点击下方按钮</p>
</div>
<button onclick="modifyParent()">修改父节点样式</button>

<script>
function modifyParent() {
  const target = document.getElementById("target");
  const parent = target.parentNode; // 获取父节点
  parent.style.backgroundColor = "lightblue"; // 修改父节点样式
}
</script>

当用户点击按钮时，<p>标签的父级.container的背景色会变为浅蓝色。

parentNode 属性的进阶用法

1. 结合其他DOM方法

parentNode常与其他DOM方法（如appendChild()、removeChild()）配合使用，实现更复杂的节点操作。例如，以下代码演示如何将一个节点移动到其父节点的兄弟节点中：

const nodeToMove = document.querySelector("#move-me");
const parent = nodeToMove.parentNode;
const sibling = parent.nextElementSibling;

// 将节点移动到兄弟节点内
if (sibling) {
  sibling.appendChild(nodeToMove);
}

2. 遍历DOM树

通过递归或循环，可以利用parentNode向上遍历整个DOM树。例如，以下代码会一直向上查找，直到找到带有特定类名的祖先节点：

function findAncestor(element, className) {
  let current = element;
  while (current) {
    if (current.classList.contains(className)) {
      return current;
    }
    current = current.parentNode;
  }
  return null;
}

const ancestor = findAncestor(targetElement, "ancestor-class");

parentNode 属性的注意事项

1. 处理空节点或非元素节点

并非所有节点都有父节点。例如，文档的根节点（如<html>）的parentNode是document对象，而文档本身的parentNode为null。因此，在代码中需添加条件判断，避免因空值引发错误：

if (element.parentNode) {
  // 安全操作
}

2. 区分parentNode 与 parentElement

虽然parentNode和parentElement功能相似，但两者存在细微差异：

  • parentNode：返回任何类型的父节点，包括文本节点、注释节点等。
  • parentElement：仅返回元素节点（如<div>、<span>），非元素节点时返回null。

以下表格对比了两者的典型场景：

场景描述parentNode 返回值parentElement 返回值
子节点是文本内容文本节点的父元素（如<p>）文本节点的父元素（如<p>）
父节点是文档根节点（<html>）document对象null
父节点是注释节点注释节点本身null

实际应用场景与代码示例

案例1：动态移除表单错误提示

在表单验证中，常需根据输入内容动态显示或隐藏错误信息。以下代码演示如何通过parentNode定位错误提示并清除：

<form>
  <input type="text" id="username">
  <span class="error" id="error-msg"></span>
</form>

<script>
document.getElementById("username").addEventListener("input", function() {
  const errorMsg = document.getElementById("error-msg");
  const parent = errorMsg.parentNode; // 获取父容器

  // 清除错误信息
  if (this.value.trim() !== "") {
    errorMsg.textContent = "";
    parent.style.borderColor = "initial";
  }
});
</script>

当用户输入内容时，错误提示的父容器（如<div>或<form>）的边框颜色会被重置。

案例2：构建可折叠导航菜单

通过操作父节点的子节点，可以实现类似“点击展开/折叠”的交互效果：

<ul class="menu">
  <li>菜单项1
    <ul class="submenu">
      <li>子项1</li>
      <li>子项2</li>
    </ul>
  </li>
</ul>

<script>
document.querySelectorAll(".menu > li").forEach(item => {
  item.addEventListener("click", function() {
    const submenu = this.querySelector(".submenu");
    const parent = this.parentNode; // 获取当前菜单项的父节点（即上级菜单）

    if (submenu) {
      submenu.style.display = submenu.style.display === "none" ? "block" : "none";
    }
  });
});
</script>

点击菜单项时，其子菜单会切换显示状态，而parentNode帮助保持层级关系的准确性。

总结与扩展

通过本文的讲解，读者应已掌握以下核心内容：

  1. parentNode的基本原理：作为DOM节点属性，用于获取直接父节点。
  2. 实际应用场景：包括样式修改、节点移动、表单验证等常见开发需求。
  3. 注意事项：如空值处理、与parentElement的区别等。

对于中级开发者，可以进一步探索parentNode与事件冒泡、DOM遍历算法的结合，或尝试使用ES6+语法优化代码结构。例如，通过箭头函数简化事件监听逻辑，或利用closest()方法实现更简洁的祖先节点查找。

掌握HTML DOM parentNode 属性不仅是DOM操作的基础，更是构建动态网页的必备技能。建议读者通过实际项目反复练习，逐步提升对DOM层级关系的理解与控制能力。

最新发布

查看更多文章