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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
Aptana调试javascript图解教程
Nov 30 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
vue动画效果实现方法示例
Mar 18 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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
php设计模式 Visitor 访问者模式
2011/06/28 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
树结构之JavaScript
2017/01/24 Javascript
Move.js入门
2017/02/08 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
面试常见的js算法题
2017/03/23 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python list是否包含另一个list所有元素的实例
2018/05/04 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
美工的岗位职责
2013/11/14 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
春节联欢会策划方案
2014/05/16 职场文书
工作会议方案
2014/05/21 职场文书
擅自离岗检讨书
2014/09/12 职场文书
百万英镑观后感
2015/06/09 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang