3、操作DOM节点有以下的方法：

1     // appendChild 讲解点添加到末尾，若该节点已在DOM结构中，则将其重新放置
2      var node = elementNode.appendChild(newNode);
3      node === newNode; // true
4      var node2 = elementNode.appendChild(otherNode.firstChild);
5      node2 === elementNode.lastChild; // true
6      node2 === otherNode.firstChild; // false
1      //insertBefore，将节点插入到某一节点前面
2       var node = elementNode.insertBefore(newNode， null);
3       node === elementNode.lastChild; // true
4       var node2 = elementNode.insertBefore(newNode， elementNode.firstChild);
5       node2 === elementNode.firstChild;// true
1     // replaceNode 使用新节点替换旧子节点，返回被替换节点
2       var node = elementNode.replaceChild(newNode， elementNode.lastChild);
1     // removeChild，想要删除某节点必须通过该节点的父级元素
2       var node = elementNode.removeChild(elementNode.firstChild);
3       elementNode.parentNode.removeChild(elementNode);
1     //cloneNode，该方法只会复制元素中的html特性，
2       //IE中有一bug，他会复制元素的事件处理程序，在使用该方法时好将事件处理程序去掉
3       var node = elementNode.cloneNode(true);
4       node.childNodes.length > 0 // true
5       var node1 = elementNode.cloneNode(false);
6       node1.childNodes.length === 0 //false

　　4、document对象是HTMLDocument类型的实例，所有浏览器中都可以访问HTMLDocument类型的构造函数和原型。document中访问子节点有如下快捷方式：

 

1         document.documentElement // 指向<html>元素
2       document.body // 指向body元素
3       document.doctype //指向<!DOCTYPE>的引用，IE8之前将该元素当做Node.COMMENT_NODE类型，IE9、FF、Chrom将该元素作为document的第一个子节点
4       document.head || document.getElementsByTagName('head') //HTML5中新加的属性

 

　　5、document.getElementById('id')，IE8及较早版本中不区分id的大小写；IE7及早期版本中有bug:

 

1     <input type="text" name="element" />
2     <div id="element"></div>
3     // 元素a拥有name与某元素b的id重复，且在a在b之前，则调用该方法会返回a元素
4       document.getElementById('element'); // input元素