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进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...
随机推荐
- 小程序 web 端实时运行工具
微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/
- MySQL 警告WARN: Establishing SSL connection without server's identity verification is not recommended.解决办法
Fri Jun 17 13:46:54 CST 2016 WARN: Establishing SSL connection without server's identity verificatio ...
- MyBatis Generator 详解
MyBatis Generator中文文档 MyBatis Generator中文文档地址:http://mbg.cndocs.tk/ 该中文文档由于尽可能和原文内容一致,所以有些地方如果不熟悉,看中 ...
- 用超链接提交表单，实现在动态网页的url中隐藏参数
动态网页中怎么隐藏url参数传递 我们在做动态网站的时候往往会在各个页面之间传递参数,而这些参数的名称和值都会在url地址栏中被暴露出来,这样一方面不安全,另一方面也不便于搜索引擎的收录,有的时候还有 ...
- I:trainage Ditches
总时间限制: 1000ms 内存限制: 65536kB描述Every time it rains on Farmer John's fields, a pond forms over Bessie's ...
- poj 3734 Blocks
ゲート 分析:这题过的人好多,然后大家好像是用矩阵过的(((φ(◎ロ◎;)φ))).我自己是推公式的. 对于任意的有这个式子, 就是先从里面选偶数个涂成两个指定的颜色,再在选出的里面选定涂某种颜色,选 ...
- POJ 3414 Pots
Pots Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Status ...
- zabbix-agent配置文件说明
zabbix-agent配置文件:/etc/zabbix/zabbix_agentd.conf Server=zabbix server IP,网关IP hostname=本机IP ServerAct ...
- kotlin 练习
Kotlin 定义函数的一些语法 fun main(args:Array<String>):Unit { val x:() -> Unit = { println("hel ...
- 在Heroku上，安装Wordpress
其實在 Heroku 上安裝 Wordpress 不會很難,不過閱讀之前,你可能先要知道 Heroku 與 git 的基本操作,建議可以先參考以下網站用 Heroku 架設 Wordpress 網站 ...