innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别


Posted in Javascript onJune 29, 2007

innerText 属性在 IE 浏览器中可以得到当前元素过滤掉 HTML Tags 之后的文本内容,在某些时候还是比较有用。但类似的非标准属性/方法在其他浏览器中并不一定都得到支持。
类似的像 insertAdjacentElement , insertAdjacentElement , insertAdjacentHTML , insertAdjacentText 等。如果需要使用这些非标准的方法,或者已有的代码大量使用了这些方法的话,就必须为其他浏览器提供对应的 prototype 定义。比如:

var isMinNS5 = (navigator.appName.indexOf("Netscape") >= 0 &&
               parseFloat(navigator.appVersion) >= 5) ? 1 : 0;

if (isMinNS5){
 HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode){
   switch (where){
   case ’beforeBegin’:
     this.parentNode.insertBefore(parsedNode,this)
     break;
   case ’afterBegin’:
     this.insertBefore(parsedNode,this.firstChild);
     break;
   case ’beforeEnd’:
     this.appendChild(parsedNode);
     break;
   case ’afterEnd’:
     if(this.nextSibling){
       this.parentNode.insertBefore(parsedNode,this.nextSibling);
     }
     else{
       this.parentNode.appendChild(parsedNode)
     }
   break;
   }
 }
 HTMLElement.prototype.insertAdjacentHTML = function(where,htmlStr){
   var r = this.ownerDocument.createRange();
   r.setStartBefore(this);
   var parsedHTML = r.createContextualFragment(htmlStr);
   this.appendChild(parsedHTML)
 }
 HTMLElement.prototype.insertAdjacentText = function(where,txtStr){
   var parsedText = document.createTextNode(txtStr)
   this.insertAdjacentElement(where,parsedText)
 }
 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].innerText;
       else if(childS[i].nodeType==3)
         anyString += childS[i].nodeValue;
     }

     return anyString;
   }
 );
}

Javascript 相关文章推荐
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
window.onload使用指南
Sep 13 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
javascript之函数直接量(function(){})()
Jun 29 #Javascript
javascript延时重复执行函数 lLoopRun.js
Jun 29 #Javascript
JavaScript 编程引入命名空间的方法
Jun 29 #Javascript
你需要知道的JavsScript可以做什么?
Jun 29 #Javascript
ECMAScript 基础知识
Jun 29 #Javascript
javascript中的几个运算符
Jun 29 #Javascript
一个加载js文件的小脚本
Jun 28 #Javascript
You might like
php缓冲 output_buffering的使用详解
2013/06/13 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
python3.x中安装web.py步骤方法
2020/06/23 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
最新大学生自我评价
2013/09/24 职场文书
大学生志愿者感言
2014/01/15 职场文书
表彰先进的通报
2014/01/31 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
企业诚信承诺书
2014/05/23 职场文书
白莲教口号
2014/06/18 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
2014年政协工作总结
2014/12/09 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
消防安全主题班会
2015/08/12 职场文书
优秀员工演讲稿
2019/06/21 职场文书
python如何正确使用yield
2021/05/21 Python
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android