javascript - document.getElementsByClassName ('name' ) 的长度为 0

Question

我尝试使用 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 开发工具中，当我查看 head 标签时，我发现某种 Angular 代码正在 head 的脚本标签中加载，而内容应该在我的 head 标签中的内容正在加载到 body 中。我的应用程序没有使用 Angular。

编辑。这是我的 HTML。这是 Jade 中的:

布局.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);
}
}

Answer 1

长度为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);

}