js有关元素内容操作小结
更新时间：2011年12月20日 01:39:09 作者：
最近在研习“犀牛书6th”，看完Element Content as HTML一节，就想随即展开写点东西记录记录
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('');
}
}
这个大家一定都很熟悉，可读可写，修改元素内容相当快捷方便，在兼容问题上可以参考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('');
}
}
相关文章
这篇文章主要介绍了游戏开发中如何使用CocosCreator进行音效处理，并对音效组件进行封装，方便以后使用，同学们看完之后，一定要亲手实验一下2021-04-04
js不进行类型检查，数组可以存放任何东西。于是我就想数组里可否存放函数呢，下面就为大家详细介绍下2013-12-12
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
这篇文章主要介绍了JavaScript+html5 canvas绘制缤纷多彩的三角形效果,以完整实例形式分析了html5的canvas绘制图形的相关技巧,需要的朋友可以参考下2016-01-01
本篇我们用同样的原理，把文字用CLIP属性分的更细，分别着色，然后组合到一起，实现自左到右更精确的色彩渐变。问题是文字细化分割需要用到很多很多个元素，所以这里我们要用程序来控制，自动生成这些元素。2008-11-11
这篇文章主要针对Bootstrap布局组件应用进行实例讲解，感兴趣的小伙伴们可以参考一下2016-02-02
弹出层组件用于弹出一个覆盖到页面上的内容，本文主要介绍了uniapp组件uni-popup弹出层的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-03-03
为了防止发生命名冲突，可以建立自己的代码库。2009-07-07
下面小编就为大家带来一篇在JavaScript中对HTML进行反转义详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
javascript每日必学之继承,介绍了有关继承的相关内容，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要为大家详细介绍了JavaScript实现简单抽奖系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论