为何需要调用4次previousSibling才能获取前第2个元素？

这个问题我当初刚学DOM操作时也踩过坑！核心原因是DOM里不仅有元素节点，还有你看不到的文本节点——浏览器会把HTML里的换行、空格甚至制表符都解析成文本节点，这些节点会插在元素节点之间，导致你调用previousSibling时会先选中它们，而不是你想要的元素。

我们来拆解你的HTML对应的DOM节点链：
你写的body部分代码是这样的：

<body>
<textarea></textarea>
<br>
<button onclick="text(this)">text</button>
</body>

浏览器解析后，body的子节点其实是按这个顺序排列的：

• 元素节点：<textarea>
• 文本节点：（<textarea>标签后面的换行和空格）
• 元素节点：<br>
• 文本节点：（<br>标签后面的换行和空格）
• 元素节点：<button>

所以当你从button元素出发，一步步调用previousSibling时：

1. 第一次调用 → 拿到的是<br>后面的文本节点（不是你要的<br>元素）
2. 第二次调用 → 拿到<br>元素节点
3. 第三次调用 → 拿到<textarea>后面的文本节点
4. 第四次调用 → 终于拿到目标<textarea>元素，这时才能正确读取.value

更简洁可靠的解决方案 #

没必要手动数previousSibling的次数，推荐用这些专门针对元素节点的方法：

• 用previousElementSibling替代previousSibling：
  这个方法只会定位到前一个元素节点，自动跳过文本节点。修改后代码如下：

  function text(btn){
    console.log(btn.previousElementSibling.previousElementSibling.value)
  }
  

  第一次调用拿到<br>，第二次就直接拿到<textarea>，完美解决问题。

• 通过父节点的子元素直接定位：
  如果结构固定，也可以通过父节点的children属性（只包含元素节点）获取目标：

  function text(btn){
    console.log(btn.parentElement.children[0].value)
  }
  

• 直接用选择器获取目标元素：
  如果页面里只有这一个textarea，用querySelector更直观，完全不用依赖节点位置：

  function text(btn){
    console.log(document.querySelector('textarea').value)
  }
  

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