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，found， bar。

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

Answer 1

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

但是，如果我们改变代码：

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

然后你可以在控制台中看到找到的日志。 http://jsfiddle.net/3149ha75/5/

Answer 2

作为Halil Bilgin答案的替代方案，您可以trim内部文字删除\n

在此示例中，我使用了jQuery.trim()：

for (var i=0; i<a.length; i++){
    console.log(a[i].innerText);
    if (jQuery.trim(a[i].innerText) == "foo"){
        $("pre").text("found:"+a[i].innerText);
        console.log("found");
    }
}

http://jsfiddle.net/82L9g868/2/

Javascript innerText细微差别

2 个答案: