innerText 和outerText 的区别

yangping_Account

浏览: 192810 次
性别:
来自: 无锡

最近访客更多访客>>

liao666

Bsklqgy

woodding2008

labreeze

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java

IE Firefox JavaScript 浏览器 HTML

 <html>
<head>
<title>A test for innerText, outerText method</title>
<script language='javascript'>
<!--
function getInnerText(objectID){
    var divTextObject=document.getElementById(objectID);
    if(!divTextObject){
        alert("innerText(): The "+objectID+" not found.");
    }else{
        alert("innerText(): "+divTextObject.innerText);
    }
}
function getOuterText(objectID){
    var divTextObject=document.getElementById(objectID);
    if(!divTextObject){
        alert("outerText(): The "+objectID+" not found.");
    }else{
        alert("outerText(): "+divTextObject.innerText);
    }
}

function getInnerHTML(objectID){
    var divTextObject=document.getElementById(objectID);
    if(!divTextObject){
        alert("innerHTML(): The "+objectID+" not found.");
    }else{
        alert("innerHTML(): "+divTextObject.innerHTML);
    }
}
function getOuterHTML(objectID){
    var divTextObject=document.getElementById(objectID);
    if(!divTextObject){
        alert("outerHTML(): The "+objectID+" not found.");
    }else{
        alert("outerHTML(): "+divTextObject.outerHTML);
    }
}
/**********************************************************************************/
var textValue="Hellin love Linda for ever."
var htmlValue="<span> Hellin <button>love Linda </button></span>for ever.";

function change_outerHTML(objectID){
    var divTextObject=document.getElementById(objectID);
    if(!divTextObject){
        alert("outerHTML(): The "+objectID+" not found.");
    }else{
        divTextObject.outerHTML=htmlValue;
    }
}
function change_innerHTML(objectID){
    var divTextObject=document.getElementById(objectID);
    if(!divTextObject){
        alert("innerHTML(): The "+objectID+" not found.");
    }else{
        divTextObject.innerHTML=htmlValue;
    }
}

function change_outerText(objectID){
    var divTextObject=document.getElementById(objectID);
    if(!divTextObject){
        alert("outerText(): The "+objectID+" not found.");
    }else{
        divTextObject.outerText=textValue;
    }
}
function change_innerText(objectID){
    var divTextObject=document.getElementById(objectID);
    if(!divTextObject){
        alert("innerText(): The "+objectID+" not found.");
    }else{
        divTextObject.innerText=textValue;
    }
}
-->
</script>
</head>
<body>
<p>
<div id='divText' >Hello, <button>Hellin Zhang</button></div>
</p>
<br/>
<input name="testButton" value="innerHTML" type="button" OnClick="getInnerHTML('divText');"> 
<input name="testButton" value="outerHTML" type="button" OnClick="getOuterHTML('divText');"> 
<input name="testButton" value="innerText" type="button" OnClick="getInnerText('divText');"> 
<input name="testButton" value="outerText" type="button" OnClick="getOuterText('divText');"> 
<br/><br/><br/><br/>
<input name="testButton" value="change_innerHTML" type="button" OnClick="change_innerHTML('divText');"> 
<input name="testButton" value="change_outerHTML" type="button" OnClick="change_outerHTML('divText');"> 
<br/>
<input name="testButton" value="change_innerText" type="button" OnClick="change_innerText('divText');"> 
<input name="testButton" value="change_outerText" type="button" OnClick="change_outerText('divText');"> 
</body>
</html>

请您先下载运行并参考作者写的例子 .

<div id='divText' >Hello, <button>Hellin Zhang</button></div>

outerText:

当您调用 document.getElementById('divText').outerText 属性时 , 理论上是
获得开始标签 (start tag)”<div id='div1' >” 和 “</div> 之间所有的 text object 的 text value, 但是必须明确此时的操作也饱含了自身即 “div” object . 所以本例读取值 Hellin, Hello world! 这与 innerText 没有什么区别 .

如果你执行执行 document.getElementById(''divText' ').outerText="Hellin love Linda for ever."; 那么执行之后的结果是 <div id='divText' >Hello, <button>Hellin Zhang</button></div> 变成了 text object ( 即 “Hellin love Linda for ever.”). 换句话说 div 这个 tag 没了 , 而被你的一个文档对象 ”Hellin love Linda for ever.” 给换掉了 .

innerText

只能工作在 tag object 的内部即开始标签 (start tag)”<div id='div1' >” 和 “</div> 之间所有的 text object 的 text value , 但是它一定不包括自身对象 , 这里的 inner 就是这个含义 . 如果您只是读取 text objext 的 text value, 那么用 innerText 和 outerText 是等效的 , 它不同于 innerHTML 和 outerHTML.

当您写即你执行 document.getElementById('div1').innerText="Hellin love Linda for ever."; 后 <div id='divText' >Hello, <button>Hellin Zhang</button></div> 变成 <div id='divText' > Hellin love Linda for ever.</div>, div object 并没有销毁 .

换句话说 , inner 操作的是 tag 内部的对象 , outer 不仅操作内部对象也包含了本身对象 . 读这些属性值的过程中 , 可能没有区别 , 但是赋值操作区别可就大了 .

同理 innerHTML, outerHTML. 只不过它们操作的不是 text 而是 HTML.

注意 : W3C 只支持 innerHTML. 其他都是微软的规定 .(outerHTML,outerText,innerText 只有微软的 IE 好使 , 其他浏览器不好用 (firefox, mozilla 等 ), 必须用其他方法实现 )

分享到：

字节对齐详解 | Hashtable和HashMap的区别

2011-02-05 23:07
浏览 998
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论