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>

我想读取所有输入标记并从中创建一个列表。输入标记需要位于div的{{1}}范围内，而class2依次应位于#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')。那么你的代码工作正常。

<强>演示

＆＃13;

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)
}

＆＃13;

<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>

＆＃13;

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

来自节点对象的GetElementById

1 个答案: