2

在DOM操作中,我们如果要获取和修改节点的的文本,就离不开textContentinnerText属性。其中textContent作为标准方法,但无奈要IE8+;而innerText属性最近也被火狐支持了,已经成了不是标准的标准(参考)。也就是说,如果只考虑最新浏览器的话这两个方法都是可以使用的,那他们到底使用时有何不同呢?先上代码:

    <div id="test" class="test">test<div style="display:none"><span>test</span></div><style>hi</style></div> 
    <script type="text/javascript">
        var testDiv = document.getElementById('test');
        console.log(testDiv.textContent);
        console.log(testDiv.innerText);
    </script>

运行上述代码,结果为:

可看到存在两个差异:

  1. textContent会获取style元素里的文本(若有script元素也是这样),而innerText不会

  2. textContent会获取display:none的节点的文本;而innerText好像会感知到节点是否呈现一样,不作返回

也就是说,textContent能够获取元素的所有子节点上的文本,不管这个节点是否呈现;而innerText只返回呈现到页面上的文本。

当然,除了获取文本,这两个元素也可以设置元素的文本内容,不过要注意设置文本时被替换的可不只是文本了;这时,两个属性作用相当于innerHTML属性,会把指定节点下的所有子节点也一并替换掉。


Levon
526 声望89 粉丝

大自然爱好者