盘点HTML字符串转DOM的各种方法及细节

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9835

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

HTML字符串转DOM方法有好几个，这里盘点下各个方法的优缺点，以及关于DOM的其他一些细节。

一、方法盘点

1. innerHTML

let html = '文本元素';
let placeholder = document.createElement('div');
placeholder.innerHTML = html;
let nodes = placeholder.childNodes;

其中 nodes 包含了所有的节点信息。

2. insertAdjacentHTML

let html = '元素';
let placeholder = document.createElement('div');
placeholder.insertAdjacentHTML('afterbegin', html);
// 如果HTML是单个闭合HTML标签，可以直接使用firstElementChild直接返回
let node = placeholder.firstElementChild;

insertAdjacentHTML 方法可以指定HTML字符插入的位置，支持4个方位，特性盘点参见下表：

3. DOMParser

使用示意：

nodes = new DOMParser().parseFromString(html, 'text/html').body.childNodes;

DOMParser() 可以解析HTML字符串，不仅普通HTML字符串，传统的XML字符串，SVG字符串都可以解析。我们还可以使用 DOMParser() 方法反转义HTML标签，详见这篇文章“ 巧用DOM API实现HTML字符的转义和反转义 ”。

DOMParser的相关特性如下表所示：

' 就无法解析出

4. Range

此方法使用示意：

elements = document.createRange().createContextualFragment(html).children;

这里使用了chidlren属性示意，可以返回HTMLCollection，元素合集，忽略文本。

特性如下：

//zxx: 如果你看到这段文字，说明你现在访问是体验糟糕的垃圾盗版网站，你可以访问原文获得很好的体验：https://www.zhangxinxu.com/wordpress/?p=9835（作者张鑫旭）

二、DOM转换合法性的处理

上面的DOM转换方法，对于一些特殊的标签，尤其是表格相关的元素，直接使用可能是无效的。

例如下面的：

let placeholder = document.createElement('div');
placeholder.innerHTML = `zhangxinxu.com`;
console.log(placeholder.firstElementChild);    // 结果是 null

div元素中插入tr标签相关的HTML字符串，这段HTML会认为是不合法的，从而不会转换为tr元素。

此时需要通过创建 table 元素来返回，例如：

let placeholder = document.createElement('tbody');
placeholder.innerHTML = `zhangxinxu.com`;
console.log(placeholder.firstElementChild);    // 结果是 tr 元素

上面这段代码运行效果如下截图所示：

createContextualFragment

createContextualFragment 方法也是类似的处理，需要指定 tbody 元素作为Range区域上下文。

代码示意：

let tbody = document.createElement(`tbody`);
let range = document.createRange();
range.selectNodeContents(tbody);
console.log(range.createContextualFragment(`zhangxinxu`).firstChild);

运行效果如下截图所示：

template

还有一种方法不需要考虑上下文，即可实现任意标签HTML元素的DOM转换，这个元素就是HTML5 元素。

JavaScript代码使用示意：

let template = document.createElement('template');
template.innerHTML = `禁止公众号转载`;
console.log(template.content.lastChild);

同样可以返回

元素虽然好使，但是兼容性不足，IE浏览器不支持，关于该元素更多信息可以参考我多年前写的这篇文章“ HTML5 标签元素简介 ”。

三、关于HTML字符串中JS的执行

createContextualFragment 方法会执行内联的script js代码，为了安全起见，这个方法尽量不要使用，避免被攻击，除非当前的需求就是希望里面的JS代码一起支持。

而其他的innerHTML方法、或者insertAdjacentHTML方法都不用担心JS会被支持，例如：

let placeholder = document.createElement('div');
placeholder.innerHTML = `
alert('鑫空间');
`;
let node = placeholder.firstElementChild;

document.body.appendChild(node); // 不会有alert提示

但是，使用HTML属性设置的JS代码是会运行的，例如：

let placeholder = document.createElement('div');
placeholder.innerHTML = ``;
let node = placeholder.firstElementChild;

document.body.appendChild(node);

上面的代码在Chrome浏览器下就会执行 alert(1) ，其他类似的属性还有 onload ，例如上面代码onerror换成onload，src改成正常的URL地址，在Chrome控制台跑一下，就会看到代码执行了。

我自己就测了下，截图如下：

因此，在进行HTML字符串转DOM时候，记得过滤onload和onerror属性，尤其是第3方的HTML字符串，一定要注意安全，防止XSS攻击。

四、关于转换的性能

测试数据源自这里： jsPerf benchmark ，下面是结果：

1. Range.createContextualFragment() — winner (Firefox浏览器中最快)
2. Element.insertAdjacentHTML() —  winner
3. Element.innerHTML — winner
4. DOMParser.parseFromString() — 90% slower

结论是DOMParser方法性能最差。

不过上面的测试结果对我们日常开发影响不大，因为通常的HTML解析都是很轻量的，性能这块没有本质区别。除非是，那种几百K的HTML或者上M兆的SVG文件的解析。

五、总结和结语

innerHTML方法最朴实无华，性价比最高，如果不考虑IE浏览器，直接使用template元素再innerHTML，任意HTML标签元素都可以转换成DOM。

注意安全，防止XSS攻击。

DOMParser方法性能稍差，不过非大规模应用场景不能作为技术选型的考量因素。

以上就是本文全部内容，希望可以对大家的学习有所帮助。

欢迎转发、欢迎分享、也欢迎补充相关知识点，比心感谢。