JavaScript 字符串动态创建 DOM 对象：利用 innerHTML 实现高效转换

JavaScript 字符串动态创建 DOM 对象：利用 innerHTML 实现高效转换

在 JavaScript 中，动态创建标准 DOM 对象通常采用以下方法：

var obj = document.createElement('div');

随后，为 obj 对象设置所需的各项属性。

然而，在实际开发中，开发者往往希望有一种更便捷的方式，能够直接通过字符串创建标准的 DOM 对象。

伪代码示意如下：var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>');

本文旨在演示如何实现这样一个方法，将字符串直接转换为标准的 DOM 对象。

实现这一转换其实非常简单，核心在于利用 innerHTML 属性。

相信大家都使用过 innerHTML，特别是在动态向元素插入内容时。这里简要介绍 innerHTML，以便不熟悉该属性的读者了解。

innerHTML 并非 W3C 标准，而是由 Internet Explorer 首创。但由于其便利性以及当时 IE 的市场主导地位，其他非 IE 浏览器也内置了 innerHTML 并提供了支持。

尽管 innerHTML 不是 W3C 标准，但它已成为事实标准。这一事实标准至关重要，因为目前主流浏览器均支持 innerHTML，从而实现了跨浏览器的兼容性。

代码示例如下：

 
parseDom 函数实现function parseDom(arg) {
var objE = document.createElement("div");
objE.innerHTML = arg;
return objE.childNodes;
}; 

短短几行代码便实现了转换功能。我们首先使用标准方法创建一个 div 元素，然后利用 innerHTML 插入目标元素。这实际上是借助浏览器内部的解析算法来完成转换，最后通过 childNodes 返回结果。

这样，我们就完成了从字符串到标准 DOM 对象的转换。通过巧妙利用浏览器自身的算法，可以用简单少量的代码完成大量复杂的转换工作。我们无需手动解析字符串，而是交由浏览器处理，这样既准确又无误。

使用方法如下：

 
parseDom 使用示例var obj=parseDom('<div id="div_1" class="div1">Hello World!</div>');
var obj=parseDom('<div id="div_1" class="div1">Hello World!</div><span>多个也没关系</span>');

注意事项：

childNodes 返回的是一个类似数组的列表（list）。因此，如果只转换了一个元素，需要使用该 DOM 对象时，应通过 obj[0] 访问。如果是多个同级 DOM 对象的转换，可以分别通过 obj[0]、obj[1] 等方式访问。

结束。

至此介绍完毕。在此向大家推荐一个我自己编写的 JS 框架，上述方法已集成在该框架中。

使用方法：b$.parseDom('<div id="div_1" class="div1">Hello World!</div>')

bBank 开源 Javascript 框架