js dom操作方式

DOM
一:结点信息 
1.nodeType返回节点的类型
元素节点返回1
属性节点返回2
文本节点返回3


2.nodeValue返回结点的值
元素结点返回null
属性结点返回undefined 
文本结点返回文本内容


3.nodeName属性获得结点名称
对于元素结点返回的是标记名称<a herf><a>返回的是"a" 
对于属性结点返回的是属性名称,如：class="test" 返回的是test 
对于文本结点返回的是文本的内容 
4.hasChildNodes()判断是否有子结点


5.tagName属性返回元素的标记名称   -----这个属性只有元素结点才有，等同于元素结点的nodeName属性 


二:节点关系
childNodes 属性子节点数组
parentNode 指向父节点
previousSibling引用下一个兄弟结点
nextSibling 引用上一个兄弟结点 

document.getElementById()
docuemnt.getElementByTagName
docuemnt.getElementsByClass


三:处理属性节点
利用setAttribute()方法给元素结点添加属性 
使用getAttribute()方法获得属性值


五.处理文本结点
innerHTML和innerText属性，这两个方法相信大家都很熟悉,不介绍了,值得注意的是无论是ie还是firefox都容易把空格、换行、制表符等当成文本结点。所有一般通过element.childNodes[i]引用文本结点的时候，一般要处理：

<script language"javaScript" type="text/javascript">
function cleanWhitespace(element)
{
for(var i=0; i<element.childNotes.length; i++)
{
var node = element.childNodes[i];
if(node.nodeType == 3 && !/\S/.test(node.nodeValue))
{
node.parentNode.removeChild(node);
}
}
}
</script> 


六.改变文档的层次结构
document.createElement()方法创建元素结点
eg:document.createElement("span")
document.createTextNode()方法创建文本结点
eg:document.createTextNode(" "); //注:他不会通过html编码，也就是说这里创建的不是空格，而是字符串  
appendChild()方法追加孩子节点
eg:parentElement.appendChild(childElement);
insertBefore()方法在元素前面插入子节点 
eg:parentNode.insertBefore(newNode,referenceNode); 
使用replaceChild方法取代子结点
-parentNode.replaceChild(newNode,oldNode); 
cloneNode方法复制结点
--node.cloneNode(includeChildren);
--includeChildren为bool，表示是否复制其子结点
使用removeChild方法删除子结点 
parentNode.removeChild(childNode);