DOM вернул значение для childNode

Question

Вот HTML:

<ul class="drum">
 <li>A<span>span text A</span></li>
 <li>S<span>span text S</span></li>
 <li>D<span>span text D</span></li>
</ul>

Вот JS:

let ul = document.querySelectorAll('.drum li');
let ulLen = ul.length;
let arr = [];  
for(var i=0; i<ulLen; i++) {
 if(ul[i].childNodes[0] === '\"S\"') {
  console.log('why is this not returning?');
 }
}

Я пытаюсь сопоставить значение childnode S. Когда я console.logul[i].childNodes[0] Я вижу возвращаемое значение как "S", но я просто не понимаю, почему условие if не выполняется.Что мне не хватает?Я также пробовал свойство firstChild, но все еще не могу выполнить условие.

Answer 1

Вы сравниваете Node со строкой, вы должны получить текстовое содержимое узла, а затем выполнить сравнение.Также удалите двойные кавычки.

let ul = document.querySelectorAll('.drum li');
let ulLen = ul.length;
let arr = [];  
for(var i=0; i<ulLen; i++) {
 if(ul[i].childNodes[0].textContent === 'S') {
  console.log('why is this not returning?');
 }
}

<ul class="drum">
 <li>A<span>span text A</span></li>
 <li>S<span>span text S</span></li>
 <li>D<span>span text D</span></li>
</ul>