textContent在Firefox下与innerText等效的属性

在IE和Opear下，DOM对象支持innerText属性，可以很方便的去除HTML标签。
但在Firefox不支持该属性，好在FF下的DOM对象支持textContent，该属性与innerText等效。

演示实例：
<p id="TestObj">Hi,I'm <strong>cnlei</strong>.Welcome to my homepage:<a href="http://www.cnlei.com">http://www.cnlei.com</a>.</p>
<script type="text/javascript">
function getInnerText(obj){
  return document.all?obj.innerText:obj.textContent;
}
var str = getInnerText(document.getElementById("TestObj"));
alert(str);
</script>

为Firefox下的DOM对象增加innerText属性：
<script type="text/javascript">
var lBrowser = {};
lBrowser.agt = navigator.userAgent.toLowerCase();
lBrowser.isW3C = document.getElementById ? true:false;
lBrowser.isIE = ((lBrowser.agt.indexOf("msie") != -1) && (lBrowser.agt.indexOf("opera") == -1) && (lBrowser.agt.indexOf("omniweb") == -1));
lBrowser.isNS6 = lBrowser.isW3C && (navigator.appName=="Netscape") ;
lBrowser.isOpera = lBrowser.agt.indexOf("opera") != -1;
lBrowser.isGecko = lBrowser.agt.indexOf("gecko") != -1;
lBrowser.ieTrueBody =function (){
  return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
};

//为Firefox下的DOM对象增加innerText属性
if(lBrowser.isNS6){ //firefox innerText define
 HTMLElement.prototype.__defineGetter__( "innerText", 
 function(){ 
 return this.textContent; 
 } 
 ); 
 HTMLElement.prototype.__defineSetter__( "innerText", 
 function(sText){ 
 this.textContent=sText; 
 } 
 ); 
}

alert(lBrowser.isNS6);
</script>

附录 DOM Reference：
Firefox DOM参考:http://www.mozilla.org/docs/dom/domref/dom_shortTOC.html
IE DOM参考：
http://msdn2.microsoft.com/en-us/library/ms533050.aspx

赞 (0)

相关推荐

  • innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解

    innerHTML属性用来读取或设置某个节点内的HTML代码. outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内. textContent属性用来读取或设置节点包含的文本内容. innerText属性和outerText属性在读取元素节点的文本内容时,得到的值是不一样的.它们的不同之处在于设置一个节点的文本属性时,outerText属性会使得原来的元素节点被文本节点替换掉.注意,innerText是非标准属性,Firefox不支持. 1.innerText受CSS影响,t

  • innerHTML,outerHTML,innerText,outerText的用法及区别解析

    <p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;"><span>这是一个层</span></div> <input name="innerHTML" value="innerHTML" type="button" OnClick="

  • innerText和textContent对比及使用介绍

    今天在使用innerText时遇到一个兼容性问题,FireFox不支持innerText方法,查了下MDN,发现FireFox下有个类似的方法,叫textContent,它和IE的innerText类似, 都是用来获取(设置)元素中text的方法. 语法 •设置 复制代码 代码如下: element.textContent = "text"; •获取 复制代码 代码如下: var text = element.textContent; 复制代码 代码如下: Note: textCont

  • javascript innerHTML、outerHTML、innerText、outerText的区别

    javascript innerHTML、outerHTML、innerText、outerText的区别

    1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 2.示例 <html> <head> <title>Demo</title> <style><!-- body {font-family:"宋体";

  • javascript textContent与innerText的异同分析

    textContent与innerText的不同 IE下有个innerText属性,FF下有个textContent属性.很多以前给IE写脚本的,在FF下找不到innerText属性,于是网上搜到的建议是用textContent来替代.反之给FF写脚本的也一样. 但是实际上,这里有个误解.网上很多文章说"FF下等效于innerText属性的属性是textContent"----但是事实上并非如此.innerText与textContent有几点很重要的不同,导致它们在一些情况下不能直接

  • innerHTML，outerHTML,innerTEXT三者之间的区别

    innerHTML，outerHTML,innerTEXT三者之间的区别

    与innerHTML不同,outerHTML包括整个标签,而不仅限于标签内部的内容.对于一个id为"testdiv"的div来说,outerHTML.innerHTML以及innerTEXT三者的区别可以通过下图展示出来:

  • IE innerHTML,outerHTML所引起的问题

    innerHTML或是outerHTML 比如说: 复制代码 代码如下: var crtDIV = document.getElementById('divIDName'); if (crtDIV) { crtDIV.parentNode.removeChild(crtDIV); crtDIV.outerHTML = ""; } 就有可能发现,整个界面都是无法选中,只有链接才可点击. 解决这方面的异常或是IE错误,只有: 不用outerHTML,或innerHTML. 如果是用到了in

  • textContent在Firefox下与innerText等效的属性

    在IE和Opear下,DOM对象支持innerText属性,可以很方便的去除HTML标签. 但在Firefox不支持该属性,好在FF下的DOM对象支持textContent,该属性与innerText等效. 演示实例: <p id="TestObj">Hi,I'm <strong>cnlei</strong>.Welcome to my homepage:<a href="http://www.cnlei.com">h

  • IE和Firefox下javascript的兼容写法小结

    1.发现IE下input标签的id属性默认和name属性相同,而Firefox必须明确写出id属性的名称否则不能使用id属性. 如:<input type="text" name="username" value=""> 在IE下如下代码可以执行而在Firefox下却不可以: <script> alert(document.getElementById("username").value); </

  • css pointer控制在firefox下显示手型的代码

    在ie下设置 css 样式 style="cursor:hand;" 可以正常显示 但是在firefox下就不行 改用 style="cursor:pointer;" 则在两个浏览器下都能正常显示 但只适用于IE6.0及以上版本以及FIREFOX,在IE5.0下不能显示成手

  • firefox下jquery ajax返回object XMLDocument处理方法

    在firefox下使用jquery ajax处理struts2 返回json类型的时候,ajax执行成功返回结果为 [object XMLDocument]. 处理办法:在getWriter.print():前面加上一行代码 复制代码 代码如下: ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");

  • firefox下javascript实现高亮关键词的方法

    复制代码 代码如下: IE下有:   var range = document.createRange();   FireFox下有:   var range = document.body.createTextRange(); IE下有findText及pasteHTML,但是fireFox下就没有!怎么办?查了好多资料,都没有能说出个所以然的,皇天不负有心人,终于让我给搞出来了! 注:我这里不是用正则替换,因为正则替换有它的不足之处! 不知道先前有没有高人研究过这种方法. Untitled

  • E3 tree 1.6在Firefox下显示问题的修复方法

    E3 tree 1.6在Firefox下显示问题的修复方法

    tree 在Firefox下只显示一句话: 用firebug查看页面元素观察发现 两个script导入被一个<script>分隔开了,显然是document.write的问题.由于Firefox对js规范的检查比较严格,肯定一些字符输出的的时候没有转义. 查看e3 tree的源代码: /E3Tree/src/net/jcreate/e3/tree/ext/ExtTreeBuilder.java /E3Tree/src/net/jcreate/e3/tree/ext/OutlookExtTree

  • IE与Firefox下javascript getyear年份的兼容性写法

    IE与Firefox下javascript getyear年份不同浏览器 JavaScript 的getyear年份函数兼容性问题 先举个例子 用 Firefox 上一些网站会看到这样的提示 现在时间是 106年8月8日 而用 ie 浏览器的话就显示正常的 2006年8月8日 原因就是 javascript 的兼容性问题 var today = new date(); var year = today.getYear(); 在 Firefox 里面 getYear 返回的是 "当前年份-1900

  • IE和Firefox下event事件杂谈

    因为javascript的事件模型有三种,它们分别是NN4.IE4+和W3C/Safari;这也造成了在不同的浏览器中处理event的差异,这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作.首先看如下代码: 复制代码 代码如下: function doEventThing(eventTag){ var event = eventTag||window.event; var currentKey = event.charCode||event.keyCode;

  • 关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级

    关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级

    假设在我们页面有这么一段标签: 复制代码 代码如下: <body> <div id="testDiv" style="width:200px;height:200px;background:#c0c0c0;"></div> </body> 现在在页面加入这么一段脚本: 复制代码 代码如下: <script type="text/javascript"> window.onload=fun

  • 在Firefox下js select标签点击无法弹出

    在项目中运用到了JQUERY UI,用到了其中的disableSelection()方法,这个方法是让页面上的指定元素无法通过鼠标拖拽进行选择. 由于某些需求,我在给div使用了此方法后,达到了上述效果,但是有不足的地方. 在Firefox下运用此方法后,div中的select方法点击之后将会无法弹出,在IE和CHROME下没有此现象.

随机推荐