javascript - 获取同级元素的值

Question

我有以下 fiddle :

https://jsfiddle.net/q74k8cke/

代码是这样的:

<div>
  <input type="number" value="1"/>
  <button onclick="alert(this.parentElement.childNodes[0].value)">Click me</button>
</div>

我遇到的问题是我总是未定义，为什么？我尝试了 innerHTML、text、value 并且都给出了相同的结果。如果我尝试执行 nodeName ，我会得到 #text 作为输出。我到底做错了什么？

我必须使用纯javascript和内联来解决这个问题。添加 ID 不是一个选项

Answer 1

The problem I am having is I always get undefined, why?

因为父节点的第一个子节点是一个带有空格的Text节点，而不是input。 childNodes 包括所有类型的节点，而不仅仅是 Element。

您可以使用children ，这只是 Element 的子级，但您真正要寻找的是 previousElementSibling ，这正是它听起来的样子:前一个同级是 Element(与 Text 节点、Comment 节点等相对) .):

<button onclick="alert(this.previousElementSibling.value)">Click me</button>

实例:

<div>
  <input type="number" value="1"/>
  <button onclick="alert(this.previousElementSibling.value)">Click me</button>
</div>