javascript - 从节点对象获取ElementById

Question

我有一个类似于以下的 html 代码:

<div id="abc">
    <div class="class1">some data</div>
    <div class="class2">
        <input type="number" id="row1-id1" />
        <input type=number" id="row1-id2" />
    </div>
    <div class="class2">
        <input type="number" id="row2-id1" />
        <input type=number" id="row2-id2" />
    </div>
</div>

我想读取所有输入标签并从中创建一个列表。输入标记需要位于类 class2 的 div 内，而该类又应位于 #abc 下。我编写了以下代码来阅读它们。

var rows = document.getElementById('abc').getElementsByClassName('class2');
for (var i=0;i<rows.length;i++) {
    var id1 = rows[i].getElementById('row'+(i+1)+'-id1);
    var id2 = rows[i].getElementById('row'+(i+1)+'-id2);
    .......
    .......
}

现在，当我尝试执行上述操作时，我收到一条错误消息，提示“getElementById 不是函数”。

如何访问节点内具有特定 ID 的元素？

Answer 1

首先修复代码中的错误。 html 中缺少 2 个 "，javascript 中缺少 2 个 '。

其次，然后使用querySelector，例如:rows[i].querySelector('#row' + (i + 1) + '-id1')。那么你的代码就可以正常工作了。

演示

var rows = document.getElementById('abc').getElementsByClassName('class2');
for (var i = 0; i < rows.length; i++) {
  var id1 = rows[i].querySelector('#row' + (i + 1) + '-id1');
  var id2 = rows[i].querySelector('#row' + (i + 1) + '-id2');
  console.log(id1)
}

<div id="abc">
  <div class="class1">some data</div>
  <div class="class2">
    <input type="number" id="row1-id1" />
    <input type="number" id="row1-id2" />
  </div>
  <div class="class2">
    <input type="number" id="row2-id1" />
    <input type="number" id="row2-id2" />
  </div>
</div>

请注意，由于 Id 应该是唯一的，因此您始终可以使用 var id1 = document.getElementById('row' + (i + 1) + '-id1');