Javascript document.getElementsByClassName（'；name'；）的长度为0

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

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

这是怎么回事

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标记时，我看到某种角度的代码正在加载到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

编辑。“删除”按钮用于新的待办事项。每次用户单击add以发布新项目时，都会调用此函数

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

函数渲染图（项目）{
//在呈现todo项之前，请清除列表中的现有项
var list=document.getElementById（'todo-list'）；
while（list.hasChildNodes（））{
list.removeChild（list.lastChild）；
}
//循环浏览项目
对于（变量i=0；i

长度是

0

，因为运行它时，没有类为

的元素删除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);

}

函数渲染图（项目）{
var list=document.getElementById（'todo-list'）；
而（list.hasChildNodes（））{/*…*/}
对于（var i=0；i

请显示您的html。“某种角度代码正在加载到头部的脚本标记中……我没有在我的应用程序中使用角度代码”，您是否在jsbin或JSFIDLE等网站上运行“应用程序”？我没有在jsbin或JSFIDLE上运行我的应用程序。仅使用NodeJS/expression在本地服务器上运行它，我在代码中没有看到类为

remove btn

的元素