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.log时ul[i].childNodes[0]我可以看到返回值是“S”但我只是不明白为什么if条件不满意。我错过了什么？我也尝试了firstChild属性，但仍然不能满足条件。

Answer 1

您正在将节点与字符串进行比较，您必须获取节点的文本内容然后进行比较。另外，删除双引号。

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>