异常教程
HTML DOM previousElementSibling 属性（一文讲透）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习 ，欢迎点击围观
在网页开发中，DOM（文档对象模型）是连接HTML结构与JavaScript操作的核心桥梁。而 HTML DOM previousElementSibling 属性 是 DOM 中一个极其实用的工具，它允许开发者通过代码直接访问某个元素的前一个兄弟元素。无论是动态修改页面样式、构建交互式导航菜单，还是实现元素间的数据联动，这一属性都能显著简化开发流程。本文将通过循序渐进的讲解、代码示例和生动比喻，帮助读者全面掌握这一工具的应用场景与实现细节。
一、什么是 previousElementSibling 属性？
previousElementSibling 是 DOM 元素的一个只读属性，用于返回当前元素的前一个兄弟元素节点。如果当前元素没有前一个兄弟元素（例如它是父容器的第一个子元素），则返回 null。
核心概念解析
-
兄弟元素：在 HTML 结构中，具有相同父元素的元素互为兄弟元素。例如：
<div class="parent"> <p>元素A</p> <p>元素B</p> </div>上述代码中，
元素A和元素B是兄弟元素，元素B的previousElementSibling即为元素A。 -
与 previousSibling 的区别：
previousSibling返回的是当前元素的前一个节点（包括文本节点、注释节点等），而previousElementSibling仅返回元素节点。- 这一区别类似于“筛选器”的作用：
previousElementSibling会自动过滤掉非元素节点，避免处理冗余数据。
比喻：
想象一个家庭中的兄弟姐妹，previousSibling可能包括“前一个兄弟”或“前一个宠物”，而previousElementSibling只关注“前一个兄弟”。
二、基础用法与代码示例
1. 基础语法
通过 JavaScript 获取元素的 previousElementSibling 非常简单：
// 假设当前元素为 element
const previousElement = element.previousElementSibling;
2. 实际案例：动态修改元素样式
场景：点击某个列表项时，高亮当前项并重置前一个高亮项。
HTML 结构
<ul id="menu">
<li class="menu-item">首页</li>
<li class="menu-item">关于</li>
<li class="menu-item">服务</li>
</ul>
JavaScript 实现
document.querySelectorAll('.menu-item').forEach(item => {
item.addEventListener('click', function() {
// 移除当前元素的前一个兄弟元素的高亮样式（如果存在）
const previous = this.previousElementSibling;
if (previous) previous.classList.remove('active');
// 为当前元素添加高亮样式
this.classList.add('active');
});
});
样式效果
.active {
background-color: #4CAF50;
color: white;
}
运行效果：
- 点击任意菜单项时，当前项变绿，同时前一个高亮项恢复原色。
- 若当前项是第一个子元素，
previousElementSibling返回null，因此无需处理不存在的元素。
三、进阶技巧与注意事项
1. 处理非元素节点的场景
假设 HTML 中存在文本节点或注释节点：
<div id="container">
<!-- 这是一个注释 -->
<p>元素A</p>
<p>元素B</p>
</div>
此时，元素B 的 previousSibling 是文本节点（包含注释和空格），而 previousElementSibling 直接跳过非元素节点，返回 元素A。
2. 跨层级元素的遍历
若需访问更远的兄弟元素，可结合循环操作：
function findNthPreviousElement(element, n) {
let current = element;
while (n > 0 && current) {
current = current.previousElementSibling;
n--;
}
return current;
}
// 获取当前元素的前第三个兄弟元素
const thirdPrevious = findNthPreviousElement(element, 3);
3. 兼容性与替代方案
- 现代浏览器（Chrome、Firefox、Edge 等）均支持此属性。
- 在旧版浏览器（如 IE）中，可使用
previousSibling结合nodeType判断：let previousElement = element.previousSibling; while (previousElement && previousElement.nodeType !== 1) { previousElement = previousElement.previousSibling; }
四、与类似属性的对比
通过表格对比 previousElementSibling 与其他 DOM 节点遍历属性的差异：
| 属性名称 | 返回值类型 | 是否过滤非元素节点 | 典型用途 |
|---|---|---|---|
previousElementSibling | 元素节点或 null | 是 | 直接访问前一个元素 |
previousSibling | 任意节点类型 | 否 | 需手动过滤非元素节点 |
nextElementSibling | 元素节点或 null | 是 | 访问后一个元素 |
parentElement | 父元素节点或 null | 是 | 访问父容器 |
五、实际项目中的应用场景
1. 构建可折叠的导航菜单
// 点击箭头图标时展开/折叠子菜单
document.querySelectorAll('.menu-arrow').forEach(arrow => {
arrow.addEventListener('click', function() {
const target = this.nextElementSibling; // 获取后一个兄弟元素（子菜单）
target.style.display = target.style.display === 'none' ? 'block' : 'none';
// 通过 previousElementSibling 操作箭头方向
const icon = this.querySelector('i');
icon.className = icon.className.includes('down')
? 'fa fa-up'
: 'fa fa-down';
});
});
2. 表单验证中的错误提示联动
// 当输入框失去焦点时，检查前一个错误提示元素是否存在
document.querySelector('#username').addEventListener('blur', function() {
const errorNode = this.previousElementSibling;
if (this.value.trim() === '') {
errorNode.style.display = 'block';
} else {
errorNode.style.display = 'none';
}
});
六、常见问题解答
Q1：为什么有时 previousElementSibling 返回 null？
- 当前元素是父容器的第一个子元素时，没有前一个兄弟元素，因此返回
null。 - 解决方案：在代码中添加条件判断，避免操作
null对象。
Q2：能否通过此属性实现元素的“环绕”效果？
可以！例如，将当前元素的前一个兄弟和后一个兄弟包裹在一个容器中：
const wrapper = document.createElement('div');
const prevElement = element.previousElementSibling;
const nextElement = element.nextElementSibling;
if (prevElement && nextElement) {
wrapper.appendChild(prevElement);
wrapper.appendChild(element);
wrapper.appendChild(nextElement);
element.parentElement.appendChild(wrapper);
}
结论
HTML DOM previousElementSibling 属性 是 DOM 操作中不可或缺的工具之一，它简化了元素间的关系处理，尤其在动态交互和布局调整中表现出色。通过本文的示例与讲解，开发者可以快速掌握其核心用法，并在实际项目中灵活应用。无论是构建导航菜单、表单验证，还是实现复杂的元素联动，这一属性都能显著提升开发效率。
未来，随着前端技术的演进，DOM 操作的灵活性和性能将进一步优化，但掌握基础属性的原理与用法，始终是开发者应对复杂需求的核心能力。希望本文能成为您技术成长路上的实用指南！