本文主要是介绍innerHtml/outerHtml/innerText/outerText/textContent比较，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
总纲
- 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属性代替。
这篇关于innerHtml/outerHtml/innerText/outerText/textContent比较的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
