js有关元素内容操作小结
来源:互联网 发布:软件质量控制 编辑:程序博客网 时间:2024/05/21 17:26
作者: 字体:[增加 减小] 类型:转载
最近在研习“犀牛书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('');
}
}
0 0
- js有关元素内容操作小结
- js有关元素内容操作小结
- js如何获取元素内容
- js获得元素文字内容
- Js操作excel小结
- jQuery对元素内容操作
- 操作元素内容,属性,css
- js 操作iframe元素
- js 操作元素
- 07 JS元素操作
- js-dom元素操作
- js元素属性操作
- JS操作DOM元素
- js操作元素样式
- JS有关日期的操作
- JS操作iframe内容
- js操作内容体
- 有关js,ajax的好内容
- django添加ldap认证
- 黑马程序员——Java基础---Java语言基础(二)
- 移动webAPP前端开发代码演示和技巧汇总
- WinXP 比 Win2008R2 更高效? 我反正信了.
- npm cache server
- js有关元素内容操作小结
- 来自知乎-Web 建站技术中,HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么?
- 【牛刀小试2】密码保护
- c/c++使用VS2013连接MySQL与ubuntu下c链接mysql
- Show image in matplotlib
- hive中的Lateral View
- Linux的文件类型和权限操作
- 藏书阁(非技术流书籍)
- hive udtf的使用