textContent和innerText属性

在DOM操做中，咱们若是要获取和修改节点的的文本，就离不开textContent或innerText属性。其中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属性，会把指定节点下的全部子节点也一并替换掉。