为什么我的 div 容器中的元素会消失？答案

【问题标题】：Why does the elements inside my div container disappear?为什么我的 div 容器中的元素会消失？
【发布时间】：2021-04-29 18:47:23
【问题描述】：

在处理 div 容器内的元素时，我有一个关于浏览器行为的问题。我有一个 iframe，用于向服务器发出请求以运行 PHP 文件，而父页面保持动态。父页面对子框架的请求决定了当服务器将结果返回给子框架时父页面上的某些元素最终会发生什么。我已经测试了一切，一切正常，除了一个明显的故障。如果有人碰巧在主页面上调用了一个函数，该函数试图读取 div 容器内的元素，而子框架正在对同一 div 容器内的任何元素进行更改，则程序会给出 null 错误。当我使用调试器检查 div 容器的元素时，该特定 div 容器内的所有元素（总共 14 个）都消失了。我确信我可以通过首先查询一个随机元素来查看它是否存在来解决这个问题，如果不存在，一旦子框架与父页面一起完成，稍后再放置一个回调函数。但我很好奇为什么那个特定 div 容器中的所有元素一开始就在那一刻消失了，因为子框架只操作了 div 中的 5 个元素，而父请求正在寻找一个完全不同的未被子框架操作的元素。我是否正确假设对 div 容器内的元素进行更改会强制重写该 div 内的所有元素？文档正文中的所有其他 div 容器元素保持不变，只有一个被更改的 div。这不是确切的代码（太多无法发布），而是一个示例。

// Parent
document.getElementById("heading").innerHTML = "Where did you go?";

// Child Frame
parent.document.getElementById("pic").src = "anotherpic.jpg";

<div id ="something">
  <P id = "heading">blah blah blah</p>
  <img id = "pic" src = "picture.jpg">
  <p id = "picname">Picture Name</p>
</div>

如果 Child 首先运行，并且 Parent 尝试读取元素，而 child 仍在对 div 内的元素进行更改，则当我在调试器中查找所有元素时，所有元素都会消失。对此行为的任何见解都值得赞赏。谢谢。（希望这不是一个愚蠢的问题。哈哈）

【问题讨论】：

您能发布一下您是如何修改父文档的 div 的吗？
对不起。我不可能把它全部贴出来。有 30 个 div 被用作菜单，并且都表现出相同的行为。如果父项尝试在同一时间访问一个元素，子项尝试更改同一个 div 容器中的任何元素，我会收到一个空错误，并且当我在调试器中检查它们时所有元素都消失了。如果 Parent 先访问它们，或者 Child 先访问它们，则一切正常。只要事件同时发生。我正在以与我发布的示例完全相同的方式从 Child 更改 Parent 上的元素。
"我假设对 div 容器内的元素进行更改会强制重写该 div 内的所有元素？" - 这就是 innerHTML 所做的，并且这就是为什么应该避免它。但是，如果您在元素内部进行更改，则它不应影响容器中的其他元素-仅当您设置整个容器的innerHTML时。
谢谢伯吉。是的，我知道innerHTML 会这样做。但它不应该影响 div 中未被查询的其他元素。另外，我不会更改 div 本身的 innerHTML。 div 中只有 1 个元素。问题是所有元素在物理上都丢失了，我没有使用任何创建或删除任何元素的代码。这就是 Parent 出现 null 错误的原因，因为它再也无法从物理上找到该元素。很奇怪。
那么我们需要minimal reproducible example 进行调查，如果没有产生问题的确切代码，我们将无法帮助您解决问题

标签： javascript html css dom browser

【解决方案1】：

请注意，这里没有“同时”之类的东西。 innerHTML 和 getElementById 两者都是同步工作的。

即使您不正确地使用了innerHTML（我知道情况并非如此），例如。覆盖父组件 - 没有您可以使用函数访问的“中间状态”，请注意“时刻”没有元素。所以我会在别处寻找背后的原因。

例如。 iframe 内容每次修改父级两次，第一次使其为空。

【讨论】：

谢谢。我想也许两个脚本之间发生了异步事件。这有助于了解它的行为方式以及要寻找的内容。

【解决方案2】：

您是否尝试过使用： target.addEventListener(type, listener [, options]);

而不是： getElementById ?

看起来有些东西被覆盖了。

【讨论】：

这看起来像是评论，而不是答案