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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 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使用pecl方式安装扩展操作示例
2019/08/12 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
brook javascript框架介绍
2011/10/10 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
node中的session的具体使用
2018/09/14 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
python通过post提交数据的方法
2015/05/06 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
Django框架实现的分页demo示例
2019/05/25 Python
python操作gitlab API过程解析
2019/12/27 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
创业计划书六个要素
2013/12/26 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
人代会简报
2015/07/21 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
docker-compose部署Yapi的方法
2022/04/08 Servers