常用DOM整理

常用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');

 删除节点：

yDDfzjWpmt

node.remove();

删除子节点：           parentNode.removeChild(childNode);

插入节点：           &nb

http://

sp;   parentNode.appendChild(childNode);  //插入到父节点的尾部

parentNode.insertBefore(newNode,existingNode)  //插入到已存在节点的前面；

克隆节点： &n

http://

bsp;             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

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

}

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

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

}

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。