JavaScript选择HTML容器元素为何包含所有子元素？设置容器display属性后子元素自动显示的原理是什么？

哈哈，这个问题问得特别到位，其实核心是HTML的DOM结构逻辑和CSS display属性的渲染规则在起作用，我给你一步步讲明白：

一、为什么选中容器元素会包含所有子元素？ #

HTML页面在浏览器中会被解析成一个DOM树，每个元素都是树里的一个节点——你代码里的.create-note div是父节点，里面的<h1>、<textarea>、<button>都是它的子节点。

当你用querySelector、getElementById这类方法选中父元素时，你拿到的是这个父元素对应的DOM对象，这个对象天生就携带着它所有子元素的关联信息（你可以通过element.children、element.childNodes这些属性直接访问子元素）。这就好比你选中了电脑里的一个文件夹，这个文件夹本身就包含了里面所有文件的索引，DOM的设计就是这样，父节点和子节点是天然绑定的层级关系。

二、为什么设置容器的display属性后，子元素会自动显示？ #

这就要说到CSS display: none的作用逻辑了：

• 当你给一个元素设置display: none时，浏览器会把这个元素从渲染树中完全移除，不仅这个元素本身不显示，它下面所有的子元素也会跟着被移除出渲染树——相当于整个容器“消失”了，里面的内容自然也看不到。
• 反过来，当你把容器的display改成block（或者其他非none的值），这个容器会重新被加入到渲染树中，它的所有子元素也会跟着被浏览器渲染出来。因为子元素的渲染依赖于父元素的存在，只要父元素处于可见状态（不是none），子元素默认都会正常显示（除非子元素自己被单独设置了display: none或者其他隐藏属性）。

结合你的代码来看：
一开始.create-note被设为display: none，整个容器和里面的标题、文本框、按钮都被隐藏。当你通过JS选中这个容器，把它的display改成block，容器重新出现在页面上，里面的所有子元素自然就跟着显示了，完全不需要你逐个去设置子元素的样式。

你的代码示例 #

JavaScript代码

let add_btn = document.querySelector('.add');
let container = document.querySelector('.container');
let createNote = document.querySelector('.create-note');
let close = document.querySelector('.close-btn');

add_btn.addEventListener('click', () => {
  createNote.style.display = 'block';
})

CSS代码

.create-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

HTML代码

<div class="create-note">
  <h1 class='heading'>New Note</h1>
  <textarea name="" id="" placeholder="Enter your note..."></textarea>
  <button class='create-btn'>Create Note</button>
  <button class='close-btn'>Close</button>
</div>

备注：内容来源于stack exchange，提问作者user28930912