将DIV子项更改为不显示

Question

HTML

<div id="divID">
<label></label>
<textarea></textarea>
</div>

JavaScript

function invisible(){
let div = document.getElementById("divID");
let children = div.childNodes;
for (let i = 0; i < children.length; i++) {
children[i].style.display = "none";
}
}

调用该函数后，不会发生任何事情。我做错了什么？

Answer 1

您必须将divID设置为div标记。

<div id="divID">
<label></label>
<textarea></textarea>
</div>

然后必须在invisible函数中使用div.children。

function invisible(){
let div = document.getElementById("divID");
let children = div.children;
for (let i = 0; i < children.length; i++) {
children[i].style.display = "none";
}
}

<input type="button" onClick=" invisible()" value="Remove" />
<div id="divID">
<label></label>
<textarea></textarea>
</div>

Answer 2

您可以通过接受其子元素作为第一个参数来提高函数的可重用性。它目前只适用于id为"divID"的元素。

function invisible(parent){
for(const child of parent.children) child.style.display = 'none';
}
invisible(document.querySelector('div'))

<div>
<label>Label</label>
<textarea>Textarea</textarea>
</div>

Answer 3

问题似乎是您使用了childNodes，而不是其他答案所指出的children。

除了其他答案之外，这个答案试图提供更多关于正在发生的事情的背景。

let div = document.getElementById("divID");
console.log(div.childNodes)
// Returns something like
NodeList(5) [text, label, text, textarea, text]
console.log(div.children)
// Returns something like
HTMLCollection(2) [label, textarea]

所以childNodes返回NodeList，children返回HTMLCollection。

mdn上的children定义解释了children和childNodes之间的区别：

Element.children只包括元素节点。要获取所有子节点，包括文本和注释节点等非元素节点，请使用Node.childNodes.

问题是这些text节点没有style属性。因此它返回undefined。尝试访问style上的display属性会导致TypeError。由于第一个元素是text元素，所以循环立即失败，并且label和textarea从不被隐藏。

Answer 4

使用children而不是childNodes:

function invisible(){
let div = document.getElementById("divID");
let children = div.children; //<== children instead of childNodes
for (let i = 0; i < children.length; i++) {
children[i].style.display = "none";
}
}
//just to test after 1.5 sec all children of divID will be removed(display=none)
setTimeout(invisible, 1500)

<div id='divID'>
<label>test1</label>
<textarea>test2</textarea>
</div>