Question

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

现在我不得不在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中遇到过这个。

提前致谢。

Answer 1

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

不，它没有。在innerHTML=通话结束后，您可以依靠其中的元素。查看this jsbin我花费1秒钟使用<li>添加innerHTML元素，并使用.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

Answer 2

如果你在讨论domReady中的onload事件，那么这个事件只会被触发一次在页面生命周期中，当文档由浏览者整个加载时，要观察您需要添加的特定元素并更改＆＃39;听取这些要素。

Answer 3

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

执行通过
window.setTimout(func, 0);

访问动态创建内容的代码部分

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

DOM加载和纯HTML附加

3 个答案: