常用DOM整理

前言：

html为document搭建了一棵DOM树，这棵树就是有一系列Node节点所构成的。他为我们定义了文档的结构。

Node类型：

Node.ELEMENT_NODE（1）;      //元素节点较常用
Node.ATTRIBUTE_NODE（2）;    //属性节点较常用
Node.TEXT_NODE（3）;          //文本节点较常用
Node.CDATA_SECTION_NODE（4）;
Node.ENTITY_REFERENCE_NODE（5）;
Node.ENTITY_NODE（6）;
Node.PROCESSING_INSTRUCTION_NODE（7）;
Node.COMMENT_NODE（8）;
Node.DOCUMENT_NODE（9）;   //文档节点较常用
Node.DOCUMENT_TYPE_NODE（10）;
Node.DOCUMENT_FRAGMENT_NODE（11）;
Node.NOTATION_NODE（12）;

相关函数：

1、取得节点：

document.getElementById（"element"）;
document.getElementsByTagName（"element"）;         返回类数组对象
document.getElementsByName（"element"）;            返回类数组对象
document.getElementsByClassName（"className"）      返回类数组对象,IE7及以下并不支持；
document.querySelectorAll（"class" | "element"）    返回类数组对象

2、遍历节点

查找子节点：element.childNodes        返回类数组对象
查找第一个子节点：element.firstChild
查找最后一个子节点：element.lastChild
查找父元素：element.parentNode
查找前一个兄弟元素： element.previousSibling
查找后一个兄弟元素： element.nextSibling

3、获取节点信息

获取元素或者属性节点的标签名称：elementNode.nodeName
获取文本节点的内容：    textNode.nodeValue;
获取并设置元素节点的内容（可能会包含HTML标签）： elementNode.innerHTML
获取并设置元素节点的纯文本内容：element.innerText（IE） | element.textContent（FF）
获取属性节点的值：      attrNode.getAttribute（AttrName）;
设置属性节点的值：      attrNode.setAttribute（AttrName,AttrValue）;
获取节点的类型：        node.nodeType;
元素节点： 1；
属性节点： 2；
文本节点： 3；
文档节点： 9；
注释节点： 8；

4、操作节点

创建元素节点：       document.createElement（"element"）;
创建文本节点：       document.createTextNode（"text"）;
创建属性节点：       document.createAttribute（"attribute"）;
删除节点：               node.remove（）;
删除子节点：           parentNode.removeChild（childNode）;
插入节点：               parentNode.appendChild（childNode）; //插入到父节点的尾部
                             parentNode.insertBefore（newNode,existingNode） //插入到已存在节点的前面；
克隆节点：               node.cloneNode（[true]）     //传入true为深度复制
替换节点：               parentNode.replaceChild（newNode,oldNode）;

相关拓展：

1、由于IE低版本浏览器和其他浏览器在处理DOM中存在不兼容，因此要做一些简单的封装处理。

 //=================function getElementChildren（element） { var children = [], oldChildNodes = element.childNodes; for（var i=0, len=oldChildNodes.length; i<len; i+=1） { if（oldChildNodes[i].nodeType == 1） {children.push（oldChildNodes[i]）; } } return children;} //==================function getElementNext（element） { var next = element.nextSibling || null; if（next） { if（next.nodeType == 1） {return next; } else {return arguments.callee（next）; } } else { throw new Error（"下一个兄弟元素不存在！"）; }} //======================function getElementPrev（element） { var prev = element.previousSibling || null; if（prev） { if（prev.nodeType == 1） { return prev; } else { return arguments.callee（prev）; } } else { throw new Error（"上一个兄弟元素不存在！"）; }}

2、操作DOM元素的样式

//=========================function getElementStyle（element,styleName） { if（typeof getComputedStyle ！= "undefined"） { return getComputedStyle（element,null）[styleName]; } else { return element.currentStyle[styleName]; }} //==========================function addClass（element,className） { element.className += className;} //==========================function removeClass（element,removeClassName） { var classStr = element.className; element.className = classStr.replace（removeClassName,""）.split（/s+/）.join（" "）.replace（/^s+/,""）.replace（/s+$/,""）;}

以上所述就是本文的全部内容了，希望大家能够喜欢。