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 相关文章推荐
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
JavaScript中的this基本问题实例小结
Mar 09 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
php弹出对话框实现重定向代码
2014/01/23 PHP
php 删除cookie方法详解
2014/12/01 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
JsRender实用入门教程
2014/10/31 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
python获取标准北京时间的方法
2015/03/24 Python
Python字符串格式化
2015/06/15 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
详解python的argpare和click模块小结
2019/03/31 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
市场营销方案范文
2014/03/11 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS