Question

我需要使用javascript访问html文件中的元素，它们的名称类似于arr_1，arr_2，arr_3，我希望使用循环动态创建id然后访问他们喜欢以下：

for(var i=0; i< 10; i++) {
  var id = "arr_" + i;

  $document.getElementById('id')....

}

但它不起作用。我记得有一个功能允许我这样做，任何人都知道那是什么？

Answer 1

您不需要document之前的美元符号，并且您应该将id变量传递给getElementById函数，而不是包含'id'的字符串：

for(var i=0; i< 10; i++) {
  var id = "arr_" + i;
  var element = document.getElementById(id);
  // work with element
}

您可能还想在操作之前检查getElementById是否真正找到了您的元素，以避免运行时错误：

if (element) {
  element.style.color = '#ff0000';
}

Answer 2

for (var i = 0; i < 10; i++) {
  var obj = document.getElementById("arr_" + i);
  obj.style.border = "1px solid red";
}

Answer 3

变化

$document.getElementById('id')

到

$document.getElementById(id)

Answer 4

自从发布此问题并使用document.getElementById(id)多次正确回答以来，另一个竞争者进入竞争querySelector，该竞争者接受任何有效的CSS选择器并返回第一个匹配的元素。

请注意，由于querySelector使用CSS选择器，因此选择ID时需要在ID前面加上#。

for(var i=0; i< 10; i++) {
  // Added the # here in the id variable.
  var id = "#arr_" + i;
  // assuming $document is a reference to window.document in the browser...
  var element = $document.querySelector(id);
  if (element) {
    // do something with element
  }
}

getElementById is typically faster than querySelector（在某些浏览器中是两倍），这很有意义，因为它不必调用CSS子系统来查找元素。

但是，该选项存在，并且如果回答问题不彻底，堆栈溢出也算不了什么。

如何访问id为variable的元素

4 个答案: