📌  相关文章
📜  如何从 DOMParser 获取所有 HTML 内容，不包括外部 body 标签？(1)

📅  最后修改于: 2023-12-03 14:51:45.208000             🧑  作者: Mango

从 DOMParser 获取所有 HTML 内容，不包括外部 body 标签

在处理 HTML 文档时，有时我们需要从 DOMParser 获取所有的 HTML 内容，但并不包括外部的 body 标签。这个过程可以通过以下步骤实现：

  1. 实例化 DOMParser 对象：

    const parser = new DOMParser();

  2. 使用 DOMParser 的 parseFromString 方法解析 HTML 字符串：

    const htmlString = "<html><body><div>Hello World</div></body></html>";
const doc = parser.parseFromString(htmlString, "text/html");

  3. 获取解析后的文档对象的根元素 <html>：

    const htmlElement = doc.documentElement;

  4. 获取根元素的子节点，即外部 body 标签：

    const bodyElement = htmlElement.firstElementChild;

  5. 创建一个空白的文档对象并将根元素的子节点依次添加到新文档对象中：

    const newDoc = document.implementation.createDocument("", "", null);
newDoc.appendChild(newDoc.importNode(bodyElement, true));

  6. 使用 XMLSerializer 对象将新文档对象序列化为 HTML 字符串：

    const serializer = new XMLSerializer();
const newHtmlString = serializer.serializeToString(newDoc);

最后，newHtmlString 就是从 DOMParser 获取的所有 HTML 内容，不包括外部的 body 标签。

注意：以上代码片段中所使用的 document 对象是指当前页面的文档对象。