您的位置：首页 > Web前端 > Node.js

nodeType、innerHTML、innerText、textContent之间的区别与联系

2013-07-31 17:07 627 查看
1.nodeValue是文本节点的属性，给其它节点设置这个属性无效，比如说：oDiv.nodeValue=’abcd’;这是无效的。
2.innerHTML是复合W3C标准的属性，而innerText只适用于IE浏览器。因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<ahref="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
-----出处参考：http://www.jb51.net/article/20607.htm
3.innerHTML可以解析html标记，如 你在div中放入<a>测试</a>，其会在div中出现一个带下划线的a元素
   innerText只支持普通字符串。可以用来原样输出你赋值给某个属性的内容。
4.textContent是在FF支持的。
自己封装text方法，用以解决textContent与innerText兼容性的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div id="div1" style="width:100px; height:100px; background:red;"></div>
</body>
</html>
<script type="text/javascript">
var oDiv=document.getElementById('div1');
if(typeof oDiv.textContent =='string')
oDiv.textContent='测试1';
else{
oDiv.innerText='测试2';
}

function text(ele,str){  //ele对象 str要插入的字符串
if(ele&&ele.nodeType&&ele.nodeType==1){
if(str===undefined){
if(typeof ele.textContent=='string')
return ele.textContent;   //如果未传参数2,则获得元素内容
else
return ele.innerText;

}else{
if(str===null){
alert('参数错误,str为null！');
return ;
}else if(typeof str=='string'){
if(typeof ele.textContent=='string')
ele.textContent+=str;
else
ele.innerText+=str;
}
else
alert('str参数错误！')
}
}else{
alert('ele参数错误！')
}
}
text(oDiv,'测试IE与FF的兼容性！')
</script>


下面引自脚本之家：

1.让innerText在firefox火狐和IE浏览器都能用的写法--解决firefox浏览器不支持innerText的问题

IE中的获取文本方法innerText在firefox中不支持

firefox改成了textContent方法/属性

并且在Firefox中文本中间的空白自符被无情的替换没了，使用起来异常不方便

现在好了，用Javascript重新定义了innerText方法，使得在Firefox中也可以使用innerText方法，并且此方法解决了firefox中空白字符的问题

 

使用方法：

将下面的脚本放在页面内

不管ie还是firefox都可以使用obj.innerText提取文本了

<script language=”javascript”>
function isIE(){ //ie?
if (window.navigator.userAgent.toLowerCase().indexOf(“msie”)>=1)
return true;
else
return false;
}
if(!isIE()){ //firefox innerText define
HTMLElement.prototype.__defineGetter__( “innerText”,
function(){
var anyString = “”;
var childS = this.childNodes;
for(var i=0; i<childS.length; i++) {
if(childS[i].nodeType==1)
anyString += childS[i].tagName==”BR” ? ‘\n' : childS[i].textContent;
else if(childS[i].nodeType==3)
anyString += childS[i].nodeValue;
}
return anyString;
}
);
HTMLElement.prototype.__defineSetter__( “innerText”,
function(sText){
this.textContent=sText;
}
);
}
</script>

2.关于Mozilla浏览器不支持innerText的解决办法

在各大浏览器中，除Mozilla浏览器外，几乎都支持一个元素的属性：innerText。我们可以通过它来快速获取某个元素的内的文本。

比如：

<pid="test"><strong><font color="red">Hello</font>, world!</strong></p>


我们使用代码：

alert((document.getElementById("test")).innerText)


在IE、Chrome中，均能获取到“Hello , world!”，但是在Firefox中，却得到了"undefined"。

其因为是firefox中并不支持元素的innerText这个属性。当然，在网络上已经有很多好的方法来解决这个问题了，比如给HTMLElement原型添加一个属性（读取器）。

然而，所有文本节点都具有nodeValue属性，而且所有浏览器都是支持的。我们可以尝试用这种方法（nodeValue）去读取一个HTML元素内的文本。

下面的原码，正好解决了这个问题：

function getText(e){
//若浏览器支持元素的innerText属性，则直接返回该属性
if(e.innerText) {
return e.innerText;
}
//不支持innerText属性时，用以下方法处理
var t ="";e = e.childNodes ||e ;
//如果传入的是一个元素对象，则继续访问其子元素
//遍历子元素的所有子元素
for(var i=0;i<e.length; i++){
if(e[i].nodeType ==3) {
t += e[i].nodeValue;     //若为文本元素，则累加到字符串t中。
}else{
t +=getText(e[i].childNodes);    //否则递归遍历元素的所有子节点
}
}
return t;
}
有了这个函数，我们再来看看如下DOM结构： 

<pid="test"><strong><fontcolor="red">Hello</font> , world!</strong></p>

然后，我们用： 

alert(getText(document.getElementById("test"));

在IE、Chrome、Firefox中均能获取到 "Hello, world!" 

3.javascripttextContent与innerText的异同分析

textContent与innerText的不同 

 IE下有个innerText属性，FF下有个textContent属性。很多以前给IE写脚本的，在FF下找不到innerText属性，于是网上搜到的建议是用textContent来替代。反之给FF写脚本的也一样。

 但是实际上，这里有个误解。网上很
4000
多文章说“FF下等效于innerText属性的属性是textContent”————但是事实上并非如此。

innerText与textContent有几点很重要的不同，导致它们在一些情况下不能直接互换使用。

前些日子写了个代码高亮JS插件，在IE下工作完全正常，而在FF下就不对头。在IE下使用的是innerText属性，而在FF下使用的则是textContent属性。在进行字符串处理的时候二者的不同导致了完全不一样的结果。于是就专门写了点东西来测试二者的不同。

根据测试的结果表明： 

innerText：它的内容实际上就是你在浏览器看到的内容。它的值是经过浏览器解释过的结果：它将元素的innerHTML换码、解释，最终显示出来，然后去除各种格式信息留下的纯文本。它会把<br/>换成换行符，会将多个空格并成一个空格对待，而本来的换行符却并不会引起换行，IE会将其当作一个普通的单词边界（一般是空格）。再说的形象点，一个元素的innerText属性的值，和你将这个元素内容复制粘贴到记事本里的内容一致。

 

textContent：它的内容则是innerHTML去除所有标签后的内容（我怀疑这个是从XMLDOM中照搬过来的属性，特性完全一致）。它会将innerHTML中的转义字符（<、 什么的）进行换码，但是不对任何html标签进行解释，而是直接剔除它们。它也不会对innerHTML中的文本按照HTML的方式进行格式转换，比如多个空格还会原原本本地保留，不会合并为一个空格，换行符仍然存在（相反<br/>却不会导致换行）。

 

更加简练的总结：IE中的innerText是需要对innerHTML的值进行： 

1、HTML转义（等同于XML转义，对<、&等转义字符进行处理）； 

2、经过HTML解释和CSS样式解释； 

3、之后又剔除格式信息 

之后留下的纯文本。 

而FF中的textContent没有2、3步，在经过了HTML转义之后直接剔除所有html标签后得到的纯文本。 

<div id=”T1″>
ABCD
EFGHIJ<br/>KLM  N
OPQ<div>RS</div>T
T
<div>
这个id为T1的div， 

在IE中的innerText属性的值为：

ABCD EFG HIJ

KLM N OPQ

RS

T T 

而在FF中的textContent的属性的值为：

(这里有个换行)

ABCD

EFG HIJKLM N

OPQRST

T

注意那个div中还嵌套了个div，而这个更能反映IE的innerText和FF的textContent各自的处理方式的不同： 

div是块（block）元素，默认会独占一行，因此，在IE中的innerText反映为上述div中的RS独占一行，而FF的textContent完全不理会HTML格式，因此其textContent中的RS是和其它字符连在一起的，不会独占一行。 

如果想更进一步，看看这个有趣的结果： 

假如给里面那个div加一个style=”float:left;”，那么这个div就会由块元素变化为行元素，不再独占一行，因此IE的innerText属性中RS便不再独占一行，而与其它字符连在一起，而在FF中由于textContent不理会标签更不会理会CSS，因此它的textContent属性的值不会有任何变化。

这么看来，很多网上说的“让FF支持innerText属性”云云，其实都是多多少少有问题的。要实现IE的innerText，远没有想象中的那么简单，你若要使用JavaScript让FF拥有和innerText完全一样的效果，得自己把html标签属性全部parse一遍，解释它们，甚至还需要去解释css……

（不过根据原理，貌似通过剪贴板的复制和取回操作可以在FF下模拟innerText效果（这个未测试），但是1有副作用，2FF下的剪贴板操作也很麻烦。）

不过还好，大多数时候我们并不需要那么精确，使用innerHTML做点简单的处理即可达到比较接近的效果了。

注：以上代码均在IE6和FF3下完成测试。

一:动态改变文本和Html 

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Demo1</title>
<styletype="text/css">
p {
color:gray;
}
</style>
<scriptlanguage="javascript">
functionchangeText()
{
//innerText属性只能改变HTML内的文本内容,并且支持IE下使用
DT.innerText="我很好";
}
functionchangeHtml()
{
//innerHTML符合W3C标准,可以在任何浏览器下使用,并且可以改变独享DH内部的HTML语句
DH.innerHTML="<i><u><strong>我姓肖</strong></u></i>";
//火狐下只支持以下写法,并不支持在Javascript脚本中直接使用对象名来操作对象
//document.getElementById("DH").innerHTML="<i><u><strong>我姓肖</strong></u></i>";
}
function back()
{
DT.innerText="你好吗?";
DH.innerHTML="你姓啥?";
}
</script>
</head>
<body>
<p>请点击下边的文字.....
<p>
<ul>
<liid="DT" onclick="changeText()">你好吗?</li>
<liid="DH" onclick="changeHtml()">你姓啥?</li>
<lionclick="back()">恢复原样</li>
</ul>
</body>
</html>
innerText属性用来定义对象所要输出的文本，在本例中innerText把对象DT中的文本“您好吗?”变成了“我很好!”（语句DT.innerText="我很好!"）。而对对象DH的改变用了innerHTML属性，它除了有innerText的作用外，还可改变对象DH内部的HTML语句，于是它把文本变成了“我姓肖!”，而且文本输出改成了斜体（<i></i>）并下加一条直线（<u></u>），即语句DH.innerHTML="<i><u>我姓肖!</u></i>"。

outerText和outerHTML也具有类似的作用，读者不妨自己试试看。

二:文本的动态输入与输出 

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Demo2</title>
<styletype="text/css">
p {
color:gray;
}
body {
font-family:宋体;
color:blue;
font-size:9pt;
}
.blue {
color:blue;
font-size:9pt;
}
</style>
<scriptlanguage="javascript">
functionOutputText(){
vartxt=document.getElementById("txt").value;
if(txt!=""){
output.innerHTML="在此输出文本:<u>"+txt+"</u>"
}else{
output.innerHTML="在此输出文本:";
}
}
</script>
</head>
<body>
<formid="frm">
<p> 请输入文本框中输入文字:
<inputtype="text" name="txt" size="50"/>
<inputtype="button" value="输出文本" class="blue"onclick="OutputText()"/>
</p>
<pid="output"> 在此输出文本: </p>
</form>
</body>
</html>
此例的效果是先在文本框中输入文本，然后按“输出文本”的按钮，接着网页便会自动输出您所输入的文本 

三:注意innerHTML有自动检查语法的功能

它会把不完整的HTML代码补充完整,这点可以说是神奇,例如下面的这段脚本

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Demo3</title>
<scriptlanguage="javascript">
function Get(){
vartab=document.getElementById("tab")
tab.innerHTML="<table><tr>";
alert(tab.innerHTML);
}
</script>
</head>
<body>
<pid="tab" onclick="Get()">
请点我啦!!!
</p>
</body>
</html>
运行的效果竟然是这样的:

<TABLE><TBODY><TR></TR></TBODY></TABLE>

所以请各位在使用时一定要小心.

例如在做这样的操作时就会出错.

list.innerHTML="<table><tr>"; 

list.innerHTML+="<td>" 

必须用一个中间变量 

var html="<table><tr>"; 

html+="<td>"; 

list.innerHTML=html; 

var html="<table><tr>"; 

html+="<td>"; 

list.innerHTML=html; 

这样问题就可以得到解决. 

另外: 

innerText在火狐下是不支持的，在网上有这种有人这么做 

innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用 innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例： 

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a> 


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                JavaScript
                                                浏览器
                                                Internet Explorer
                                                Firefox
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航