DOMParse()手动解析DOM树

一、研究背景

在我们写前端时，可能需要去获取DOM文档里面的纯文本。这里给大家介绍一个浏览器API，我们都知道浏览器在渲染时，DOM文档会被解析生成DOM树，而此过程它就需要靠DOMParse这个API来完成。

DOMParse的作用，官方文档是这样定义的，DOMParser 可以将存储在字符串中的 XML 或 HTML 源代码解析为一个 DOM Document。

第二部分是运用DOMParse解析DOM文档的具体实践过程。

二、实践操作

在此，我们编写一个函数parseTagContent去解析获取DOM里面的纯文本。首先定义函数parseTagContent，准备一个参数fragment接收含有标签的字符串。使用DOMParser的parseFromString(fragment, mineType)方法需要传两个参数，第一个是DOM字符串，第二位用于确定方法返回的类型。要解析的 DOMString，它必须包含 HTML、xml、xhtml+xml 或 svg 文档。mineType的类型可以是以下内容：

`text/html`	Document
`text/xml`	XMLDocument
`application/xml`	XMLDocument
`application/xhtml+xml`	XMLDocument
`image/svg+xml`

下面是运用DOMParse API的具体代码示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /**
     * 传入一个含有标签的字符串，它会解析该字符串，返回去除标签后的纯文本。
     * @param fragment
     * @returns {string|string}
     */
    function parseTagContent(fragment) {
        return (
            new DOMParser()
                .parseFromString(fragment, 'text/html')
                .body
                .textContent || ''
        )
    }

    var fragment = `<div class="container">
            <h1>
                <title>手动解析DOM</title>
            </h1>
            <div class="content">
            DOMParser 可以将存储在字符串中的 XML 或 HTML 源代码解析为一个 DOM Document。
            相反，你可以使用XMLSerializer 接口执行相反的操作 - 将 DOM 树转换为 XML 或 HTML 源。
            对于 HTML 文档，您还可以通过设置 Element.innerHTML 和outerHTML 属性的值，将部分 DOM 替换为从 HTML 构建的新 DOM 树。还可以读取这些属性以获取对应于相应 DOM 子树的 HTML 片段。

            </div>
        </div>`

    console.log(parseTagContent(fragment))
</script>
</body>
</html>

三、实践结果

使用默认浏览器打开实践操作部分新建和编写的程序，就会发现程序已经在控制台获取，并打印了parseTagContent函数解析的DOM字符串的纯文本，效果如下图所示。

四、扩展

当然，你可以使用XMLSerializer 接口执行相反的操作 - 将 DOM 树转换为 XML 或 HTML 源。XMLSerializer接口提供serializeToString() (en-US) 方法来构建一个代表 DOM 树的 XML 字符串，它会返回 DOM 子树序列化后的字符串。使用示例如下：

var s = new XMLSerializer();
var d = document;
var str = s.serializeToString(d);
saveXML(str);

五、参考文献

DOMParser - Web API 接口参考 | MDN (mozilla.org)
5.69 gbA:/ 复制打开抖音，看看【科技可能有关】手动解析DOM树 # JavaScript # 前...