DOM编程艺术（节点操作）

参考书：JavaScript DOM编程艺术（第2版）

大纲：

-获取节点

-创建节点

-修改节点

-插入节点

-删除节点

-innerHTML

一、获取节点

1、通过关系获取节点：

*父子关系

   -parentNode

   -firstChild / lastChild / childNodes

   -childNodes / children

*兄弟关系

   -previousSibling / nextSibling

   -previousElementSibling / nextElementSibling

存在问题：通过节点关系来获得元素的可维护性差。

2、通过接口获取节点：

*getElementById

*getElementsByTagName

*getElementsByClassName

*querySelector / All

name	only document	sole	live
getElementById	Y	Y
getElementsByTagName			Y
getElementsByClassName			Y
querySelectorAll
querySelector		Y

二、创建节点
document.createElement(tagName)
三、修改节点
1、textContent                （IE9以下不支持）
element.textContent         节点及其后代节点的文本内容
2、innerText        (不是W3C规范，Firefox不支持)

if(!('innerText' in document.body)){
HTMLElement.prototype.__defineGetter__("innerText", function(){
return this.textContent;
});
HTMLElement.prototype.__defineSetter__("innerText",function(s){
return this.textContent = s;
});
}

四、插入节点
1、appendChild        在指定元素的末尾插入节点
element.appendChild(achild);
2、insertBefore         在指定元素的前面插入节点
三个参数：（1）新元素     newElement
                    （2）目标元素     targetElement
                    （3）父元素  ：目标元素的父元素    parentElement
parentElement.insertBefore(newElement,targetElement)
不必搞清楚父元素到底是哪个，因为targetElement元素的parentNode属性值就是它。在DOM里，元素节点的父元素必须是另一个元素节点（属性节点和文本节点的子元素不允许是元素节点。）
targetElement.parentNode.insertBefore(newElement,targetElement)

3、自己写insertAfter函数

//编写insertAfter函数,功能是在现有元素后插入一个新元素
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}

五、删除节点
element.removeChild(child)
六、innerHTML
element.innerHTML     
存在问题：内存泄露
                    安全问题
建议仅用于新节点。