Javascript innerText 细微差别

Question

我想知道 innerText 属性。考虑以下标记:

HTML

<div class="myClass">
    <div>
         <div>foo</div>
   </div>
</div>
<div class="myClass">
    <div>
         <div>bar</div>
    </div>
</div>

然后，让我们运行以下代码:

JS

var a = document.querySelectorAll('div.myClass');
//var a = document.querySelectorAll('div.myClass div div');
for (var i=0; i<a.length; i++){
    console.log(a[i].innerText);
    if (a[i].innerText == "foo"){
        console.log("found");
    }
}

FIDDLE HERE

按原样运行此代码，输出 foo 和空行，然后是 bar。

如果我注释掉脚本的第一行，并取消注释第二行，然后关闭包含文本的 div 的确切级别，则此代码输出 foo, 找到了，bar。

我的问题是:如果在第一次迭代中脚本输出 foo，为什么 a[i].innerText == "foo" 不是 真的？哦，那个空行是从哪里来的？

Answer 1

由于 myClass 内部有 2 个 div，javascript 将它们视为一行“\n”，因此“foo”不等于“foo\n”

但是如果我们这样修改代码:

 if (a[i].innerText == "foo\n"){
        console.log("found");
 }

然后就可以在控制台看到found log了。 http://jsfiddle.net/3149ha75/5/