将 DIV 子项更改为无显示答案

【问题标题】：Change DIV children to display none将 DIV 子项更改为无显示
【发布时间】：2021-09-04 14:11:21
【问题描述】：

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

调用函数后没有任何反应。我做错了什么？

【问题讨论】：

标签： javascript styles display

【解决方案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>

【讨论】：

我的 div 有一个 ID。我忘了将它添加到示例中。那不是问题。我编辑了示例。
好的，其他的是div.children。请运行我的代码并查看结果。效果很好
div.children 不起作用。我按照 MDN 示例使用了 div.childNodes。
@cat15ets 我编辑我的代码以便更好地理解。我添加remove button。请运行代码并按remove button
好的，一切正常！我也有一个错字。主要问题是childNodes。我用孩子替换了 childNodes，纠正了一个错字，一切正常。谢谢！

【解决方案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>

【讨论】：

是的，问题出在 childNodes 上。 node.children 有效，node.childNodes 无效。我接受了上面的答案，因为它是第一个，但这也有效，看起来不错

【解决方案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。

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

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

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

【讨论】：

【解决方案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>

【讨论】：