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屬性，會把指定節點下的全部子節點也一併替換掉。