常用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中存在不兼容，因此要做一些简单的封装处理。
//=================
functiongetElementChildren(element){
varchildren=[],
oldChildNodes=element.childNodes;
for(vari=0,len=oldChildNodes.length;i<len;i+=1){
if(oldChildNodes[i].nodeType==1){
children.push(oldChildNodes[i]);
}
}
returnchildren;
}
//==================
functiongetElementNext(element){
varnext=element.nextSibling||null;
if(next){
if(next.nodeType==1){
returnnext;
}else{
returnarguments.callee(next);
}
}else{
thrownewError("下一个兄弟元素不存在！");
}
}
//======================
functiongetElementPrev(element){
varprev=element.previousSibling||null;
if(prev){
if(prev.nodeType==1){
returnprev;
}else{
returnarguments.callee(prev);
}
}else{
thrownewError("上一个兄弟元素不存在！");
}
}
2、操作DOM元素的样式
//=========================
functiongetElementStyle(element,styleName){
if(typeofgetComputedStyle!='undefined'){
returngetComputedStyle(element,null)[styleName];
}else{
returnelement.currentStyle[styleName];
}
}
//==========================
functionaddClass(element,className){
element.className+=className;
}
//==========================
functionremoveClass(element,removeClassName){
varclassStr=element.className;
element.className=classStr.replace(removeClassName,'').split(/\s+/).join('').replace(/^\s+/,'').replace(/\s+$/,'');
}
以上所述就是本文的全部内容了，希望大家能够喜欢。