js有关元素内容操作小结


Posted in Javascript onDecember 20, 2011

1.innerHTML
这个大家一定都很熟悉,可读可写,修改元素内容相当快捷方便,在兼容问题上可以参考W3Help中一个知识记录。

2.outerHTML
此方法可以用于对元素自身的快速替换,比如:

<p id="hello">Hello, I am a demo</p> 
$('hello').outerHTML = '<p>Hello, I am a replacement</p>';

遗憾的是,firefox目前还不支持(我当前用firefox8),其他浏览器支持的还不错,在ff中可以用innerHTML来模拟实现。

3.documentFragment
DocumentFragment能实现高效率的DOM节点插入操作,我们可以新建一个DocumentFragment。

var docFragment = document.createDocumentFragment();

它支持元素节点的appendChild方法,可以利用它进行追加节点,相当于内存中的一个临时空间, 然后一次性加入DOM Tree中,较少浏览器相关的reflow和repaint事件,在之前的博文中有提到。

4.insertAdjacentHTML
这个方法很有意思,是IE4最先引入的,目前也写入了HTML5标准,目前所有浏览器都支持,ff是8才刚开始支持的。 它能够实现在元素的里外,共4个地方灵活的添加内容,例如:

<!-- beforebegin --><p id="test"><!-- afterbegin -->hello, I am a demo.<!-- beforeend--></p><!-- afterend--> 
$('test').insertAdjacentHTML('beforebegin', /* your content here */);

这确实很cool不是么,但遗憾的是,IE自己引入,确在IE6~8的版本中存在不少bug,比如我测试中遇到如果元素是div的话, 能够在四个地方,都能顺利插入内容,这是我们所预期的,但是我换成p元素的话,‘beforebegin'和‘afterend'就会报错, 它变得只支持p外部的内容插入,不允许插入到p的内部,还有tr,td不支持此方法等各种bug。IE9测下来,表现预期。 关于这个方法jQuery之父,有篇博客有讲,感兴趣的可以稍微参考下http://ejohn.org/blog/dom-insertadjacenthtml/

5.textContent
这个是针对元素中的文本内容的操作,提取元素本身和其子元素中文本内容,这个用的频率不是很高,但还是要知道下, 比如:

<div id="test"><p>whatever, blah blah.</p>hello,I am a <em>Demo</em></div> 
$('test').textContent //whatever, blah blah.hello, I am a Demo

把文本直接连接起来。IE9+和其他浏览器都很好的支持此方法。

6.innerText
这个也是由IE最初引入的,除了firefox,目前其他浏览器也都支持,但是结果有些微妙的不同。在opera中,结果和textContent一致,在chrome中,与包含该文本元素的样式有关。在IE9中,与包含该文本元素的样式有关。 事实上,innerText和textContent看似差不多,但还是有一些值得注意的不同之处。 具体MDN上有一定的说明:

1.textContent能够获取script,style元素中得文本。innerText不行

2.innerText结果跟样式有关,不能获取隐藏元素的文本内容,textContent则不受限制

3.innerText会触发浏览器内部的reflow事件,而textContent不会,这个对效率有点影响。

当然对于IE6~8,我们可以比较容易地通过遍历节点来实现textContent的效果。如犀牛书中所给出的解决方法:

function textContent(e) { 
var child, type, s = []; // s holds the text of all children 
for(child = e.firstChild; child != null; child = child.nextSibling) { 
type = child.nodeType; 
if(type === 3 || type === 4) { //Text and CDATASection nodes 
s.push(child.nodeValue); 
} else if(type === 1) { 
s.push(textContent(child)); 
} 
return s.join(''); 
} 
}
Javascript 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 #Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 #Javascript
js change,propertychange,input事件小议
Dec 20 #Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 #Javascript
Javascript面向对象设计一 工厂模式
Dec 20 #Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 #Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 #Javascript
You might like
example2.php
2006/10/09 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
php中的动态调用实例分析
2015/01/07 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
Python pandas如何向excel添加数据
2020/05/22 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
Python descriptor(描述符)的实现
2020/11/15 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
党小组推荐意见
2015/06/02 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL