JS 操作Dom节点之CURD

许多优秀的Javascript库，已经封装好了丰富的Dom操作函数，这可以加快项目开发效率。但是对于非常注重网页性能的项目来说，使用Dom的原生操作方法还是必要的。

1. 查找节点

 document.getElementById()
 //兼容问提：IE低版本不仅检查Id属性，还会检查Name属性，当Name属性匹配参数时也会返回该元素
 //解决方法：不要让一个元素name属性和另一个元素的id属性相同

 document.getElementsByTagName()
 document.getElementsByName()

2. 遍历节点

 parentNode
 firstChild
 lastChild
 previousSibling
 nextSibling
 childNodes

 //兼容问题： IE下会把节点间的空白、换行、tab全部忽略；Firefox会认为是文本节点
 //解决方法： 遍历节点的时候，使用nodeType nodeValue滤除空白、换行、tab
10 hasChildNode()

3. 节点信息

 nodeType   //元素：1 属性：2  文本：3  文档：9
 nodeName   //元素：大写标签名  属性：属性名  文本：#text
 nodeValue

4. 修改节点

 appendChild(newNode)
 insertBefore(newNode [, refNode])
 replaceChild(newNode [, refNode])
 removeChild(childNode)

 document.createElement()
 document.createTextNode()
 document.createDocumentFragment()
 getAttribute(name)
 setAttribute(name, value)

 innerHTML

5. 克隆节点

 cloneNode(boolean deep) //默认false，只复制当前节点； true，复制当前节点和其子节点
 //兼容问题：IE下会复至节点的事件处理程序
 //解决方案：复制之前最好先移除事件处理程序

6. 特殊集合

 document.forms //返回所有from元素集合
 document.images //返回所有img元素集合
 document.links //返回所有带href属性的a元素集合
 document.anchors //返回所有带name属性的a元素集合

 //兼容问题：Firefox不支持用()类似，doucment.forms(name)访问集合里的元素
 //解决方案：统一用下标的形式获取集合里的元素，document.forms[name]

7. 元素属性

 id
 style       //style.cssText  批量操作样式
 className
 title

 //兼容问题： IE7及以前版本通过setAttribute设置class和style，无效
 //解决方案：使用className和style设置其值

8. 动态script、link、style

 //动态加载文件
 var script = document.createElement('script');
 style.type = 'text/javascript';
 script.src = 'your.js';
 document.body.applendChild(script);

 var link= document.createElement(link);
 link.rel = 'stylesheet';
 link.type = 'text/css';
 link.href = 'your.css';
 document.getElementsByTagName('head')[0].appendChild(link);

 //动态创建脚本或样式
 var code,
     script = document.createElement('script');
 script.type = 'text/javascript';
 code = '(function(){//...})();';
 try {
     script.appendChild(document.createTextNode(code));
 } catch (e) {
     script.text = code;
 }
 document.body.applendChild(script);

 //兼容问题：safari 3.0之前版本不支持text,且IE将script视为一个特殊元素，不允许DOM访问其子节点
 //解决方案：除IE外所有浏览器支持创建文本节点的方法，IE下使用text属性来设置

 var code,
     style = document.createElement('style');
 style.rel = 'stylesheet';
 style.type = 'text/css';
 code = '(function(){//...})();';
 try {
     style.appendChild(document.createTextNode(code));
 } catch (e) {
     style.stylesheet.cssText = code;
 }
 document.getElementsByTagName('head')[0].appendChild(style);

 //兼容问题：IE将style视为一个特殊元素，不允许DOM访问其子节点
 //解决方案：除IE外所有浏览器支持创建文本节点的方法，IE下使用styleSheet.cssText属性来设置

9. 操作table

 //table的属性、方法
 caption
 tHead
 tBodies
 tFoot
 createCaption
 deleteCaption
 createThead
 createTFoot
 deleteThead
 deleteTFoot

 //tbody的属性、方法
 insertRows(pos) //兼容问题：pos：-1表示追加一行，IE默认为-1，Firefox无默认值； //解决方法：务必指定所以位置
 deleteRows(pos)
 rows

 //tr的属性、方法
 insertCells(pos)
 deleteCells(pos)
 cells

 //兼容问题：IE中table和tr不能使用innerHTML来创建内容
 //解决方法：table、tr不要使用innerHTML来创建内容

10. 操作select/option

 //options的属性
 selectedIndex

 //option的属性、方法
 text
 value
 index
 selected

 elmSelect.options.add(new Option(name, value))
 elmSelect.options.remove(index)
 elmSelect.options[index]

 //删除所有option
 elmSelect.options.length = 0

.Thinking

最后获取集合对象，HTMLCollection（如：document.getElementsByTagName()）、NodeList（如：element.childNodes）、NamedNodeMap（如：element.attributes）要注意，这些都是“动态的”，每当文档发生变化时，他们就会更新与文档同步。

 //操作这些集合对象很耗费性能，每当文档变化时，集合对象都会更新

 //Maybe
 var elms = document.getElementsByTagName('div');

 for (var i = 0; i < elms.length; i++) {
     //文档操作
 }

 //Better
 for (var i = 0, len = elms.length; i < len; i++) {
     //文档操作
 }

网页交互涉及到最多操作的地方就是DOM节点，一定要把这些基本的方法烂熟于心。如果项目不要求性能的情况，我们可以大胆使用JS第三方库。请记住不要频繁操作DOM节点，尽量一次性完成DOM节点的修改，将性能损耗降到最低，因为会引起页面的Reflow（回流）和Repaint（重绘）。

Refrence： http://www.quirksmode.org/dom/core/