document.getElementsByClassName('name'）的长度为0

document.getElementsByClassName('name') has a length of 0

本文关键字：name getElementsByClassName document      更新时间：2023-09-26

我正试图通过使用方法getElementsByClassName(无jQuery(按类名检索所有元素。Console.log显示元素的数组，但当我试图获取数组的长度时，它返回0。

看到前面的一篇文章也有类似的问题，该文章提供了确保元素存在的解决方案。我考虑到了这一点，并在DOMcreation之后启动了函数。

这是怎么回事？

document.addEventListener("DOMContentLoaded", function(){
    // Load current todo items from db
    loadTodoItems();
    var submitBtn = document.getElementById('submit-btn');
    submitBtn.addEventListener('click', addItem);
    var removeButton = document.getElementsByClassName("remove-btn");
    console.log(removeButton);
    console.log(removeButton.length);

}, false)

另一个需要注意的问题是，我注意到在chrome Dev Tools中，当我查看head标记时，我看到一些角度代码正在head的脚本标记中加载，而应该在head标记中的内容正在body中加载。我的应用程序没有使用angular。

编辑。这是我的HTML。它在翡翠：

Layout.jade：

doctype html
html(lang='en')
head
   meta(charset="utf-8")
   title To Do List
   link(rel="stylesheet" href="main.css")
body
    block content
    script(src="main.js")

index.jade：扩展布局

block content
    div.container
        h1 Get-Er-Done! 
        form#todo-form(role="form" method="POST" action="/todo")
            div.form-group
                label(for="addToDo") Add To-Do item:
                input#todoItemText.form-control(type="text")
                button(type="submit")#submit-btn.btn.btn-default Add
        ul#todo-list

编辑。删除按钮用于新的待办事项。每当用户单击"添加"以发布新项目时，都会调用此操作。

function renderItems(items){
// Before rendering todo-items, clear the existing items in the list
var list = document.getElementById('todo-list');
while(list.hasChildNodes()){
    list.removeChild(list.lastChild);
}
// Loop through items
for (var i = 0; i < items.length; i++) {
    var el = document.createElement("li");
    var removeBtn = document.createElement('button');
    var btnText = document.createTextNode('Done');
    removeBtn.appendChild(btnText);
    removeBtn.className = 'remove-btn';
    var newItemText = document.createTextNode(items[i].item);
    el.appendChild(newItemText); // Add new content to new div
    el.appendChild(removeBtn);

    // To-Do list to append to 
    list.appendChild(el);
}
}

Length是0，因为当您运行它时，没有remove-btn类的元素。您可以在控制台中看到这些项目，因为getElementsByClassName返回一个活动的HTMLCollection，当添加新元素时会更新它。

问题是在renderItems中使用该类创建元素，该类在运行getElementsByClassName之后运行。

你可以使用来修复它

function renderItems(items){
    var list = document.getElementById('todo-list');
    while(list.hasChildNodes()){/* ... */}
    for (var i = 0; i < items.length; i++) {/* ... */}

    // Load current todo items from db
    loadTodoItems();
    var submitBtn = document.getElementById('submit-btn');
    submitBtn.addEventListener('click', addItem);
    var removeButton = document.getElementsByClassName("remove-btn");
    console.log(removeButton);
    console.log(removeButton.length);
}
相关文章：