previousElementSibling用于获取当前元素前一个相邻的元素兄弟节点，跳过文本、注释等非元素节点；而previousSibling返回任意类型的前一个兄弟节点。

previousElementSibling 用于获取当前元素在 DOM 树中**前一个相邻的兄弟元素节点**（即同级、紧挨着的上一个元素，不包括文本节点、注释节点等）。

它和 previousSibling 的区别

这是最容易混淆的地方：

• previousSibling：返回前一个**任意类型的兄弟节点**，可能是文本节点（比如换行、空格）、注释节点，也可能是元素节点。
• previousElementSibling：只返回前一个**元素节点**（Element 类型），跳过所有非元素节点。

基本用法示例

假设有如下 HTML：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

在 JavaScript 中：

立即学习“Java免费学习笔记（深入）”；

const elC = document.getElementById('c');
console.log(elC.previousElementSibling); // <div id="b">B</div>
console.log(elC.previousSibling);         // 可能是文本节点（换行符），不是元素

实际使用时要注意的点

• 如果当前元素是父元素的第一个子元素，previousElementSibling 返回 null，不会报错，但需判断后再操作。
• 它只看 DOM 结构中的**物理顺序**，不关心 CSS 显示顺序（比如 flex-direction: row-reverse 不影响该属性）。
• 不跨父元素，只在同一个父节点下的直接子元素中查找。
• 兼容性很好，IE9+ 都支持（IE8 及更早版本不支持，需用其他方式模拟）。

安全获取并操作的写法

推荐加空值判断，避免运行时报错：

const current = document.querySelector('.target');
const prevEl = current.previousElementSibling;

if (prevEl) {
  prevEl.style.color = 'blue';
} else {
  console.log('前面没有兄弟元素');
}