无法使用父级的班级名称

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来获取其值，因为有多行可以包含与“taxID”具有相同ID的隐藏字段。我想使用<tr>类名来获取此值。 即被选中。

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

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

警告语句显示未定义的值。我在这里错过了一些东西吗？

Answer 1

首先，您不能在具有相同id值的文档中包含多个元素。这将不得不改变，仅此一点就可以解决你的问题。

其次，您的HTML无效。 input必须是td内的 。

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

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

如果您想要查找基于任何有效CSS选择器的一个项目，并且想要查找 .querySelector() ，请使用 .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>

Answer 2

您需要table成为tr的父级，然后DOM查找才能正常工作。另外，如 @Rory McCrossan 所述，您需要在td元素周围添加input标记：

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

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

Answer 3

（代表OP发布解决方案）。

删除隐藏字段的ID后，工作正常。编辑的代码是：

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