Question

我从Axios的服务中获取数据。然后，从页面上的Reducer中获取它。我正在邀请在函数中放入Redux的数据。我正在使用DangerouslySetInnerHtml解析String 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并打印H2

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>

Answer 2

通过以下方式将节点列表转换为数组：

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

Answer 3

我解决了这个问题。在功能上

var detailText = this.props.state.blog.detail;
var parser = new DOMParser();
  var htmlDoc = parser.parseFromString(detailText, "text/html");
  var h2s = htmlDoc.getElementsByTagName("h2");
  let items = [];
  for (var i = 0; i < h2s.length; i++) {
    items.push(h2s[i].innerText);
  }
  return items.map((row, i) => {
    return (
      <li key={i}>
        <a href="#">{row}</a>
      </li>
    );
  });

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

3 个答案: