總綱
- innerHTML 設置或獲取位於對象起始和結束標籤內的 HTML
- outerHTML 設置或獲取對象及其內容的 HTML 形式
- textContent/innerText 設置或獲取位於對象起始和結束標籤內的文本
- outerText 設置(包括標籤)或獲取(不包括標籤)對象的文本
獲取操作
//HTML代碼：
<div id="test">
<span style="color:red">test1</span> test2
</div>
//執行獲取操作的結果：
test.innerHTML的值:“<span style="color:red">test1</span> test2 ”
text.outerHTML的值: “<div id="test"><span style="color:red">test1</span> test2</div>“
text.innerText與text.outerText的值:“test1 test2”( 沒有HTML標籤)
text.textContent的值: “test1 test2”(沒有HTML標籤)
設置操作
//原始HTML代碼：
<ul>
<li id="io">初期顯示</li>
</ul>
//執行設置操作結果
1）io.innerHTML="<i><u>設置或獲取位於對象起始和結束標籤內的HTML.</u></i>"；結果如下
<ul>
<liid="io"><i><u>設置或獲取位於對象起始和結束標籤內的HTML.</u></i></li>
</ul>//頁面不會顯示HTML標籤<i><u>
2）io.outerHTML="<i><u>設置或獲取對象及其內容的 HTML 形式.</u></i>";結果如下
<ul>
<i><u>設置或獲取對象及其內容的HTML形式.</u></i>
</ul> //頁面不會顯示HTML標籤<i><u>
4）io.innerText="<i><u>設置或獲取位於對象起始和結束標籤內的文本.</u></i>"；結果如下
<ul>
<li id="io">"<i><u>設置或獲取位於對象起始和結束標籤內的文本.</u></i>"</li>
</ul> //頁面會顯示HTML標籤<i><u>
5）io.outerText="<i><u>設置(包括標籤)或獲取(不包括標籤)對象的文本.</u></i>";結果如下
<ul>
"<i><u>設置(包括標籤)或獲取(不包括標籤)對象的文本.</u></i>"
</ul> //頁面會顯示HTML標籤<i><u>
6）io.textContent="<i><u>設置或獲取位於對象起始和結束標籤內的文本.</u></i>",結果與io.innerText相同。
兼容性問題
- innerHTML是符合W3C標準的屬性，所有主流瀏覽器幾乎都支持；
- outerHTML 最初是由 IE 瀏覽器實現的私有屬性，W3C 的 HTML5 規範草案中也新加入了這個屬性，目前，主流瀏覽器中，只有 Firefox 不支持 outerHTML屬性。；
- innerText 和outerText最初是由 IE4.0 瀏覽器實現的私有屬性，現有 W3C 標準中的沒有定義這個屬性。雖然不是標準屬性，但是大多瀏覽器都對它提供了支持，目前主流瀏覽器中只有 Firefox 不支持該屬性。
- textContent是DOM3級規定的一個屬性，所以是符合W3C標準的屬性。目前得到了FireFox、safari、opera和Chrome的支持，但IE不支持。雖然Firefox不支持innerText屬性，但其可以用textContent屬性代替。