Question

我正在尝试向包含字符串div的页面上的每个Subject:添加CSS类

我尝试了

var elList = document.querySelectorAll("div");
elList.forEach(function(el) {
  if (el.innerHTML.indexOf("Subject") !== -1) {
    console.log(el);
    el.setAttribute('class', "newClass");
  }
});

，但是没有返回任何节点。还有

var headings = document.evaluate("//*[contains(normalize-space(text()), 'Subject:')]", document, null, XPathResult.ANY_TYPE, null );
while(thisHeading = headings.iterateNext()){
  thisHeading.setAttribute('class', "newClass");
  console.log(thisHeading);
}

返回了一个XPathResult，该对象似乎没有任何节点作为对象的一部分。

这是HTML的外观，尽管它深深地嵌套在文档主体中。

<div class="note-stream-header">Subject: Please Reply to This</div>

如何选择所有包含字符串的节点并使用JS向其添加类？

Answer 1

您的方法很好，但是由于您对元素的内容感兴趣，因此请使用.textContent而不是innerHTML。

在线查看其他评论。

// .forEach is not supported in all browsers on node lists
// Convert them to arrays first to be safe:
var elList = Array.prototype.slice.call(
    document.querySelectorAll("div"));
    
elList.forEach(function(el) {
  // Use .textContent when you aren't interested in HTML
  if (el.textContent.indexOf("Subject") > -1) {
    console.log(el);
    el.classList.add("newClass");  // Use the .classList API (easier)
  }
});

.newClass { background-color:#ff0; }

<div>The subject of this discussion is JavaScript</div>
<div>The topic of this discussion is JavaScript</div>
<div>The queen's royal subjects weren't amused.</div>
<div>Subject: textContent DOM property</div>

将类添加到包含innerHTML字符串的div中

1 个答案: