常用DOM整理

　　js在操作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中存在不兼容，因此要做一些簡單的封裝處理。

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　10

　　11

　　12

　　13

　　14

　　15

　　16

　　17

　　18

　　19

　　20

　　21

　　22

　　23

　　24

　　25

　　26

　　27

　　28

　　29

　　30

　　31

　　32

　　33

　　34

　　35

　　36

　　37

　　38

　　39

　　40//=================

　　function getElementChildren(element) {

　　var children = [],

　　oldChildNodes = element.childNodes;

　　for(var i=0, len=oldChildNodes.length; i

　　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元素的樣式

　　?

　　1

　　2

　　3

　　4

　　5

　　6

　　7

　　8

　　9

　　10

　　11

　　12

　　13

　　14

　　15

　　16

　　17

　　18

　　19//=========================

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

　　}

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