用户  色彩  IF  90后  or  获得  空格  密码

您所在的位置:小祥子 » 编程 » JavaScript » 正文

常用DOM整理

时间:2015-06-16 编辑:苏夏 来源:本站整理
常用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+$/,''); }
关键词:

相关文章