常用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+$/,'');
}

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


有用  |  无用 取消

猜你喜欢