为什么我需要 4 个 previousSibling 来获得 2 个先前的元素？ [复制]答案

【问题标题】：Why I need 4 previousSibling to get 2 previous element? [duplicate]为什么我需要 4 个 previousSibling 来获得 2 个先前的元素？ [复制]
【发布时间】：2018-05-15 18:05:30
【问题描述】：

在这个例子中，我想获取前两个兄弟的值

但这行不通btn.previousSibling.previousSibling.value

我需要使用 4 previousSibling 来获取值，为什么是 4？

<!DOCTYPE HTML>
<html>
<head>
<script>
function text(btn){
    console.log(btn.previousSibling.previousSibling.previousSibling.previousSibling.value)
}
</script>
</head>
<body>
    <textarea></textarea>
    <br>
    <button onclick="text(this)">text</button>
</body>
</html>

【问题讨论】：

预期的输出是什么？我找不到按钮的 4 个兄弟姐妹
@brk 他在问..获取文本框的结果...为什么我们需要有 4x previousSibling 属性
这与文本节点有关，如果您删除标签<button> 到<textarea> 周围的缩进、输入和空格，它将按您的预期工作
@HimanshuBansal 你的意思是text area的文本框在哪里？
@CL 所以第 1 个兄弟是 button..2nd 是 text..3rd 是 br..然后第 4 个是 textarea..从那里你得到值

标签： javascript html dom

【解决方案1】：

previousSibling 指向前一个 Node，在您的示例中是新行（TextNode）。您可能想改用previousElementSibling

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

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

【讨论】：

【解决方案2】：

这可能是因为浏览器插入了空条目：

https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling

此代码适用于您的情况：

<!DOCTYPE HTML>
<html>
<head>
<script>
function text(btn){
    alert(btn.previousSibling.previousSibling.value);
}
</script>
</head>
<body>
    <textarea>test text</textarea><br><button onclick="text(this)">text</button>
</body>
</html>

你可以使用 JQuery $(btn).prev().prev();

喜欢：

<!DOCTYPE HTML>
<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
function text(btn){
    alert($(btn).prev().prev().val());
}
</script>
</head>
<body>
    <textarea>test text</textarea>
<br>
<button onclick="text(this)">text</button>
</body>
</html>

【讨论】：

【解决方案3】：

原因在于br 元素。您可以使用parentNode 和queryselector 获取父元素以获取特定元素。

function text(btn) {
  var getText = btn.parentNode.querySelector('textarea').value;
  console.log(getText.trim())
}

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

【讨论】：