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+$/,'');
}
以上所述就是本文的全部內容了，希望大家能夠喜歡。