DOM技术

一、DOM概述

1、DOM节点树

• 文档节点：文档本身是文档节点
• 元素节点：所有 HTML 元素
• 文本节点：HTML标记中的文本
• 属性节点：HTML标记属性是一个属性节点
• 注释节点：注释

2、节点属性和方法
http://www.w3school.com.cn/jsref/dom_obj_all.asp

1、节点属性

• element.nodeType：返回元素的节点类型。
• element.nodeName ：返回元素的名称。
• element.nodeValue ：设置或返回元素值。
• element.attributes：返回元素属性的属性节点列表。可以使用 length 属性来确定属性的数量，就能遍历所有的属性节点并提取信息。
• element.ownerDocument 返回元素的根元素（文档对象）。
• element.parentNode：返回当前元素的父节点。如果当前节点是文档节点，则parentNode属性为null。
• element.childNodes：返回当前元素所有子节点的列表，按书写顺序排序。
• element.firstChild：返回元素的首个子节点。
• element.lastChild 返回元素的最后一个子节点。
• element.previousSibling：返回当前节点的前一个兄弟节点，也就是相同节点树层级的前一个元素。如果本身为第一个节点，则该属性值为null。
• element.nextSibling ：返回位于相同节点树层级的下一个节点。如果本身为最后一个节点，则该属性值为null。
• element.innerHTML =text：设置或返回元素的内容。

2、节点方法

• element.appendChild()：语法：document.getElementById(“myList”).appendChild(newListItem);向元素添加新的子节点，作为最后一个子节点。
• element.cloneNode( [deep] )：克隆档期节点，得到当前节点的副本。如果要克隆所有后代及其属性，要把 deep 参数设置 true，否则设置为 false。
• element.hasChildNodes()：语法：document.getElementById(“myList”).hasChildNodes()。如果元素拥有子节点，则返回 true，否则 false。
• element.insertBefore()： 语法：document.getElementById(“myList”).insertBefore(newItem,existingItem);在指定的已有的子节点之前插入新节点。
• element.removeChild()：语法：document.getElementById(“myList”).removeChild(existingItem);从元素中移除子节点。
• element.replaceChild()：语法：document.getElementById(“myList”).replaceChild(newnode,oldnode);替换元素中的子节点。
• element.isSupported()：如果元素支持指定特性，则返回 true。

二、获取节点

1、获取特定节点

1、获取根节点
document.documentElement

2、获取body节点
document.body

3、获取指定元素节点

• id：document.getElementById( sId );
• name：document.getElementByName( sName );

• tagName：document.getElementByTagName( sTagName );

  getElementByName和getElementByTagName获得的是节点集合，可用下标法操作单个节点。

4、通过CSS获取指定元素节点

• 通过类：document.getElementByClassName( cssClassName )；
• 通过选择器：document.querySelector( selector ); //返回一个子孙元素
• 通过选择器：document.querySelectorAll( selector ); //返回所有元素的集合。

2、获取相关节点
获取与当前节点有关的节点，可通过以下属性获取：（参照一、2）

• 父节点——parentNode：document.getElementById(“item1”).parentNode;
• 首节点——firstChild：document.getElementById(“myList”).firstChild;
• 末节点——lastChild：document.getElementById(“myList”).lastChild;
• 前一个兄弟结点——previousSibling：document.getElementById(“item2”).previousSibling;
• 后一个兄弟结点——nextSibling：document.getElementById(“item1”).nextSibling;
• 所属的HTML文档节点——ownerDocument：document.getElementById(“demo”).ownerDocument;
• 当前节点的所有子节点——childNodes：document.body.childNodes;

3、属性节点的访问方法

1、attributes集合的属性和方法：

• 属性——length：用于获取或设置attributes集合中包含的对象个数。
• 方法——getNamedItem( name )：从 attributes集合中获取具有指定名称的属性节点。
• 方法——removeNamedItem( nodeName ) 从 attributes集合中移除指定的属性节点。
• 方法——setNamedItem( node )：把一个属性节点添加到attributes集合中。

2、访问和操作属性节点的DOM方法
3种方法访问：

• getAttribute( name )，用于获取元素节点的指定属性的值。等价于attr.getNamedItem( name ).nodeValue。
• setAttribute( nodeName, newValue )，用于设置元素节点的指定属性值。等价于attr.getNamedItem( name ).nodeValue = newValue。
• removeAttribute( name )，用于从元素节点中移除给定的属性。等价于attr.removeNamedItem( Name )。

三、操作节点

http://www.runoob.com/jsref/dom-obj-all.html
操作节点主要包括 创建、插入、更新、删除。
1、创建节点
1）创建文本节点。
var btn=document.createTextNode(“Hello World”);

2）创建属性节点。创建 class 属性
var att=document.createAttribute(“class”);
并将class属性添加到 H1 元素中:
att.value=”democlass”;
document.getElementsByTagName(“H1”)[0].setAttributeNode(att);

3）创建元素节点。创建一个按钮。
document.createElement( tagName );
var btn=document.createElement(“BUTTON”);

4）创建注释节点。注释内容为text的注释节点。
var c=document.createComment(“text”);
并插入到html文档中
document.body.appendChild(c);

5）复制节点。
var oc = object.cloneNode( [bcloneChildren] );
其中bcloneChildren是boolean值，默认false，只复制节点本身，不包含其子节点。true则包含子节点。object为被复制的节点。

2、插入节点
1）追加子节点。
var ap = object.appendChild( oNode );
object是要追加的父节点，oNode是要追加的新节点。在父节点末尾插入新节点。如：

document.getElementById("myList").appendChild(newListItem);

2）插入子节点。
var ai = object.insertBefore( newItem, [existingItem] );
newItem是新节点。existingItem表示在此节点前插入节点。object是指定existingItem节点的父节点，如：

var node=document.getElementById("myList2").lastChild;
var list=document.getElementById("myList1");
list.insertBefore(node,list.childNodes[0]);

3、更新节点
var ar = object.replaceChild( newnode,oldnode );
newnode是要替换的新节点。oldnode是要被替换掉的节点。object是父对象。被替换的节点必须是父对象的直接子节点。新节点必须用1、创建节点 createXXX方法创建。如：

var textnode = document.createTextNode("Water");
var item = document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);

4、删除节点
var arm = object.removeChild( node );
removeChild返回对被删除节点的引用。要移除的节点必须是父节点的直接子节点。