childNode 的 DOM 返回值

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?');
 }
}

我试图匹配S. 的childnode 值当我控制台记录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>