DOM 加载和纯 HTML 附加答案

【问题标题】：DOM loading and plain HTML appendingDOM 加载和纯 HTML 附加
【发布时间】：2013-12-04 17:10:19
【问题描述】：

通常，当我确定页面的 DOM 已完全加载（99% 的情况是初始化代码）后，我想执行一些代码时，我会使用 domReady() 函数（jQuery 或手工制作的函数）。

现在我必须在 DIV 元素中添加一些 HTML 模板，但之后我需要获取一些添加到其中的元素并对其进行操作（更改文本、附加事件、设置验证消息和掩码等）。 )。

div.innerHTML += htmlTemplate; // Template which has the "someInput" input
var someInput = document.getElementById('someInput');

问题是：假设 input 已加载到 DOM 中是否安全？将 HTML 附加到 DIV 后，是否必须将依赖于新 DOM 元素的代码作为回调发送到 domReady 函数？

div.innerHTML += htmlTemplate;
domReady(function(){
    var someInput = document.getElementById('someInput');
    // ...
});

从技术上讲...每次向元素添加纯 HTML 时，DOM 是否会进入loading state？

-- 编辑

这是我正在使用的 domReady() 函数：

function domReady(f) {
    /in/.test(document.readyState) ? setTimeout('domReady('+f+')', 9) : f();
}

PS：我需要一个简单/简短/不依赖 api 的函数，所以我前段时间在 SE 遇到了这个。

提前致谢。

【问题讨论】：

DOM 事件 'load' 仅在第一次加载时触发一次。更多信息：w3.org/TR/DOM-Level-3-Events/#event-type-load
其实我目前的“domReady()”函数是依赖于文档的readystate...我将其添加到问题中。
看Event developer guide MDN
我不明白...我是否必须向要添加 HTML 的 DIV 添加“就绪”事件处理程序？
像这样 (innerHTML += more_stuff;) 附加 HTML 会导致浏览器重新解析 all 受影响容器的内容。这不是最有效的做法。

标签： javascript html dom

【解决方案1】：

每次向元素添加纯 HTML 时，DOM 是否进入加载状态？

不，它没有。您可以指望innerHTML= 呼叫结束后的元素。查看this jsbin，我花了1 秒时间使用innerHTML 添加<li> 元素，并每次使用.querySelectorAll 检查前面的元素是否存在。

设置element.innerHTML 是同步的：浏览器停止它正在做的任何事情以相应地更新 DOM（这并不意味着页面在视觉上更新，如我链接到的示例所示），并且控制不'在完成之前不要返回您的代码。

分离的 DOM 节点中的操作示例：

var tempDiv = document.createElement("div");
tempDiv.innerHTML = getTemplateSomehow();

// Manipulate a button inside the template,
// even though it is not in the DOM yet
var button = tempDiv.querySelector("button");
button.style.color = "red";
button.addEventListener("click", function() {
  alert("button clicked");
});

// Append all children from the parsed template into the DOM
var child;
var target = document.body;

// Keep moving tempDiv's children to the target until it is empty
while(child = tempDiv.firstChild) {
  target.appendChild(child);
}

工作示例：http://jsbin.com/isuLeMi/1/edit

【讨论】：

谢谢！在哪里可以找到element.innerHTML 附加在 DOM 加载方面同步的确认（文档）？
我已尝试明确查找此语句，但找不到任何文档。但是，我认为它在 API 中是隐含的，因为没有可以附加到修改的事件或回调
我很担心，因为我附加的模板可能很大，如果我依赖未加载的元素，可能会发生奇怪的事情。那么，您对如何测试这个有想法吗？
也许您可以尝试类似于我的测试，但使用更大的模板...作为替代方案，您可能希望在分离的 DOM 节点上进行操作，以帮助浏览器执行更多操作表现。您能否为您的问题添加之后需要进行何种转换的示例？
你只需要把倒数第二行的document.body改成你的div

【解决方案2】：

如果你在谈论 domReady 中的 onload 事件，那么这个事件只会触发一次在浏览器完全加载文档时的页面生命周期中，要观察特定元素，您需要向这些元素添加“更改”侦听器。

【讨论】：

"当用户提交对元素值的更改时，会为、元素触发更改事件。与输入事件不同，更改事件是不一定会因元素值的每次更改而被触发。” <a href="/default/index/tourl?u=aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvUmVmZXJlbmNlL0V2ZW50cy9jaGFuZ2U%3D" rel="nofollow" target="_blank">change MDN</a>
抱歉，我不明白它如何适用于这种情况。

【解决方案3】：

问题是，当 javascript 运行时，浏览器会停止执行任何操作。这意味着当您添加一个 ID 为“示例”的 div 时，您无法在添加它的同一事件中访问它。
但是（在我看来）有一个干净的解决方法：

执行通过
window.setTimout(func, 0);访问动态创建内容的部分代码

这允许浏览器执行其他操作（如渲染、dom 编辑等），并在浏览器完成工作队列后执行访问它的代码。

【讨论】：