Question

如何获取对getElementByID()可以找到的另一个元素内嵌的元素的引用？

到目前为止，我有这个：

<table>
  <tr id="templateRow" style="display: none;">
    <td><input    name="f_name[]"         type="text"></td>
    <td><textarea name="f_description[]"  rows="4"></textarea></td>
    <td><input    name="f_category[]"     type="text"></td>
  </tr>
</table>

并有一些JS添加了它的副本来构建表（删除id和样式属性）。

假设我有<tr>的引用，如何引用该表行中名为f_name[]的输入？

背景：目前我在嵌套元素上有临时ID，在我去的时候也删除了它们。我有一个棘手的情况是我有一个函数添加1行（并返回对它的引用），另一个函数添加多行（调用addOneRow函数）..我想要{{1函数最终将焦点设置在添加的第一行。

Answer 1

使用Element#querySelector方法，根据属性使用attribute equals selector获取。

tr.querySelector('td input[name="f_name[]"]')

＆＃13;

var tr = document.getElementById('templateRow');

tr.querySelector('td input[name="f_name[]"]').style.color = 'red';

＆＃13;

<table>
  <tr id="templateRow" style="">
    <td>
      <input name="f_name[]" type="text">
    </td>
    <td>
      <textarea name="f_description[]" rows="4"></textarea>
    </td>
    <td>
      <input name="f_category[]" type="text">
    </td>
  </tr>
</table>

＆＃13;

Answer 2

在任何合理的最近浏览器中，您都可以使用querySelector method来查询元素的子项。

实施例

＆＃13;

var templateRow = document.getElementById('templateRow');

var f_name = templateRow.querySelector('[name="f_name[]"]');
var f_description = templateRow.querySelector('[name="f_description[]"]');
var f_category = templateRow.querySelector('[name="f_category[]"]');

console.log(f_name.outerHTML);
console.log(f_description.outerHTML);
console.log(f_category.outerHTML);

＆＃13;

<table>
<tr id="templateRow" style="display: none;">
  <td><input    name="f_name[]"         type="text"></td>
  <td><textarea name="f_description[]"  rows="4"></textarea></td>
  <td><input    name="f_category[]"     type="text"></td>
</tr>
</table>

＆＃13;

获取对嵌套在另一个元素

2 个答案:

实施例