天天色综合社区,多人爱爱视频,涩涩爱视频

在JavaScript中對文字編輯也是經常，通常標簽不復雜性況下，我們也可以直接對標簽內的容進行讀取和修改操作，介于兼容性不是很理想前提下，我們先來了解下相關的方法及其他瀏覽器中替代的方法，結合實例讓大家快掌握及投入到實際工作中。
? ? ? ?1．innerText屬性
通過innertText屬性可以操作元素中包含的所有文本內容，無論文本位于子文檔樹中的什么位置。在通過innerText讀取值時，它會按照由淺入深的順序，將子文檔樹中的所有文本拼接起來。以下面的HTML代碼為例：

? ? ? ?

This is aparagraph with a list following it.

? ? ? ?

ltem l

ltem 2

ltem 3

? ? ? ?對于這個例子中的

元素而言，其innerText屬性會返回下列字符串：
? ? ? ?This is a paragraph with a list following it.
? ? ? ?Item l
? ? ? ?Item 2
? ? ? ?Item 3
? ? ? ?由于不同瀏覽器處理空白符的方式不同，因此輸出的文本可能會也可能不會包含原始HTML代碼中的縮進。
使用innerText屬性設置這個

元素的內容，則只需一行代碼：
? ? ? ?div.innerText="Hello world!；
? ? ? ?執行這行代碼后，頁面的HTML代碼就會變成如下所示：
? ? ? ?

Hello world!

? ? ? ?可見，設置innerText屬性移除了先前存在的所有子節點，完全改變了DOM子樹。此外，通過設置innerText屬性還可以對所有出現在文本中的HTML語法字符（小于號、大干號、引號及和號）進行編碼。例如，下面的這行代碼：
? ? ? ?div.innerText="Hello＆welcome, "reader"！"；
? ? ? ?運行之后的結果如下：
? ? ? ?< div id=‘’content">Hello & welcome,<b>" reader"！< /b>

? ? ? ?設置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代碼為例：

This is aparagraph with a list following it.

? ? ? ?

ltem l

ltem 2

ltem 3

< /div>
這里面

元素的innerHTML屬性將返回下列字符串：

This is aparagraph with a list following it.

ltem l

ltem 2

ltem 3

? ? ? ?在不同瀏覽器中，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, ＼"reader"！"；
? ? ? ?執行這行代碼之后的結果是：
? ? ? ?

Hello & welcome, " reader"!

? ? ? ?在設置完innerHTML之后，馬上就可以像訪問文檔中的其他節點一樣訪問新生成的節點。
? ? ? ?設置innerHTML會導致瀏覽器將HTML字符串解析為對應的DOM樹。換句話說，設置完innerHTML之后再讀取它，將會得到一個差別很大的字符串。這個字符串不再是原始的
HTML代碼，而是根據原始HTML字符串創建的DOM子樹經過序列化之后的結果。
? ? ? ?innerHTML也有一些限制。首先，在多數瀏覽器中，通過innerHTML插入的

400-680-9298,0791-88117053

歡迎您的光顧，我們將竭誠為您服務×

售前咨詢

售后服務

備案專線

詳細介紹innerText、innerHTML、outerText、outerHTML使用方法

歡迎您的光顧，我們將竭誠為您服務×

詳細介紹innerText、innerHTML、outerText、outerHTML使用方法

歡迎您的光顧，我們將竭誠為您服務×