如何遍历HTML
How to traverse HTML
我有一个HTML代码变量:
let htmlDocument = '<div id="buildings-wrapper"> '
<div id="building-info"> '
<h2><span class="field-content">Britney Spears' House</span></h2> '
<div class="building-field"> '
<div class="field-content">9999 Hollywood Blvd</div> '
</div> '
<div class="building-field"> '
<div class="field-content">Building Hours: Mon. 07:00-23:00 Tue.-Fri. 06:30-22:00, Sat. 07:30-18:00, Sun. 12:00-18:00 Holidays - Closed</div> '
</div> '
<div class="building-field"> '
<div class="field-content"><a href="http://www.britneyspears.com">Locate on the stars map</a></div> '
</div> '
</div> '
<div id="building-image"> '
<div class="field-content"><img src="../../../../ssc.adm.britneyspears.com/classroomservices/image/viewimage?userEvent=ShowBuildingImage&buildingID=britneyspears" alt="Image of BritneySpears"></div> '
</div> '
</div>';
我想遍历变量并将这部分HTML存储在一个单独的变量中:
<div class="field-content">9999 Hollywood Blvd</div>
这是我目前为止写的:
public traverseHTML(htmlDocument: any): any {
let htmlBlock: any;
let divs: any = htmlDocument.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
if (divs[i].getAttribute("id") == "field-content") {
htmlBlock = divs[i];
}
}
return htmlBlock;
}
我确信我的函数有各种各样的问题,但我不能得到他们,因为我甚至不能超过第二行。我得到一个错误,说htmlDocument.getElementsByTagName
不是一个函数。如何通过div迭代HTML ?
请注意,由于项目规范,我不能使用JQuery。
编辑:我得到document is not defined
时,我尝试document.createElement('div')
和DOMParser没有定义,当我尝试创建一个DOMParser。我设置的类不正确吗?这是整个类的代码:
import parse5 = require('parse5');
import {ASTNode} from 'parse5';
export default class DSController {
//private parser: DOMParser;
constructor() {
//this.parser = new DOMParser();
}
public traverseHTML(htmlDocument: any): any {
let parser = new DOMParser();
let parsed: any = parser.parseFromString(htmlDocument, "text/html");
let selectParsed: any = parsed.querySelectorAll('field-content')[1];
console.log(selectParsed);
return selectParsed;
/* let element = document.createElement("div");
element.innerHTML = htmlDocument;
console.log(element.querySelectorAll(".field-content")[1]); // <div class="field-content">9999 Hollywood Blvd</div>
*/
}
public parseHTML(): any {
//let document: parse5.ASTNode;
return;
}
}
你可以创建一个元素,然后以html的形式插入这个字符串。
然后,您可以查询此元素以查找所需内容:
let htmlDocument = '<div id="buildings-wrapper"> '
<div id="building-info"> '
<h2><span class="field-content">Britney Spears House</span></h2> '
<div class="building-field"> '
<div class="field-content">9999 Hollywood Blvd</div> '
</div> '
<div class="building-field"> '
<div class="field-content">Building Hours: Mon. 07:00-23:00 Tue.-Fri. 06:30-22:00, Sat. 07:30-18:00, Sun. 12:00-18:00 Holidays - Closed</div> '
</div> '
<div class="building-field"> '
<div class="field-content"><a href="http://www.britneyspears.com">Locate on the stars map</a></div> '
</div> '
</div> '
<div id="building-image"> '
<div class="field-content"><img src="../../../../ssc.adm.britneyspears.com/classroomservices/image/viewimage?userEvent=ShowBuildingImage&buildingID=britneyspears" alt="Image of BritneySpears"></div> '
</div> '
</div>';
let element = document.createElement("div");
element.innerHTML = htmlDocument;
console.log(element.querySelectorAll(".field-content")[1]); // <div class="field-content">9999 Hollywood Blvd</div>
(code in playground)
您也可以使用DOMParser
:
new DOMParser().parseFromString(htmlDocument, "text/html")
.querySelectorAll('.field_content)[1]
相关文章:
- JS/jquery:我将如何遍历HTML中的每个图像
- jQuery-数据提取问题(html遍历)
- 循环遍历图像数组并将其显示到HTML页面
- 遍历HTML结构以搜索属性
- 使用jquery循环遍历html页面的所有锚点标记
- JS/jQuery遍历HTML元素以动态构建字符串
- Java 脚本:递归地遍历关联的 HTML 文件的 Dom,并打印遇到的元素类型
- 遍历 html 单元格并在满足条件时执行函数
- 使用 javascript/jquery 遍历包含 HTML 的字符串中的所有标记
- 如何在 JavaScript 中循环遍历 HTML 行并在满足条件时更改背景
- 循环遍历 HTML 内容并将值作为全局变量返回
- 我可以使用 html() 保存动态表单而不是遍历 INPUT 吗?
- Javascript:仅遍历HTML DOM元素
- 遍历 html 模板中的数组字段
- Postorder 使用 JavaScript 或 jQuery 遍历树以创建 HTML 代码
- 遍历对象数组的 json 对象,信任一个键的值作为 Angular 中的 HTML
- 循环遍历 JSON 数据以生成 HTML
- 循环遍历 JSON 中的嵌套数组值,将这些值附加到生成的 html 中
- 使用jQuery遍历HTML
- jQuery通过$(this)遍历HTML