DIV CSS 佈局教程網

常用DOM整理
編輯:關於JavaScript     

前言:

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

以上所述就是本文的全部內容了,希望大家能夠喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved