当前位置：首页 > 资讯 > 技术文档

常用DOM整理

时间：2021-07-17 12:46 编辑：来源：阅读：
扫一扫，手机访问

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

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

全部评论(0)

上一篇：BootstrapTable+KnockoutJS相结合实现增删改查解决方案（三）两个Viewmodel搞定增删改查
下一篇：22个国外的Web在线编辑器收集

资讯排行榜
更多>>