A test for innerText, outerText method
Hello, Hellin Zhang
请您先下载运行并参考作者写的例子.
Hello, Hellin Zhang
outerText:
当您调用 document.getElementById('divText').outerText 属性时, 理论上是
获得开始标签(start tag)”
” 和“
之间所有的 text object的text value, 但是必须明确此时的操作也饱含了自身即 “div” object .所以本例读取值 Hellin, Hello world! 这与innerText 没有什么区别.
如果你执行执行 document.getElementById(''divText' ').outerText="Hellin love Linda for ever.";那么执行之后的结果是
Hello, Hellin Zhang
变成了 text object (即“Hellin love Linda for ever.”). 换句话说div 这个tag 没了, 而被你的一个文档对象”Hellin love Linda for ever.”给换掉了.
innerText
只能工作在 tag object 的内部即开始标签(start tag)”
” 和“
之间所有的 text object的 text value ,但是它一定不包括自身对象,这里的inner就是这个含义. 如果您只是读取 text objext 的 text value, 那么用 innerText和outerText是等效的,它不同于innerHTML和outerHTML.
当您写即你执行 document.getElementById('div1').innerText="Hellin love Linda for ever.";后
Hello, Hellin Zhang
变成
Hellin love Linda for ever.
, div object 并没有销毁.
换句话说, inner操作的是tag内部的对象, outer 不仅操作内部对象也包含了本身对象.读这些属性值的过程中,可能没有区别,但是赋值操作区别可就大了.
同理 innerHTML, outerHTML. 只不过它们操作的不是text而是HTML.
注意: W3C 只支持innerHTML. 其他都是微软的规定.(outerHTML,outerText,innerText只有微软的IE 好使, 其他浏览器不好用(firefox, mozilla等),必须用其他方法实现)