document.getElementsByClassName（'名'）的长度为0 [英] document.getElementsByClassName('name') has a length of 0
问题描述
我试图使用方法getElementsByClassName（无jQuery的）来检索类名的所有元素。 CONSOLE.LOG显示元素的阵列，但是当我试图让数组的长度，则返回0。
看到了previous后与规定，确保该元件存在的解决方案类似的问题。我把这个考虑在内，火DOMcreation后的功能。
这是怎么回事？
document.addEventListener（DOMContentLoaded功能（）{
//将当前数据库的待办事项
loadTodoItems（）; VAR submitBtn =的document.getElementById（'提交-BTN'）;
submitBtn.addEventListener（'点击'的addItem）; VAR removeButton = document.getElementsByClassName（删除-BTN）;
的console.log（removeButton）;
的console.log（removeButton.length）;
}，FALSE）
另外要注意的问题是，我注意到，在Chrome开发工具，当我看着头标记，我看到了某种角度code的被加载在脚本标签的头部，而这应该是在我的脑海标签内容被加载在体内。我不使用的角度为我的应用程序。
编辑。这是我的HTML。它是在玉：
Layout.jade：
DOCTYPE HTML
HTML（LANG =EN）
头
元（字符集=utf-8）
标题待办事项
链接（相对=样式的href =的main.css）身体
块内容
脚本（SRC =main.js）
index.jade：
扩展布局
块内容
div.container
获得H1-ER-完成！ 形式＃TODO形式（角色=形式的方法=POSTACTION =/ TODO）
div.form组
标签（=addToDo）添加的任务项目：
输入＃todoItemText.form控制（类型=文本）
按钮（TYPE =提交）＃提交 - btn.btn.btn默认添加 UL＃待办事项列表
编辑。删除按钮是新待办事项。这就是所谓的每次用户点击添加后新项目的时间。
函数renderItems（项目）{
//之前渲染的todo项，清除列表中的现有项目
VAR列表=的document.getElementById（'待办事项列表'）;
而（list.hasChildNodes（））{
list.removeChild（list.lastChild）;
}//循环项目
对于（VAR I = 0; I＆LT; items.length;我++）{
VAR EL =使用document.createElement（礼）; VAR removeBtn =使用document.createElement（'按钮'）;
VAR btnText = document.createTextNode（'完成'）;
removeBtn.appendChild（btnText）;
removeBtn.className ='删除-BTN'; VAR newItemText = document.createTextNode（项目[I] .item）;
el.appendChild（newItemText）; //添加新的内容新的div
el.appendChild（removeBtn）;
//待办事项列表追加到
list.appendChild（EL）;
}
}
长度为 0 ，因为当你运行它有一个与类没有元素删除-btn 。你可以看到项目的控制台，因为 getElementsByClassName 返回现场的HTMLCollection ，在添加新的元素被更新。
问题是，你创建 renderItems 与类的元素，它运行 getElementsByClassName 后运行。
您可以使用修复它
函数renderItems（项目）{
VAR列表=的document.getElementById（'待办事项列表'）;
而（list.hasChildNodes（））{/ * ... * /}
对于（VAR I = 0; I＆LT; items.length;我++）{/ * ... * /}
//将当前数据库的待办事项
loadTodoItems（）; VAR submitBtn =的document.getElementById（'提交-BTN'）;
submitBtn.addEventListener（'点击'的addItem）; VAR removeButton = document.getElementsByClassName（删除-BTN）;
的console.log（removeButton）;
的console.log（removeButton.length）;}
I'm trying to retrieve all the elements by class name by using the method getElementsByClassName (no jQuery). Console.log shows the array of the elements, but when I try to get the length of the array, it returns 0.
Saw a previous post with a similar problem that provided a solution of making sure that the element exists. I took this into consideration and fire the function after DOMcreation.
What is going on here?
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)
Another issue to note, is that I am noticing that in chrome Dev Tools when I look at the head tag, I'm seeing that some sort of angular code is being loaded in a script tag in the head, while the content that should be in my head tag are being loaded in the body. I am not using angular for my app.
Edit. Here is my HTML. It is in Jade:
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: extends layout
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
Edit. The remove button is for the new todo item. This is called every time the user clicks add to post the new item.
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 is 0 because when you run it there's no element with class remove-btn. You can see the items in the console because getElementsByClassName returns a live HTMLCollection, which is updated when new elements are added.
The problem is that you create the elements with that class in renderItems, which runs after you run getElementsByClassName.
You can fix it using
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);
}
这篇关于document.getElementsByClassName（'名'）的长度为0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
