将 DIV children 更改为显示 none

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

使用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>

Answer 4

正如其他答案所指出的那样，问题似乎出在您对 childNodes instead of 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]

所以childNodesreturns一个NodeList and children returns an HTMLCollection.

The definition children on mdn解释children和childNodes的区别：

Element.children includes only element nodes. To get all child nodes, including non-element nodes like text and comment nodes, use Node.childNodes.

问题是这些 text 个节点没有 style 属性。所以它returnsundefined。尝试在 style 上访问 display 属性然后导致 TypeError。由于第一个元素是 text 元素，循环立即失败并且 label 和 textarea 永远不会被隐藏。

将 DIV children 更改为显示 none

Change DIV children to display none

javascript

styles

display