Javascript 如何遍历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&amp;buildingID=britneyspears" alt="Image of BritneySpears"></div> \
        </div> \
        </div>';

---

您可以创建一个元素，然后将此字符串作为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&amp;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>

让htmlDocument='1\
\
布兰妮之家酒店\
\
好莱坞大道9999号\
\
\
建筑时间：周一。星期二至五7:00-23:00。周六06:30-22:00，周日07:30-18:00。12:00-18:00节假日-休息\
\
\
\
\
\
\
\
\
';
let element=document.createElement（“div”）；
element.innerHTML=htmlDocument；
console.log（element.querySelectorAll（“.field content”）[1]）；//好莱坞大道9999号

---

（）

您可以创建一个元素，然后将此字符串作为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&amp;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>

让htmlDocument='1\
\
布兰妮之家酒店\
\
好莱坞大道9999号\
\
\
建筑时间：周一。星期二至五7:00-23:00。周六06:30-22:00，周日07:30-18:00。12:00-18:00节假日-休息\
\
\
\
\
\
\
\
\
';
let element=document.createElement（“div”）；
element.innerHTML=htmlDocument；
console.log（element.querySelectorAll（“.field content”）[1]）；//好莱坞大道9999号

---

（）

您也可以使用

DOMParser

：

new DOMParser().parseFromString(htmlDocument, "text/html")
  .querySelectorAll('.field_content)[1]

---

您还可以使用

DOMParser

：

new DOMParser().parseFromString(htmlDocument, "text/html")
  .querySelectorAll('.field_content)[1]

---

---

你不能穿过一根绳子。你只能在实际情况下做这件事DOM@NitzanTomer哦（如果我的项目文件夹中有一个名为BRITNEYSPEARS的文件，其中包含上述HTML代码，我将如何引用它以便遍历它？“项目规范”如果你向你的客户/老板解释做这样的事情需要多少小时，你可以用正确的工具在几分钟内解决这些问题，那么阻止你使用jquery的因素几乎肯定会消失。当然，除非你的客户喜欢付钱给人来改造轮子。@Paul这是给学校的，所以不管这个项目做什么很遗憾，脚本说的是goes。@Azamantes到目前为止，我还不知道多行字符串的反勾号！您不能遍历字符串。您只能在实际的DOM@NitzanTomerOh.：（如果我的项目文件夹中有一个名为BRITNEYSPEARS的文件，其中包含上面的HTML代码，我将如何引用它以便遍历它？“项目的规格"如果你向你的客户/老板解释做这样的事情需要多少小时，你可以用正确的工具在几分钟内解决这些问题，那么阻止你使用jquery的因素几乎肯定会消失。当然，除非你的客户喜欢付钱给人来改造轮子。@Paul这是给学校的，所以不管这个项目做什么很遗憾，脚本说的是goes。@Azamantes到目前为止我还不知道多行字符串的反勾号！谢谢。这正是我需要的。我需要导入一些东西才能使

文档

工作吗？我的IDE说

引用错误：文档未定义

。不，应该不需要导入任何东西来使用

文档

。这是要在浏览器或节点上运行吗？我不知道你说的节点是什么意思。该应用程序是用于浏览器的。我的目的是使用此方法获取更大的HTML部分，然后将其解析为数据结构，以便在浏览器中查询。我可能给了你一些不相关的信息，但最好是过度关注……你应该能够编译e此代码没有任何其他内容可导入。因为它在我发布的游乐场链接中工作。您使用的IDE是什么？是的，我看到该文档是标准的

lib.d.ts

的一部分。我使用的是Webstorm。谢谢。这正是我需要的。我是否需要导入一些内容以使

文档

工作？我的IDE显示

引用错误：文档未定义。

。不，应该不需要导入任何内容来使用

文档。

。这是在浏览器或节点上运行的吗？我不确定节点是什么意思。该应用程序用于浏览器。我的目的是使用此方法获取更大的HTML部分，然后将其解析为数据结构，以便在浏览器。我可能给了你一些不相关的信息，但最好是过度共享…你应该能够编译此代码，而无需导入任何其他内容。因为它在我发布的游乐场链接中工作。你使用的是什么IDE？是的，我看到该文档是标准的

lib.d.ts

的一部分。我正在使用Webstorm。我试图创建一个DOMAN解析器d得到了

dompasseris未定义的
。你能看看我在OP中的编辑，看看是否有什么问题吗？是因为我使用的是node.js吗？谢谢。对于node.js，你需要某种DOM库。他们建议使用parse5。我想我有点困惑，因为我以为我应该遍历HTML然后解析它…但我应该解析吗然后整个HTML文件将遍历它？您混淆了“解析”和“提取”。“解析”指的是根据某种语法（如HTML）分析字符串，并生成可处理的表示（如DOM）。完成此操作后，只有这样，您才能“提取”表示法中的一些内容，例如您感兴趣的
div
元素。谢谢，这真的很有帮助。我一整天都在尝试提取然后解析。D:我试图创建一个DOMParser，但得到的
DOMParseris未定义
。您能看看我在OP中的编辑，看看它是否有任何错误吗？是因为我使用的是node.js？谢谢。对于node.js，您需要某种DOM库。他们建议使用parse5。我想我被弄糊涂了，因为我以为我应该遍历HTML然后再解析它…但是我应该解析整个HTML文件然后再遍历它吗？您混淆了“解析”和“提取”。“解析”指根据某种语法（如HTML）分析字符串并生成可处理的表示（如DOM）。当您这样做后，只有这样，您才能从表示中“提取”某些内容，如
div
new DOMParser().parseFromString(htmlDocument, "text/html")
  .querySelectorAll('.field_content)[1]