javascript - 使用 DangerouslySetInnerHtml 呈现的 html 代码中的标签搜索问题

Question

我使用 Axios 从服务获取数据。然后我从页面上的 Reducer 中取出它。我正在邀请我在一个函数中投入 Redux 的数据。我正在使用 DangerouslySetInnerHtml 解析字符串 HTML 代码。我想在生成的html中调用h2标签。使用 getElementsByTagName，我以 HTMLCollection 的形式获取数据。但是我不能在 forEach 循环中使用 HTMLCollection。

//code in page 
<div
  className="article-content"
  dangerouslySetInnerHTML={{ __html: detail !== undefined && detail.content }}
/>

函数加载的地方

<div>{this._renderSideBar()}</div>

函数

var article = document.getElementsByClassName("article-content");
var h2s = article[0]
  .getElementsByClassName("article-detail")[0]
  .getElementsByClassName("article-content")[0]
  .getElementsByTagName("h2");

console.log(h2s) // HTMLCollection 5 result

for(var i = 0; i < h2s.length; i++;){
   // not working
   console.log(h2s[i]);
}

我想在这里设置一个循环，但我不能将 HTMLCollection 用作数组

Answer 1

我试过你的代码，稍微修改一下就可以了。检查下面。它遍历 HTMLCollection 并打印 H2s

var article = document.getElementsByClassName("article-content");
var h2s = article[0]
  .getElementsByClassName("article-detail")[0]
  .getElementsByClassName("article-content")[0]
  .getElementsByTagName("h2");

for(var i = 0; i < h2s.length; i++){
   console.log(h2s[i]);
}

<div class="article-content">
<div class="article-detail">
  <div class="article-content">
    <h2>H2 1</h2>
    <h2>H2 2</h2>
    <h2>H2 3</h2>
    <h2>H2 4</h2>
    <h2>H2 5</h2>
  </div>
</div>
</div>