JavaScript 内置对象DOMParser 的使用详解

18 min read

DOMParser是JavaScript内置对象，用于解析XML或HTML字符串并生成一个文档对象模型（DOM）。它提供了一种将字符串转换为可操作的DOM对象的方法。

使用DOMParser的一般步骤如下：

  1. 创建DOMParser对象：可以使用new DOMParser()语法创建一个DOMParser对象。
var parser = new DOMParser();
  1. 使用parseFromString()方法解析字符串：parseFromString()方法接受两个参数，第一个参数是要解析的字符串，第二个参数是解析的内容类型，一般为"text/xml"或"text/html"。
var xmlString = "<book><title>JavaScript Guide</title></book>";
var xmlDoc = parser.parseFromString(xmlString, "text/xml");
  1. 处理生成的文档对象模型（DOM）：解析成功后，可以像处理其他DOM对象一样使用生成的文档对象模型。
var titleElement = xmlDoc.getElementsByTagName("title")[0];
console.log(titleElement.textContent); // 输出："JavaScript Guide"

注意事项：

  • 在解析XML字符串时，确保XML字符串以有效的XML格式开头，否则可能会导致解析失败。同样的，解析HTML字符串时，确保HTML字符串以有效的HTML格式开头。
  • 解析失败时，parseFromString()方法会返回一个错误的文档对象模型（DOM），通过检查返回的文档对象模型的documentElement属性是否为null，可以确定解析是否成功。
var xmlDoc = parser.parseFromString("<invalid>", "text/xml");
if (xmlDoc.documentElement === null) {
  console.log("解析失败");
}

这是DOMParser的基本用法，可以通过DOMParser生成的文档对象模型进行更多的操作，例如查询和修改节点等。