Title

当前位置:文档之家› domparser解析html例子

domparser解析html例子

domparser解析html例子
下面是一个使用DOMParser解析HTML的例子:
```javascript
// HTML字符串
var htmlString = '<div
id="myDiv"><h1>Title</h1><p>Paragraph</p></div>';
// 创建DOMParser对象
var parser = new DOMParser();
// 解析HTML字符串
var doc = parser.parseFromString(htmlString, 'text/html');
// 获取id为myDiv的元素
var myDiv = doc.getElementById('myDiv');
// 获取h1元素的文本内容
var title = myDiv.getElementsByTagName('h1')[0].textContent;
// 获取p元素的文本内容
var paragraph =
myDiv.getElementsByTagName('p')[0].textContent;
// 输出结果
console.log(title); // "Title"
console.log(paragraph); // "Paragraph"
```
在这个例子中,首先我们创建了一个名为`htmlString`的HTML字符串,它包含一个id为`myDiv`的`<div>`元素,其中包含了一个`<h1>`元素和一个`<p>`元素。

然后,我们创建了一个`DOMParser`对象,并使用`parseFromString()`方法将HTML字符串解析为DOM文档。

接下来,我们通过
`getElementById()`方法获取到id为`myDiv`的元素,再通过
`getElementsByTagName()`方法获取到`<h1>`和`<p>`元素,最后使用`textContent`属性获取元素的文本内容。

最后,我们输出了`title`和`paragraph`的内容。

需要注意的是,DOMParser在不同的浏览器中的支持程度可能存在差异,这里的例子是基于最新的标准来编写的。

相关主题