大量使用innerHTML注入后如何访问DOM

Question

我有一些代码看起来像这样：

//create a long string of html, which includes a div with id="mydiv"
someElement.innerHTML = s; //s is the string above
document.getElementById('mydiv')

现在，我设置了innerHTML后，浏览器需要一段时间来实际呈现包含id="mydiv"的DOM。那么，javascript会坐等dom被正确呈现后再继续执行innerHTML注入之后的操作，还是会立即调用getElementById，但此时该id的DOM可能尚未创建，从而导致不安全性问题？

- Joda Maki

---

http://www.javascriptkit.com/dhtmltutors/domready.shtml - Eric Fortis

按照Patrick所说的去做并尝试一下。我期望它能够正常工作。 - Hemlock

Answer 1

这里有一个示例，使用 innerHTML 将近 12,000 个元素插入到 DOM 中，然后调用 getElementById() 来查找具有 ID 的最后一个元素。

它成功地找到了该元素。

示例： http://jsfiddle.net/fzUUU/

- user113716

Answer 2

innerHTML没有标准。因此，任何事情都可以发生，包括未被实现（我认为Opera曾经玩过这个）。这只是由Microsoft在IE中引入的一个hack。

然而，以任何与IE不同的方式实现innerHTML都会破坏网页上的许多内容。因此，浏览器制造商被迫按照IE的方式来实现它。以下是IE的工作原理：当innerHTML运行时，脚本解释器停止。也就是说，innerHTML会阻塞，直到DOM完全解析完毕。

因此，在所有当前浏览器中，直接访问DOM应该是安全的，而且由于网络上需要它的页面数量很多，在可预见的未来也应该是如此。

额外回答：

似乎HTML5规范指定了innerHTML：http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0 它基本上描述了IE已经做的事情。应该注意的是，它并没有明确说明操作是阻塞还是非阻塞的，但正如前面提到的，非阻塞实现将破坏网页上的许多内容。

- slebetman