DOM扩展之HTML5 插入标记
11.3.6 插入标记
当需要在文档中插入大量的HTML标记时，通过DOM操作就会是非常麻烦的，相对而言，使用插入标记的技术，直接插入HTML字符串不仅简单而且更快。以下插入标记相关的DOM操作已经纳入了HTML5规范。
1. innerHTML 属性
在读模式下，innerHTML属性返回调用元素所有的子节点对应的HTML标记，包括元素，注释和文本节点。在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用该DOM树完全替换调用元素的所有的子节点。
不是所有的元素都支持innerHTML属性。不支持的属性有：<col> <colgroup> <frameset> <head> <html> <style> <table> <tbody> <thead> <tfoot> 和<tr>。(在chrome中测试了tbody，是可以用的。所以在使用的时候最好测一下。)
IE8提供了一个方法window.toStaticHTML()，这个方法接受一个HTML字符串参数，返回一个经过无害处理后的版本。
2. outerHTML
与innerHTML类似，只不过无论是读模式还是写模式，都包括调用元素本身。即在读模式下，outerHTML返回调用它的元素及所有子元素的HTML表情；在写模式下，outerHTML会根据指定的HTML字符串创建DOM树，然后用该DOM树完全替换调用元素。
3. insertAdjacentHTML()方法
该方法接受两个参数，插入位置和要插入的HTML文本。第一个参数可取以下值：
- beforebegin, 在当前元素之前插入一个紧邻的同辈元素；
- afterbegin, 在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
- beforeend, 在当前元素之下插入一个新的子元素或者在最后一个子元素下插入新的子元素；
- afterend, 在当前元素之后插入一个紧邻的同辈元素。
4. 内存与性能
A. 以上方法在替换子节点的时候，如果被替换的子节点有绑定事件处理程序，元素与事件处理程序之间的绑定关系并没有一并删除。所有在使用上述方法时，最好先手动删除要被替换的元素的所有事件处理程序。
B. 在使用 innerHTML 或 outerHTM L属性插入HTML标签时，就会创建一个HTML解析器。这个解析器是在浏览器级别的代码基础上运行的，因此比使用DOM操作时执行JavaScript快的多。
但创建和销毁HTML解析器也会带来性能损失，所以最好将设置innerHTML 和 outerHTML 的次数控制在合理范围内。
DOM扩展之HTML5 插入标记的更多相关文章
- DOM扩展之 HTML5
11.3.1 与类相关的扩充 2. classList属性 在操作类名时,需要通过className属性添加,删除和替换类名.因为className是一个字符串,所以即使只修改一部分内容也要设置整个字 ...
- DOM扩展-HTML5、专有扩展
HTML5 与类相关的扩充 1.getElementsByClassName()方法 改方法接受一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList.传入多个类型时, ...
- HTML5学习笔记（二十四）：DOM扩展
DOM扩展 DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能,后被收录为标准的DOM相关API. 本笔记只记录被各大浏览器支持的标准扩展,对于特定浏览器的专有扩展不讨论. 选择符API ...
- HTML5部分新标签属性及DOM扩展元素
HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...
- dom扩展
第十一章 DOM扩展 一.选择符API 1.querySelector()方法 接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. 2. ...
- DOM扩展札记
Selector API HTML5 DOM扩展 Element Traversal规范 Selector API 众多JavaScript库中,最常用的一个功能就是根据css选择符选择与某个模式匹配 ...
- 11. javacript高级程序设计-DOM扩展
1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...
- js-DOM，DOM扩展
DOM: 1. 了解节点的信息:nodeName(属性的标签名),nodeValue两个属性 在取得信息之前要进行判断是不是节点,节点类型由12个数值常量进行表示 2.每个节点都有一个childNod ...
- 《JAVASCRIPT高级程序设计》DOM扩展
虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...
随机推荐
- Bible
001 Love your neighbor as yourself. 要爱人如己.--<旧·利>19:18 002 Resentment kills a foo ...
- 在iframe父界面获取iframe里面的标签
上一篇里边介绍了在里边利用iframe引入另一个html导航文件,有兴趣的朋友可以看一看 http://www.cnblogs.com/simba-lkj/p/6031662.html 目前遇到一些问 ...
- loadrunner将参数文件转换为UTF-8编码
在使用loadrunner进行参数化的时候,对于有些信息,比如地址.人名等,很多时候需要传入中文,但是有的时候会碰到字符编码不对导致脚本出错. 下面介绍两种loadrunner中可以使用的编码转化为U ...
- Hprose question
1 在服务端 接口的开发中 如果定义了index()方法 中间不能够有参数,否则报错. 2 接口方法中的参数 最好使用单参数 如fun($uid ) 或者 如果需要多个参数 fun($param){$ ...
- web前端代码编写体验
最好是使用HTML5的有意义的标签,并尝试在不同的,老版本的浏览器中也保持一致,不然你会发现,满屏都是div,后期进行代码验证,修改和查找简直是一场大灾难. 而且,编写代码的时候,为了方便以后代码的复 ...
- abap调vb写的dll实现电子天平的读数（带控件版）
废话不多说,直接上. 鉴于abap调研的dll文件需要在wins注册,自己尝试过delphi和C#感觉不是很好,最后毅然选择了VB来写 因为需要用到MScomm控件,所以对于将要写的dll需要带for ...
- java的前台与后台
技术上:前台是指web展示,webservice接口等输入输出接口,后台是指支持这些接口的程序. 例如读写数据库,读写文件,业务逻辑处理. 业务上来讲:前台是提供给最终用户使用的界面,后台是指管理使用 ...
- 无废话SharePoint入门教程一[SharePoint概述]
一.前言 听说SharePoint也有一段时间了,可一直处在门外.最近被调到SharePoint实施项目小组,就随着工作一起学习了一下实施与开发.但苦于网上SharePoint入门的东西实在太少,导致 ...
- scala 的内部类
class A { class B; def foo(b:A#B){} //def foo(b:B){} 后面的a1.foo(b2) 就不能通过编译 } object Main { def main( ...
- Debian/Ubuntu/CentOS VPS安装Net-Speeder并优化
安装过程: CentOS安装 wget --no-check-certificate https://gist.github.com/LazyZhu/dc3f2f84c336a08fd6a5/raw/ ...