第十三课:js操作节点的创建
浏览器提供了多种方法创建节点。比如:document.createElement,innerHTML,insertAdjacentHTML,createContextualFragment。
document.createElement方法
传入一个标签名,返回此类型的元素节点,对于浏览器不支持的标签类型,它也能成功返回。
在IE6-IE8中,它允许用户连同属性一起生成,比如:document.createElement("<div id=aaa></div>"),此方法常用于生成带name属性的input和iframe,因为IE6-IE7下这两种元素的name属性是只读的,不能修改。因此你可以在IE6,7下,创建带有name属性的input和iframe,这样的name就是按照你的意愿设置的。其他标准浏览器不能传入带属性的元素标签,但是可以直接修改。
因此在创建带有name属性的元素时,你可以写一个兼容方法,首先用IE的形式来创建,如果创建出来的元素为null,就说明是其他标准浏览器,那么就使用标准方法创建,创建好了再改变它的name属性值。
innerHTML方法
innerHTML的创建效率比createElement快多倍,而且innerHTML一下子可以生成一大堆的节点。但是同样在IE下有一些兼容性问题要考虑:
IE6-IE8会对用户传入的字符串进行trimLeft操作,本意是智能的去掉没用的空格,但其他标准浏览器忠于用户输入,对应位置要生成文本节点,哪怕是空白文本。
举个例子:div.innerHTML = " <b>1</b><b>2</b> "; div.childNodes.length,IE6-IE8得到3,因为前面的空白文本没去掉了。而其他浏览器得到4,会为每个空白建立文本节点。当然后面的空白文本都会新建文本节点。
IE9以及以下版本下有些元素节点的innerHTML是只读的,不能重写。比如:table。
IE6-IE8下的innerHTML会忽略掉no-scope element。(注释,style,script,link,meta,noscript等功能性的标签称为no-scope element)。想要用innerHTML生成他们,需要在它们之前加上一些东西,比如:文字或其他标签。之后再移除这些文字或者标签。
另外一个众所周知的问题是innerHTML不会执行script标签里面的脚本,其实不完全正确,如果浏览器支持script标签中的defer属性,它就能执行脚本(只有 Internet Explorer 支持 defer 属性,defer 属性可以对脚本执行进行延迟,直到页面加载完成才执行)。
jQuery的处理方法是直接用正则把script标签里面的脚本内容取出来,然后eval执行。
还有一种方式是,动态生成一个script节点,然后把用innerHTML加进去的script节点中的所有属性赋给新节点。
最后一个问题:有的标签不能单独作为div的子元素,比如td,th元素(html的嵌套规则),需要外面包几层(tr,tbody,table),才能放到innerHTML中解释,否则浏览器会把这些当做普通的文本节点生成。
还有一个特点大家可以了解下:div.innerHTML = '<table><tbody><tr></tr>';浏览器会自动补全标签,因此不会出现错误。但是有些标签不会自动补全,所以大家在添加元素的时候,还是写全比较稳妥。
insertAdjacentHTML方法
这个方法使你可以到一个元素的内部的最前面,最后面,这个元素的前面或后面插入html标签字符串生成的节点,它们一一对应jQuery的prepend,append,before,after方法,非常好用,但是兼容性不好。如果浏览器不支持此方法,可以使用createContextualFragment来模拟。
createContextualFragment方法
此方法是Range对象的一个实例方法。它允许我们将字符串转换成文档碎片(不了解的先行百度),然后再由你决定插入到哪里。
除此之外,document.write()也可以创建内容,但是我们动态添加节点时发生在DOM树建完后,所以这个方法不适合。它会重写整个document内容。
这里我聊下jQuery和Zepto类库哪个好的问题。
jQuery中的操作都是使用链式操作,而链式操作,就意味着引用,大家都知道,引用的越多,就代表不能释放的东西也越多,因此内存占用的也越多。对于移动端,我个人还是推荐Zepto,至少现在的手机还没能达到PC的水平。PC端毫无疑问使用jQuery。
第十三课:js操作节点的创建的更多相关文章
- 第十四课:js操作节点的插入,复制,移除
节点插入 appendChild方法,insertBefore方法是常用的两个节点插入方法,具体实现,请看js高级程序设计,或者自行百度. 这里提一下面试时经常会问到的问题,插入多个节点时,你是怎么插 ...
- 第十三篇 JS 操作table表格
JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- js操作文档对象的节点
好吧,为了能让大家不至于睡着,我们先回顾先前面的东东吧~ 1.首先我们写了javaScriput的是一门弱类型的解释性的脚本语言:弱类型:我们的变量不用申明其具体的数据类型,在使用的时候浏览器根据其存 ...
- js获取节点的DOM操作
一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Nod ...
- js操作cookie(创建、读取、删除)方法总结
js操作cookie,可以通过开源的插件实现,方便快捷,兼容性好,同样也可以自己写: 此文主要介绍两个常用的插件: Js.cookie.js 和 jQuery.cookie.js 0.Js.cooki ...
- NeHe OpenGL教程 第四十三课:FreeType库
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- NeHe OpenGL教程 第十三课:图像字体
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
随机推荐
- C/C++ 动态存储分配
C语言的动态分配函数: malloc(m):开辟m字节长度的地址空间,并返回这段空间的首地址 sizeof(x):计算变量x的长度 free(p):释放指针p所指变量的存储空间,即彻底删除一个变量 C ...
- HDU 3374 String Problem (KMP+最大最小表示)
KMP,在有循环节的前提下: 循环节 t = len-next[len], 个数num = len/(len-next[len]);个人理解,如果有循环节,循环节长度必定小于等于len/2, 换句话说 ...
- log4j日志优先级问题的后续
前文:http://www.cnblogs.com/chyu/p/4280440.html 出现一处吐槽失误,当时还想怎么会设置成warn级别.. <appender name="ST ...
- [ZZ]Android UI Automated Testing
Google Testing Blog最近发表了一篇Android UI Automated Testing,我把他转载过来,墙外地址:http://googletesting.blogspot.co ...
- Mango DS Training #48 ---线段树2 解题手记
Training address: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=38966#overview A.Count Color ...
- RMQ之ST算法模板
#include<stdio.h> #include<string.h> #include<iostream> using namespace std; ; ],M ...
- 后台首页品字形(frameset)框架搭建
get_defined_constants([true])//显示所有常量信息.参数true,表示分组显示,查看当前系统给我提供了哪些常量可以使用,包括自定义常量. __CONTROLLER__//获 ...
- Web Storage中的sessionStorage和localStorage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...
- UINavagationController
如何防止navigation多次push一个页面?有时候网慢,点了一下没反应,用户可能就多点几下,这时候会打开好几个一样的页面: 写了一个navigation基类,重写了push方法:传进来要push ...
- Android中的IMEI
国际移动设备识别码(IMEI:International Mobile Equipment Identification Number)是区别移动设备的标志,储存在移动设备中,可用于监控被窃或无效的移 ...