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返回对被删除节点的引用。要移除的节点必须是父节点的直接子节点。