在 JavaScript 中，使用 previousSibling 访问相邻元素时容易因空白文本节点（Text Node）干扰而失败；应改用 previousElementSibling 精确获取元素节点，避免 DOM 遍历错误。
在 javascript 中，使用 `previoussibling` 访问相邻元素时容易因空白文本节点（text node）干扰而失败；应改用 `previouselementsibling` 精确获取元素节点，避免 dom 遍历错误。
当你尝试通过中间 <p> 元素定位其前一个兄弟 <p> 时，代码 midp.previousSibling 并未返回预期的首个 <p> 元素，而是返回了它前面的文本节点（Text Node）——即 HTML 中 <p> 标签之间的换行符、空格等不可见空白字符。这类节点属于 Node.TEXT_NODE 类型，不支持 innerHTML 属性，因此执行 firstp.innerHTML = "..." 会抛出错误或静默失败。
✅ 正确做法是使用 previousElementSibling，它只返回元素节点（Element Node），自动跳过文本节点、注释节点等非元素类型：
const div = document.getElementsByTagName("div")[0];
const midp = div.children[1]; // 获取第二个子元素（索引为1）
midp.innerHTML = "This is the middle child";
const firstp = midp.previousElementSibling; // ✅ 安全获取前一个 <p> 元素
if (firstp && firstp.tagName === "P") {
firstp.innerHTML = "This is the first child";
}⚠️ 注意事项：
- children 返回的是仅包含元素节点的 HTMLCollection（不含文本/注释节点），而 childNodes / previousSibling / nextSibling 则包含所有节点类型；
- 始终建议添加存在性校验（如 if (firstp)），避免因 DOM 结构变化导致运行时错误；
- 如需兼容旧版 IE（<9），previousElementSibling 不被支持，可封装兼容函数，但现代项目推荐使用标准 API 并配合 Babel 或明确指定浏览器支持范围。
此外，强烈建议将样式从内联（style="..."）迁移至外部 CSS 文件或 <style> 块中，提升可维护性与语义清晰度。例如：
div > p {
margin-top: 2rem;
padding: 2rem;
color: white;
}
div > p:nth-child(1) {
background-color: #ccff33;
color: black;
}
div > p:nth-child(2) {
background-color: #99cc00;
}
div > p:nth-child(3) {
background-color: #394d00;
}这样既保证 DOM 操作健壮性，又遵循关注点分离原则，是专业前端开发的最佳实践。
