一、控制台创建section后Elements标签页看不到的原因及解决办法 #

首先，最常见的坑是你只在内存里创建了元素，但没把它挂载到DOM树中。比如你只执行了：

document.createElement('section');

这时候元素只是存在于JS内存里，并没有被添加到header或其他DOM节点下，自然在Elements面板里找不到。正确的操作是创建后用appendChild或append把它挂载到目标节点：

// 先获取header元素，再创建并挂载section
const header = document.querySelector('header');
const newSection = document.createElement('section');
// 加个文本内容方便后续查找
newSection.textContent = '我是控制台创建的section';
header.appendChild(newSection);

除此之外还有几种可能的情况：

• 控制台上下文选错了：如果页面包含iframe，控制台默认可能选中了iframe的上下文，这时候你操作的是iframe的DOM而非主页面。可以在控制台顶部的上下文选择器切换到主页面（一般显示为当前页面的URL）。
• 元素被脚本移除或隐藏了：可能你刚创建完section，页面里的其他脚本就立刻把它移除了，或者给它设置了display: none、visibility: hidden这类隐藏样式。可以在创建后加个断点，暂停执行再去Elements里检查：

  const newSection = document.createElement('section');
  document.querySelector('header').appendChild(newSection);
  debugger; // 执行到这里会暂停，此时去Elements里找header下的section
  

• header元素获取失败：比如你用的选择器不对，导致document.querySelector('header')返回null，挂载操作根本没生效。可以先在控制台打印document.querySelector('header')，确认能正确获取到目标元素。

二、更新.js文件并刷新浏览器后，DOM树会变化吗？ #

这完全取决于你的.js文件里有没有包含操作DOM结构的代码：

• 如果你的.js文件里有创建、修改、删除DOM元素的逻辑（比如和你控制台里类似的创建section的代码），那刷新浏览器后，新的JS文件会重新执行，DOM树会按照新代码的逻辑发生变化。
• 如果.js文件里只有数据处理、事件监听（未修改DOM结构）这类逻辑，那DOM树不会因为更新JS文件而产生变化。

另外要注意浏览器缓存问题：有时候浏览器会缓存旧的JS文件，即使你修改了本地文件，普通刷新可能还是加载旧代码。这时候可以用强制刷新（Windows/Linux按Ctrl+F5，Mac按Cmd+Shift+R），或者在开发者工具的Network标签里勾选「Disable cache」（禁用缓存），确保加载的是最新的JS文件。

内容的提问来源于stack exchange，提问作者Tsardines