JavaScript中为何无法通过同级子元素调用并更新另一子元素？

你的问题出在previousSibling的使用上：HTML里元素之间的换行、空格会被浏览器解析成文本节点，previousSibling会返回这些文本节点，而不是你要找的第一个<p>元素，所以直接给它设置innerHTML会报错。

修正方案1：使用previousElementSibling #

这是最直接的方法，previousElementSibling只会返回前一个元素类型的兄弟节点，自动跳过文本节点：

var div = document.getElementsByTagName("div")[0];
var midp = div.children[1];
midp.innerHTML = "This is the middle child";
var firstp = midp.previousElementSibling; // 替换为该方法
firstp.innerHTML = "This is the first child";

修正方案2：手动过滤文本节点 #

如果需要兼容旧版浏览器（目前基本无需考虑），可以循环判断节点类型，直到找到元素节点：

var div = document.getElementsByTagName("div")[0];
var midp = div.children[1];
midp.innerHTML = "This is the middle child";
var firstp = midp.previousSibling;
// 跳过所有非元素类型的节点
while (firstp && firstp.nodeType !== 1) {
  firstp = firstp.previousSibling;
}
if (firstp) {
  firstp.innerHTML = "This is the first child";
}

另外，代码里var midPText = (midp.innerHTML = "...")这种写法没必要，直接赋值即可，无需将赋值结果存入变量（除非后续需要复用该字符串）。

内容的提问来源于stack exchange，提问作者Liquorice