Question

我正在尝试遍历具有特定类的元素，并为其添加ID。

var items = document.getElementsByClassName("item");
for(var i = 0; i < items.length; i++)
{
    items[i].id = "item_" + i;
}

console.log(items);

如果我跑步，则会收到错误Cannot set property 'id' of undefined

但是console.log(items)向我返回了正确的项目集合：

HTMLCollection []
    0: div.item
    1: div.item
    length: 2
    __proto__: HTMLCollection

但是，一旦我尝试获取索引console.log(testimonials[0])，它就是undefined。

HTML：

<div class="slider">
   <div class="item">
       Item 1
   </div>
</div>
<div class="slider">
   <div class="item">
       Item 2
   </div>
</div>

Answer 1

问题可能是您的脚本在DOM完全准备就绪之前正在运行。

要解决此问题，您可以将代码放在 body 的底部。

或：

尝试用DOMContentLoaded包装代码，这将确保在DOM完全准备就绪后即可执行您的代码。

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var items = document.getElementsByClassName("item");
    for(var i = 0; i < items.length; i++)
    {
      items[i].id = "item_" + i;
    }

    console.log(items);
  });
</script>


<div class="slider">
   <div class="item">
       Item 1
   </div>
</div>
<div class="slider">
   <div class="item">
       Item 2
   </div>
</div>

Answer 2

对于香草js，在DOM准备就绪后，总是会执行与DOM相关的操作。并且在访问/使用任何DOM元素之前，请检查该元素是否不可为空（不等于null）。通过这些实践，您不会看到DOM元素出现任何错误，因为这是处理DOM元素的安全方法。在常规循环中，始终缓存array.length。避免使用匿名函数，它是非未来证明且不是调试友好的方法。还要将所有js写入单独的js文件中。 HTML

<div class="slider">
   <div class="item">
       Item 1
   </div>
</div>
<div class="slider">
   <div class="item">
       Item 2
   </div>
</div>

JS

document.addEventListener("DOMContentLoaded", onDomReadyHandler);

function onDomReadyHandler(event) {
    var items = document.getElementsByClassName('item');
    var itemsLen = items.length;

    for(var i = 0; i < itemsLen; i++) {
      items[i].id = "item_" + i;
    }

    console.log(items);
}

Answer 3

尝试使用

items [i] .setAttribute（“ id”，“ item_” + i）;

有关更多详细信息，您可以访问

的文档。

https://www.w3schools.com/jsref/met_element_setattribute.asp
https://www.w3schools.com/jsref/met_element_getattribute.asp

为此提琴：

https://jsfiddle.net/abdulrauf618/n14v58zs

Answer 4

检查此代码：

<html>
    <head>
        <script>
        window.onload = function(e){ 
            var allItem = document.getElementsByClassName("item");
            for(var i = 0; i < allItem.length; i++)
            {
                document.getElementsByClassName("item")[i].setAttribute("id", "item_" + i);                
            }
        };
        </script>    
    </head>
    <body>
        <div class="slider">
            <div class="item" id="">
                Item 1
            </div>
        </div>
        <div class="slider">
            <div class="item" id="">
                Item 2
            </div>
        </div>

    </body>
</html>

希望它对您有帮助。

getElementsByClassName的索引未定义，但不是整个对象

4 个答案: