innerHTML、innerText、outerHTML、textContent的区别
<div id="test"> <span style="color:red">test1</span> test2 </div>
获得id为test的dom对象,下面就不一一获取了。
var test = document.getelementbyid('test');
test.innerhtml
描述:也就是从对象的起始位置到终止位置的全部内容,包括html标签。
上例中的test.innerhtml的值也就是“<span style="color:red">test1</span> test2 ”。
test.innertext
描述:从起始位置到终止位置的内容, 但它去除html标签 。
上例中的test.innertext的值也就是“test1 test2”
, 其中span
标签去除了。
test.outerhtml
描述:除了包含innerhtml的全部内容外, 还包含对象标签本身。
上例中的test.outerhtml的值也就是<div id="test"><span style="color:red">test1</span> test2</div>
完整示例:
<div id="test"> <span style="color:red">test1</span> test2 </div> <a href="javascript:alert(test.innerhtml)">innerhtml内容</a> <a href="javascript:alert(test.innertext)">inertext内容</a> <a href="javascript:alert(test.outerhtml)">outerhtml内容</a>
结果:
//test.innerhtml结果:<span style="color:red">test1</span> test2 //test.innertext结果:test1 test2 //test.outerhtml结果:<div id="test"><span style="color:red">test1</span> test2</div>
test.textcontent
描述:textcontent 属性设置或返回指定节点的文本内容,以及它的所有后代。
提示:有时,此属性可用于取代 nodevalue 属性,但是请记住此属性同时会返回所有子节点的文本。
得到的结果跟innertext的结果是一样的。
注释:internet explorer 8 以及更早的版本不支持此属性。
兼容性
innerhtml
所有浏览器兼容;innertext
与outerhtml
虽然主流浏览器,如谷歌,火狐,ie7-ie11,qq等都已支持(这里提到的谷歌火狐等都是最新浏览器的版本),但是w3c
的标准属性就是innerhtml
,因此,尽可能地去使用innerhtml
,而少用innertext
与outerhtml
上一篇: C++灵魂所在之---继承篇
下一篇: Flink运行架构
推荐阅读
-
详谈innerHTML innerText的使用和区别
-
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
-
js函数script放在head和body里的差别、innerHtml和innerText差别等介绍
-
innerHTML与jquery里的html()区别介绍
-
getElementById().innerHTML与getElementById().value的区别
-
js中innerHTML与innerText的用法与区别
-
innerHTML、innerText、outerHTML、textContent的区别
-
innerHTML和innerText的用法以及不同点
-
innerHTML,outerHTML,innerText,outerText的用法及区别解析_javascript技巧
-
innerHTML/outerHTML; innerText/outerText; textContent_html/css_WEB-ITnose