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

Question

我正在尝试遍历具有特定 class 的元素并为其附加 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) returns 我正确的项目集合：

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

尝试使用

items[i].setAttribute("id", "item_" + i);

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

的文档

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

Fiddle 为：

https://jsfiddle.net/abdulrauf618/n14v58zs

Answer 2

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

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

或：

尝试用 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 3

检查此代码：

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

希望对你有帮助。

Answer 4

使用vanilla js总是在DOM可以使用后做DOM相关操作。并且在 accessing/working 与任何 DOM 元素之前检查它是否可以为 null（不等于 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);
}

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

Index of getElementsByClassName is undefined but not the whole object

javascript

getelementsbyclassname