Добавить класс в div, содержащий строку innerHTML - PullRequest
Новая
       10

Добавить класс в div, содержащий строку innerHTML

0 голосов
/ 19 декабря 2018

Я пытаюсь добавить класс CSS к каждому div на странице, содержащей строку Subject:

Я пытался 

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?

1 Ответ

0 голосов
/ 19 декабря 2018

Ваш подход в порядке, но так как вас интересует содержание элемента, используйте .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>
...