javascript - 无法使用parent的类名获取隐藏字段值

Question

我的html代码是-

<tr class="selected">
<td id="participantID">XXXXX1234</td>
<input type="hidden" value="000001234" id="taxID">
<td id="fullName">Y, X</td>
</tr>

在这里，我想获取隐藏字段的值。我无法使用隐藏字段的 ID 来获取其值，因为有多行可以包含 ID 与“taxID”相同的隐藏字段。我想使用 <tr> 获取这个值类(class)名称。 即选择。

我正在使用下面的代码来获取它的值，但它给了我“未定义”的值。

var x = document.getElementsByClassName("selected")[0];
var y = x.getElementsByTagName("input")[0];
alert(y.value);

警报语句显示未定义的值。我在这里错过了什么吗？

Answer 1

首先，文档中不能有多个具有相同 id 值的元素。这必须改变，仅此一项就可以解决您的问题。

其次，您的 HTML 无效。 输入必须位于td内部。

接下来，当您只查找一个元素时，没有理由使用 getElementsByClassName() 或 getElementsByTagName() - 这是浪费，因为您最终会搜索整个元素当您只对一项感兴趣时记录。

此外，这两种方法都会返回“实时”节点列表，每次引用其结果时都需要重新扫描整个文档。其用例是有限的。

而是使用 .querySelector() 当您只想根据任何有效的 CSS 选择器和 .querySelectorAll() 查找一项时 当您想要查找一组匹配元素时。

假设这些问题已得到纠正，您可以执行以下操作:

var x = document.querySelector(".selected td input[type=hidden]");
alert(x.value);

<table>
  <tr class="selected">
    <td id="participantID">XXXXX1234
     <input type="hidden" value="000001234" id="taxID">
    </td>
    <td id="fullName">Y, X</td>
  </tr>
</table>