innerText和textContent的區別

LFE發表於2018-08-16

innerText和textContent的作用都是獲取元素之間的文字內容，但是他們的表現確是不同的，如下：

區別

1、innerText的值依賴於瀏覽器的顯示，textContent依賴於程式碼的顯示,如下程式碼：

<div id="container">
    <span>666</span>
    <span>999</span>
</div>
<script>
    var oDiv=document.getElementById('container');
    console.log(oDiv.innerText,oDiv.textContent);
</script>

輸出結果：
innerText:666 999

textContent:
        666
        999
複製程式碼

在瀏覽器中顯示的實際是666 999，處於同一行內，但是在程式碼中他們卻不是同一行。

2、如果一個元素之間包含了script標籤或者style標籤，innerText是獲取不到這兩個元素之間的文字的，而textContent可以，如下程式碼：

<div id="container">
    <script>var a=666;</script>
    <span>666</span>
    <span>999</span>
</div>
<script>
    var oDiv=document.getElementById('container');
    console.log(oDiv.innerText,oDiv.textContent);
</script>   
輸出結果：
innerText:666 999

textContent:
    var a=666;
    666
    999   
複製程式碼

其實這個區別是由第一個區別引申而來的，在瀏覽器中自然是不會在螢幕中輸出script和style標籤之間的內容，而innerText的值依賴於瀏覽器的顯示，所以仍然是666 999。

3、textContent會把空標籤解析成換行（幾個空標籤就是幾行），innerText只會把block元素型別的空標籤解析換行，並且如果是多個的話仍看成是一個，而inline型別的原素則解析成空格，如下程式碼：

<div id="container">
    666
    <span></span>
    <span></span>
    999
</div>
<script>
    var oDiv=document.getElementById('container');
    console.log(oDiv.innerText,oDiv.textContent);
</script>
輸出結果：
innerText:666 999

textContent:
    666
    
    
    999
複製程式碼

其實這個區別還是由第一點引申而來的。

4、innerText的設定會引發瀏覽器的迴流操作，而textContent則不一定會

innerText和textContent兩個屬性並非html5的規範屬性，他是各個瀏覽器廠商自己實現的，那麼也就是說有些瀏覽器實現了innerText，有些瀏覽器實現了textContent，有些瀏覽器兩個屬性都有實現，因此書寫的時候就要考慮到相容性判斷了，那麼正確的寫法最好是這樣的：

if(el.textContent){
    el.textContent='666';
}else{
    el.innerText='666';
}
複製程式碼

那麼為什麼這樣寫更好呢，這就是這個區別所在了，innerText的操作一定會引起瀏覽器迴流，那麼是比較耗效能的。雖說textContent並非一定不會觸發迴流，但他也是在特定情況下（所賦值的內容超出了容器尺寸，影響到了頁面整體佈局）才會觸發迴流，一般只是觸發瀏覽器的重繪。

5、innerText對IE相容性較好（IE6+），textContent則相容IE9+

抹平區別

如果想讓他們表現的一直呢，改如何去做？可以使用css控制，如下程式碼：

#container{
    white-space: pre;
}
複製程式碼

相關文章