innerText、innerHTML、outerText和outerHTML如何使用

本文小編為大家詳細介紹“innerText、innerHTML、outerText和outerHTML如何使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“innerText、innerHTML、outerText和outerHTML如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

       1．innerText屬性
通過innertText屬性可以操作元素中包含的所有文本內容，無論文本位于子文檔樹中的什么位置。在通過innerText讀取值時，它會按照由淺入深的順序，將子文檔樹中的所有文本拼接起來。以下面的HTML代碼為例：
<div id=" content">
       <p>This is a<strong>paragraph</strong> with a list following it.</p>
       <ul>
       <li>ltem l</li>
       <li>ltem 2</li>
       <li>ltem 3</li>
       </ul>
</div>
       對于這個例子中的<div>元素而言，其innerText屬性會返回下列字符串：
       This is a paragraph with a list following it.
       Item l
       Item 2
       Item 3
       由于不同瀏覽器處理空白符的方式不同，因此輸出的文本可能會也可能不會包含原始HTML代碼中的縮進。
使用innerText屬性設置這個<div>元素的內容，則只需一行代碼：
       div.innerText="Hello world!；
       執行這行代碼后，頁面的HTML代碼就會變成如下所示：
       <div id="content">Hello world!</div>
       可見，設置innerText屬性移除了先前存在的所有子節點，完全改變了DOM子樹。此外，通過設置innerText屬性還可以對所有出現在文本中的HTML語法字符（小于號、大干號、引號及和號）進行編碼。例如，下面的這行代碼：
       div.innerText="Hello＆welcome, <b>"reader"！</b>"；
       運行之后的結果如下：
       < div id=‘’content">Hello &amp; welcome,&lt;b&gt;&quot; reader&quot;！&lt; /b&gt;</div>
       設置innerText永遠只會生成當前節點的一個子文本節點，而為了確保只生成一個子文本節點， 就必須要對文本進行HTML編碼。此外，還可利用innerText屬性過濾掉HTML標簽。方法是將 innerText設置為等于innerText，這樣就可以去掉所有HTML標簽，如下所示：
       div.innerText=div.innerText:
       執行這行代碼的結果就是用原來的文本替換容器元素中的所有內容。IE、Safari、Opera和Chrome支持innerText屬性。Firefox雖然不支持innerText，但支持作用類似的textContent屬性。textContent是DOM3級規定的一個屬性，而且也得到了Safari、Opera 和Chrome的支持。為了確保跨瀏覽器兼容，有必要像下面這樣通過函數來檢測可以使用哪個屬性：
function getInnerText(element){
       return ( typeof element.textContent=="string") ?
              element.textContent : element.innerText:
       }
function setInnerText(element, text){
       if (typeof element.textContent== "string"){
              element.textContent=text:
       } else {
              element.innerText=text:
       }
}
       這兩個函數都接受一個元素，然后檢查這個元素是不是有textContent屬性。如果有，那么type of element．textContent應該是"string"；如果沒有，那么這兩個函數就會改為使用innerText，可以像下面這樣調用這兩個函數：
       setInnerText( div, "Hello worldl“);
       alert( getinnerText (div)); //"Hello world!"
使用這兩個函數可以確保在不同的瀏覽器中使用正確的屬性。
2．innerHTML屬性
       innerHTML與innerText在很多方面都很相似。在讀取信息時，innerHTML返回當前元素所有子節點的HTML表現，包括元素、注釋及文本節點。在寫入信息時，innerHTML會按照指定的值創建新的DOM子樹，并以該子樹替換當前元素的所有子節點。提到innerHTML與innerText之間最 主要的區別，無非就是innerHTML處理的是HTML字符串，而innerText處理的是普通文本字符串。
以下面的HTML代碼為例：
<div id="content">
<p>This is a<strong>paragraph</strong> with a list following it.</p>
       <ul>
              <li>ltem l</li>
              <li>ltem 2</li>
              <li>ltem 3</li>
       </ul>
< /div>
這里面<div>元素的innerHTML屬性將返回下列字符串：
<p>This is a<strong>paragraph</strong> with a list following it.</p>
<ul>
       <li>ltem l</li>
       <li>ltem 2</li>
       <li>ltem 3</li>
</ul>
       在不同瀏覽器中，innerHTML返回的文本可能會有所不同。IE和Opera常常把所有標簽轉換為大寫，而Safari、Chrome和Firefox則以文檔中指定的形式返回HTML-包括空格和縮進。不要指望所有瀏覽器都會返回沒有絲毫差別的innerHTML值。
       在寫入信息時，innerHTML會將給定的字符串解析為DOM子樹，并用這個子樹替換所有的子節 點。由于賦給innerHTML的字符串會被當作HTML，因此其中包含的所有標簽都會按照瀏覽器處理 HTML的標準方式，被轉換成對應的元素（同樣，這個過程也會因瀏覽器而異）。如果像下面這樣， 只設置簡單的文本，那么結果就如同設置innerText -樣：
       div.innerHTML="Hello world!"：
       如果為innerHTML設置的字符串中包含HTML代碼，結果可能就會大不一樣了。區別就在于innerText會轉義HTML語法字符，而innerHTML會解析它們。來看下面的例子：
       div.innerHTML="Hello＆welcome, <b>＼"reader"！</b>"；
       執行這行代碼之后的結果是：
       <div id="content">Hello &amp; welcome, <b>&quot; reader&quot;!</b></div>
       在設置完innerHTML之后，馬上就可以像訪問文檔中的其他節點一樣訪問新生成的節點。
       設置innerHTML會導致瀏覽器將HTML字符串解析為對應的DOM樹。換句話說，設置完innerHTML之后再讀取它，將會得到一個差別很大的字符串。這個字符串不再是原始的
HTML代碼，而是根據原始HTML字符串創建的DOM子樹經過序列化之后的結果。
       innerHTML也有一些限制。首先，在多數瀏覽器中，通過innerHTML插入的<script>元素不會被執行。IE是唯一支持這種操作的瀏覽器，但條件是必須指定defer特性，并且在<script>元素前 面添加微軟所謂的作用域內元素(scoped element)。這是因為<script>元素被認為是作用域外元素 (NoScope element)，包含著在頁面中看不到該元素的意思，就像看不到<style>元素或注釋一樣。在 通過innerHTML插入的字符串中，如果一開始就是作用域外元素，IE會把所有作用域外元素都剝離 掉，也就是說下面這行代碼將無法執行：
div．innerHTML="<script defer>alert(' hi‘)；</scr"+．．ipt>"；//不能執行
       在這里，通過innerHTML插入的字符串以一個作用域外元素開頭，因此整個字符串會變成空字符串。為了確保腳本能夠執行，必須前置一個作用城內元素，例如一個文本節點，或者像<input>這樣的一個沒有結束標簽的元素。例如，下面這幾行代碼都可以正常執行：
       div.innerHTML="．<script defer>alert(’hi’);</scr“+"ipt>"；
       div.innerHTML="<div>&nbsp;</div><script defer>alert(‘hi’)j</scr"+"ipt>"；
       div.innerHTML="<input type= "hidden“><script defer>alert(‘hi‘);</scr'+"ipt>“；
       第一行代碼會導致在<script>元素前插入一個文本節點。事后，為了不影響頁面顯示，可能需要移除這個文本節點。第二行代碼采用的方法類似，只不過使用的是一個包含非換行空格的<div>元素。
       如果僅僅插入一個空的<div>元素，還是不行；必須要包含一點內容，瀏覽器才會創建文本節點。同樣，為了不影響頁面布局恐怕還是得要移除這個節點。第三行代碼使用的是一個隱藏的<input>字段，
也能達到相同的效果。不過，由于隱藏的<input>字段不影響頁面布局，因此這種方式在大多數情況下都是首選。 在多數瀏覽器中，通過innerHTML寫入<style>元素也存在類似的問題。Opera 9及更高版本和 Firefox 2及更高版本支持以直觀的方式通過innerHTML插入<style>元素，例如：
       div.innerHTML=“<style type=＼"text/css">body(background-color: red; )</style>"；
       IE和Safari會忽略這個<style>元素。在IE中，<style>也是一個作用域外元素，因此必須像下面這樣給它前置一個作用域內元素：
       div.innerHTML="_<style type="text/css">body tbackground-color:red;)</style>"；
       div.removeChild( div.firstChild);
       Safari和Chrome則會因為沒有將這個<style>元素添加到<head>元素而繼續忽略它。如果想在所有瀏覽器中都成功插入<style>元素，就必須像下面這樣：
       //針對Opera.Firefox和IE
       div.innerHTML=".<style type="text/css">body {background-color:red; )</style>’’；
       div.removeChild( div.f irstChild);
       //針對Safari和Chrome
       document.getElementsByTagName("head")[O】.appendChild (div.firstChild);
       在將新創建的<style>元素添加到<head>后，Safari和Chrome會應用新樣式。
       并不是所有元素都有innerHTML屬性。不支持innerHTML的元素有：<col>、<colgroup>、<fraIneset>、<head>、<html>、<style>、<table>、<tbody>、<thead>，<tfoot>、<title>和<tr>.
       無論什么時候，如果想用innerHTML·插入來自外界的HTML內容，都應該首先對該FITML進行 一番無害化處理。IE8為此提供了window.toStaticHTML()方法，這個方法接受一個參數，即一個 HTML字符串；返回一個經過無害處理后的版本——從源HTML中刪除了所有腳本節點和事件處理程序特性。下面就是一個例子：
       var text="<a href="#＼‘一onclick="alert(’hi")＼">Click Me</a>"；
       var sanitized=window．toStaticHTML（text）; //僅適用于’IE8
       alert( sanitized); //“<a href=＼"#＼">Click Me</a>"
       這個例子將一個HTML鏈接字符串傳給了toStaticHTML()方法，得到的無害版本中去掉了onclick特性。雖然目前只有IE8原生支持這個方法，但我們還是建議讀者在通過innerHTML插入代碼之前，盡可能先手工檢查一下其中的文本內容。
3．outerText屬性
       除了作用范圍擴大到了包含調用它的節點之外，outerText與innerText基本上沒有多大區別。
       在讀取信息時，outerText與innerText的結果完全一樣。但在寫入信息時，outerText就完全不同了；outerText不只是替換調用它的元素的子節點，而是會替換整個元素（包括子節點）。以下面 這行代碼為例：
       div.outerText="Hello world!";
       這行代碼實際上相當于如下兩行代碼：
       var text=document.createTextNode("Hello world!");
       div.parentNode.replaceChild(text, div);
       本質上，新的文本節點會完全取代調用outerText的元素。此后，該元素就從文檔中被刪除，訪問不到了。
支持outerText屬性的瀏覽器有IE、Safan、Opera和Chrome。由于這個屬性會修改調用它的元素，因此并不常用。我們也建議讀者盡量不要使用這個屬性。
4．outerHTML屬性
       outerHTML之于innerHTML，就如同outerText之于innerText。在讀取信息時，outerHTML會返回調用它的元素的HTML代碼，包括所有子節點。當寫入信息時，outerHTML會用解析給定的 HTML字符串創建的DOM子樹替代調用它的節點。假設有以下HTML代碼：
<div id="content">
       <p>This is a<strong>paragraph</strong> with a list following it.</p>
       <ul>
       <li>ltem l</li>
       <li>ltem 2</li>
       <li>ltem 3</li>
</ul>
</div>
       如果在例子中的<div>元素上調用outerHTML，就會返回與上面相同的HTML代碼（包含<div>）。
       不過，取決于瀏覽器解析和解釋HTML代碼的方式，返回的結果也可能會不大一樣（這些差異與使用 innerHTML時看到的差異相同）。
       使用outerHTML設置值的示例代碼如下：
       div.outerHTML=1’<p>This is a paragraph.</p>"；
       這行代碼與下列DOM代碼執行的操作完全一樣：
       var p=document.createElement("p");
       p.appendChild( document.createTextNode("This is a paragraph."));
       div.parentNode.replaceChild (p. div);
       結果，新創建的<p>元素會取代DOM樹中原來的<div>元素。
       支持outerHTML屬性的瀏覽器有IE.Safari、Opera和Chrome。與outerText屬性類似，也幾 乎沒人使用outerHTML，原因還是這個屬性會修改調用它的元素。建議讀者最好也不要使用它。
5．內存和性能問題
       使用innerText.innerHTML、outerText和outerHTML替換子節點可能會導致瀏覽器的內存 問題，尤其是在IE中。如果被刪除的子樹中的元素設置了事件處理程序或者具有值為JavaScript對象的屬性，就會出現這種問題。假設某個元素有一個事件處理程序（或一個作為屬性的JavaScript對象）， 當使用上述某個屬性將該元素從文檔樹中移除后，元素與事件處理程序之間的綁定依舊存在于內存中。如果這種情況頻繁出現，頁面占用的內存數量就會顯著增加。因此，在使用這4個屬性時，對于 即將移除的元素，最好先手工移除它的所有事件處理程序和JavaScript對象屬性（第12章將進一步討論事件處理程序）。
       使用這幾個屬性仍然還是有好處的，特別是使用innerHTML。一般來說，在插入大量的新HTML 時，使用innerHTML，要比通過多次DOM操作先創建節點再指定它們之間的關系有效率得多。這是因為在設置innerHTML（outerHTML）時，就會創建一個HTML解析器。這個解析器是在瀏覽器級別的代碼（通常是C++編寫的）基礎上運行的，因此要比執行JavaScript快得多。不可避免地，創建和銷毀HTML解析器也會帶來性能損失，所以最好能夠將設置innerHTML或out erHTML的次數控制在合 理的范圍內。例如，下列代碼使用innerHTML創建了很多列表項：
       for (var i=0, len=values.length; i<len; i++){
              ul．innerHTML+="<li>"+values[i]+"</li>“；//不應該這樣做！
       }
       這種每次循環都設置一次innerHTML的做法效率很低。而且，每次循環還要從innerHTML中讀 取一次信息，就意味著每次循環要訪問兩次innerHTML。最好的做法是單獨構建字符串，然后再一次性地將結果字符串賦值給innerHTML，像下面這樣：
       for (var i=0, len=values .length; i<len; i++){
       }
這個例子的效率要高得多，因為它只對innerHTML執行了一次賦值操作。

讀到這里，這篇“innerText、innerHTML、outerText和outerHTML如何使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。