在DOM操作中，使用 previousSibling 可能意外选中空白文本节点而非目标元素；应改用 previousElementSibling 精确获取相邻的HTML元素，避免因换行或空格导致的访问失败。
在dom操作中，使用 `previoussibling` 可能意外选中空白文本节点而非目标元素；应改用 `previouselementsibling` 精确获取相邻的html元素，避免因换行或空格导致的访问失败。
在JavaScript中操作DOM时，一个常见误区是混淆 Node 与 Element 的层级关系。HTML源码中 <div> 内部的换行和缩进会被浏览器解析为 TextNodes（即空白字符节点），它们也是合法的 Node，因此 previousSibling 会优先返回这些不可见的文本节点，而非你期望的 <p> 元素。
例如，原始代码中：
var firstp = midp.previousSibling; // ❌ 返回换行符组成的 TextNode，非 <p>
此时 firstp 实际指向的是 <p> 标签前的空白文本节点，调用 .innerHTML 会报错（Cannot set property 'innerHTML' of null 或 undefined）。
✅ 正确做法是使用 previousElementSibling —— 它只遍历元素节点（Element），自动跳过文本、注释等非元素节点：
var div = document.getElementsByTagName("div")[0];
var midp = div.children[1]; // 获取第二个 <p>（索引从0开始）
midp.innerHTML = "This is the middle child"; // 更新中间段落
var firstp = midp.previousElementSibling; // ✅ 精准定位前一个 <p> 元素
firstp.innerHTML = "This is the first child"; // 成功更新? 补充说明：
- children 属性返回的是仅包含元素节点的 HTMLCollection（忽略文本/注释节点），而 childNodes 才包含所有节点类型；
- previousSibling / nextSibling → 返回任意类型的相邻节点；
- previousElementSibling / nextElementSibling → 仅返回相邻的 HTML 元素节点，更健壮、语义清晰。
? 最佳实践建议：
- 避免依赖 HTML 源码格式（如换行缩进），因其会生成不可控的 TextNodes；
- 优先使用语义化选择器（如 querySelector, getElementById）或基于 Element 的导航方法；
- 将样式移至外部CSS文件，提升可维护性与性能（如示例中已重构为 div>p 和 :nth-child() 规则）。
这样即可稳定、可预测地完成兄弟元素间的 DOM 更新操作。
