常用DOM整理_javascript技巧-js教程-PHP中文网

常用DOM整理_javascript技巧

php中文网

发布： 2016-05-16 15:54:46

原创

1303人浏览过

前言：

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、获取节点信息

今客CRM客户管理系统 v18.1

今客CRM客户管理系统主要是为了帮助企业解决在日常工作中遇到的客户管理等难题而开发，通过今客CRM客户管理系统可以对企业事务中的不同功能进行操作，用户通过自定义字段类型可以达到适合不同企业的需求。在今客客户关系管理系统中管理着一个企业最为完整的客户信息，全面的客户信息覆盖在企业的市场营销、销售和服务与技术支持等企业整个前端办公领域的各个环节里。它为企业带来附加价值是不可限量的。今客CRM客户管理系

查看详情

获取元素或者属性节点的标签名称：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+$/,'');
}

登录后复制

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