前言:
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 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+$/,'');
}
以上所述就是本文的全部内容了,希望大家能够喜欢。