Javascript GetElementsByCassName的索引未定义，但不是整个对象_Javascript_Getelementsbyclassname

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

javascript

Javascript GetElementsByCassName的索引未定义，但不是整个对象,javascript,getelementsbyclassname,Javascript,Getelementsbyclassname,我试图循环使用特定类的元素，并给它们附加一个ID var items = document.getElementsByClassName("item"); for(var i = 0; i < items.length; i++) { items[i].id = "item_" + i; } console.log(items); 但是，当我尝试获取index console.logessentials[0]时，它是未定义的 HTML: 试用 items[i].setAttri

我试图循环使用特定类的元素，并给它们附加一个ID

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

console.log(items);

但是，当我尝试获取index console.logessentials[0]时，它是未定义的

HTML:

试用

items[i].setAttributeid，item_Ui

有关更多详细信息，请访问的文档

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

摆弄它：

https://jsfiddle.net/abdulrauf618/n14v58zs

问题可能是在DOM完全就绪之前脚本正在运行

为了解决这个问题，您可以将代码放在正文的底部

或：

尝试用包装代码，这将确保在DOM完全就绪后执行代码

document.AddEventListenerDomainContentLoaded，functionevent{ var items=document.getElementsByClassNameitem； forvar i=0；i

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

希望对您有所帮助。

使用vanilla js时，请务必在DOM准备好使用后执行与DOM相关的操作。此外，在访问/使用任何DOM元素之前，请检查它是否不可为null或不等于null。通过这些实践，您不会看到DOM元素有任何错误，因为这是处理DOM元素的安全方法。在常规循环中，始终缓存array.length。避免使用匿名函数，这是一种非未来证明且不利于调试的方法。还可以在单独的js文件中写入所有js。 HTML

请共享您的htmli在fiddle中尝试了您的代码，它正在按预期工作确保在运行JS@MangoD:检查我的答案，它会对你有用的。你做到了，谢谢！但是，我无法访问项目索引的原因是什么？尽管如我的问题中所述，我可以console.logitems并获得正确的输出。

https://jsfiddle.net/abdulrauf618/n14v58zs

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

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

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