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 插入标记的更多相关文章

  1. DOM扩展之 HTML5

    11.3.1 与类相关的扩充 2. classList属性 在操作类名时,需要通过className属性添加,删除和替换类名.因为className是一个字符串,所以即使只修改一部分内容也要设置整个字 ...

  2. DOM扩展-HTML5、专有扩展

     HTML5 与类相关的扩充 1.getElementsByClassName()方法 改方法接受一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList.传入多个类型时, ...

  3. HTML5学习笔记（二十四）：DOM扩展

    DOM扩展 DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能,后被收录为标准的DOM相关API. 本笔记只记录被各大浏览器支持的标准扩展,对于特定浏览器的专有扩展不讨论. 选择符API ...

  4. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  5. dom扩展

    第十一章 DOM扩展 一.选择符API 1.querySelector()方法             接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. 2. ...

  6. DOM扩展札记

    Selector API HTML5 DOM扩展 Element Traversal规范 Selector API 众多JavaScript库中,最常用的一个功能就是根据css选择符选择与某个模式匹配 ...

  7. 11. javacript高级程序设计-DOM扩展

    1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...

  8. js-DOM，DOM扩展

    DOM: 1. 了解节点的信息:nodeName(属性的标签名),nodeValue两个属性 在取得信息之前要进行判断是不是节点,节点类型由12个数值常量进行表示 2.每个节点都有一个childNod ...

  9. 《JAVASCRIPT高级程序设计》DOM扩展

    虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...

随机推荐

  1. MyBatis缓存禁用失败

    问题:MyBatis缓存无法禁用,同一个session的select查询结果一样,但是数据库其实已改变. 尝试达到想要的目的: 1.msgmapper.xml里的select标签加上 <sele ...

  2. 获取$(this)子节点对象的方法

    获取$(this)子节点对象的方法: 1.children()方法: children() 方法返回被选元素的所有直接子元素. 该方法只会向下一级对 DOM 树进行遍历. 2.find()方法: fi ...

  3. css样式之 direction

    今天看到 direction:rtl.一时有点发傻. 其实就是文本读取顺序.默认是ltr从左向右读.rtl是从右向左读取.

  4. Html锚点定位偏差计算解决插件

    /*=============== 以下为HTML中的锚点代码 =====================*/ <div id="fixedNavBar" class=&qu ...

  5. JAV07接口与继承之动手动脑问题解决

    动手动脑:请自行编写代码测试以下特性:在子类中,若要调用父类中被覆盖的方法,可以使用super关键字. 1.源代码: package Work; class A{ public A(){ System ...

  6. mysql 5.7配置文件参数详解

    read_buffer_size 默认大小:128KB 最大:2GB 最小:8KB 增量:必须为4KB的整数倍,如果配置的不是整数倍,会向下取整 用途: 1.MyISAM表顺序扫描提供的缓存 2.所有 ...

  7. 【思路】-jscode

    jscode             //1.0 思路             //VH.PutSet(TagFields.PageName, PageName.Index);             ...

  8. 【小月博客】 Html5 上传图片 移动端、PC端通用

    在博客园注册账号有些天了,感觉有些许欣慰,自己写的东西有人在看,有人在评论很是开心.(ps: 满足一下虚荣心吧!) 废话不多说了,说一下今天给大家分享的是 html5上传图片.我们是在移动端使用的,但 ...

  9. （转）TortoiseSVN客户端重新设置用户名和密码

    在第一次使用TortoiseSVN从服务器CheckOut的时候,会要求输入用户名和密码,这时输入框下面有个选项是保存认证信息,如果选了这个选项,那么以后就不用每次都输入一遍用户名密码了. 不过,如果 ...

  10. 编译OpenJDK的笔记

    1.  ERROR: You seem to not have installed ALSA 0.9.1 or higher. 不需要从ALSA官网下载alsa-dev和alsa-drive, ubu ...