Javascript 如何对导入的JSON对象进行DOM遍历？

有一个JSON对象：

    // ./data/articles.js

    export default [
      {
        html: `
          <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, luctu.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Praesent libero. Praesent libero. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, luctu.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, luctu.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Praesent libero. Praesent libero. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, luctu.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Praesent libero. Praesent libero. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, luctu.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, luctu.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Praesent libero. Praesent libero. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, luctu.</p>

          </article>`,
        blacklist: [],
      }

/./data/articles.js
导出默认值[
{
html:`
Lorem ipsum dolor sit amet，Concerteptur Adipising Elite.Integer nec odio.Praesent libero.Sed cursus ante dapibus diam.Sed nisi.Nullas quis sem在nibh elementum imperdiet.Duis sagittis ipsum.Praesent mauris.Fusce nec nullus Sed augue semper porta.mauris massa.门厅lacinia arcu eget A.一级适应社会的taciti每一个诺斯特拉科努比亚，每一个希梅纳奥斯的接受者。自由女神圣像。拉齐尼亚·努克圣像。托托圣像。佩伦斯克·尼布。埃尼安·夸姆。在多洛的权杖扫描电镜中。马塞纳斯·马蒂斯。塞德·康瓦利斯·特里斯蒂克扫描电镜。塞德·康瓦利斯·特里斯蒂克扫描电镜。塞德·康瓦利斯·伊格斯塔斯·埃格斯塔斯·波特托尔。莫比·莱克·莱克斯、伊库利斯·维尔、卢克图

Lorem ipsum dolor sit amet，Concertetur Adipsicing Elite.Integer nec odio.Praesent libero.Praesent libero.Praesent libero.Praesent libero.Sed cursus ante dapibus diam.Sed nisi.Nulla quis sem在nibh elementum imperdiet.Duis sagittis ipsum.Praesent mauris.Fuce nec nec tellus semper porta.mauris mauris massa.门廊lacinia arcuet NULA.根据燃烧室himenaeos.libero中的Curatiur sodales ligula.Sed GransimLacinia nunc.Curatiur tortor.PelentequeNibh.Aenean quam.在Door的scelerisque sem.Maesenas mattis.Sed Convalis tristique sem.Proin ut ligula vel nunc egestas porttitor.Morbi lectus r伊苏斯，亚库利斯维尔，卢克图

Lorem ipsum dolor sit amet，Concerteptur Adipising Elite.Integer nec odio.Praesent libero.Sed cursus ante dapibus diam.Sed nisi.Nullas quis sem在nibh elementum imperdiet.Duis sagittis ipsum.Praesent mauris.Fusce nec nullus Sed augue semper porta.mauris massa.门厅lacinia arcu eget A.一级适应社会的taciti每一个诺斯特拉科努比亚，每一个希梅纳奥斯的接受者。自由女神圣像。拉齐尼亚·努克圣像。托托圣像。佩伦斯克·尼布。埃尼安·夸姆。在多洛的权杖扫描电镜中。马塞纳斯·马蒂斯。塞德·康瓦利斯·特里斯蒂克扫描电镜。塞德·康瓦利斯·特里斯蒂克扫描电镜。塞德·康瓦利斯·伊格斯塔斯·埃格斯塔斯·波特托尔。莫比·莱克·莱克斯、伊库利斯·维尔、卢克图

Lorem ipsum dolor sit amet，Concertetur Adipsicing Elite.Integer nec odio.Praesent libero.Praesent libero.Praesent libero.Praesent libero.Sed cursus ante dapibus diam.Sed nisi.Nulla quis sem在nibh elementum imperdiet.Duis sagittis ipsum.Praesent mauris.Fuce nec nec tellus semper porta.mauris mauris massa.门廊lacinia arcu这是一个很好的例子。它是一个很好的例子。它是一个很好的例子。它是一个很好的例子。它是一个很好的例子伊苏斯，亚库利斯维尔，卢克图

Lorem ipsum dolor sit amet，Concertetur Adipsicing Elite.Integer nec odio.Praesent libero.Praesent libero.Praesent libero.Praesent libero.Sed cursus ante dapibus diam.Sed nisi.Nulla quis sem在nibh elementum imperdiet.Duis sagittis ipsum.Praesent mauris.Fuce nec nec tellus semper porta.mauris mauris massa.门廊lacinia arcu这是一个很好的例子。它是一个很好的例子。它是一个很好的例子。它是一个很好的例子。它是一个很好的例子伊苏斯，亚库利斯维尔，卢克图

Lorem ipsum dolor sit amet，Concerteptur Adipising Elite.Integer nec odio.Praesent libero.Sed cursus ante dapibus diam.Sed nisi.Nullas quis sem在nibh elementum imperdiet.Duis sagittis ipsum.Praesent mauris.Fusce nec nullus Sed augue semper porta.mauris massa.门厅lacinia arcu eget A.一级适应社会的taciti每一个诺斯特拉科努比亚，每一个希梅纳奥斯的接受者。自由女神圣像。拉齐尼亚·努克圣像。托托圣像。佩伦斯克·尼布。埃尼安·夸姆。在多洛的权杖扫描电镜中。马塞纳斯·马蒂斯。塞德·康瓦利斯·特里斯蒂克扫描电镜。塞德·康瓦利斯·特里斯蒂克扫描电镜。塞德·康瓦利斯·伊格斯塔斯·埃格斯塔斯·波特托尔。莫比·莱克·莱克斯、伊库利斯·维尔、卢克图

Lorem ipsum dolor sit amet，Concertetur Adipsicing Elite.Integer nec odio.Praesent libero.Praesent libero.Praesent libero.Praesent libero.Sed cursus ante dapibus diam.Sed nisi.Nulla quis sem在nibh elementum imperdiet.Duis sagittis ipsum.Praesent mauris.Fuce nec nec tellus semper porta.mauris mauris massa.门廊lacinia arcu这是一个很好的例子。它是一个很好的例子。它是一个很好的例子。它是一个很好的例子。它是一个很好的例子伊苏斯，亚库利斯维尔，卢克图

`,
黑名单：[]，
}

导入到函数表达式中：

import article from './data/articles.js';

export default function injectMidContentAds(article) {
  var div = `<div class="ad"></div>`;

  // 400 word check << My question is within this block
  var items = document.querySelectorAll('article > *');
  var words = 0;
  var elementWith400th = null;
  for (var i = 0; i < items.length; i++) {
    words += items[i].innerText.split(' ').length;
    if (words >= 400) {
      elementWith400th = items[i];
      break;
    }
  }
  // Ad injection
  if (elementWith400th != null && !isBlacklisted && !imgNextSibling) {
    insertAfter(elementWith400th, div);
  }

  return article.html;
}

从“/data/articles.js”导入文章；
导出默认函数injectMidContentAds（文章）{
var div=`；
//400字检查=400）{
第400个元素=项目[i]；
打破
}
}
//Ad注入
if（elementWith400！=null&&！被列入黑名单&&！imgNextSibling）{
后面插入（第400节的元素）；
}
return article.html；
}

---

在400字的检查中，它只遍历

文章

，找到第400个单词。我应该如何编辑我的函数以进入JSON对象，然后像DOM元素一样遍历它？

您可能需要使用

DOMParser

来确保您可以访问

innerText

和其他常规DOM API方法

var htmlString = article.html;
var articleElement = (new DOMParser())
  .parseFromString(htmlString, "text/html")
  .querySelector("article")