Node節點

1、Node:節點
元素節點->HTML標簽
文本節點->文字 但是在標準瀏覽器(除了IE6~8)中會把空格和換行都當做文本節點來處理
註釋節點->註釋
document

2、節點的特征
元素節點:
nodeType->1 nodeName->大寫的標簽名 nodeValue->null
文本節點:
nodeType->3 nodeName->#text nodeValue->文本內容
註釋節點:
nodeType->8 nodeName->#comment nodeValue->註釋內容

document:
nodeType->9 nodeName->#document nodeValue->null


3、節點之間關係的屬性
childNodes:獲取所有的子節點(既有元素的,也有文本和註釋的)
children:獲取所有的元素子節點 ->在IE6~8下我們獲取的結果不完全準

parentNode:獲取父親節點
previousSibling:獲取上一個哥哥節點(可能是元素也可能文本或者註釋)
previousElementSibling:獲取上一個元素哥哥節點(肯定是元素節點) ->在IE6~8下不相容
nextSibling:獲取下一個弟弟節點
nextElementSibling:獲取下一個元素弟弟節點 ->在IE6~8下不相容
firstChild:獲取所有子節點中的第一個(不一定是元素)
firstElementChild:獲取所有元素子節點中的第一個(一定是元素節點) ->在IE6~8下不相容
lastChild:獲取所有子節點中的最後一個(不一定是元素)
lastElementChild:獲取所有元素子節點中的最後一個(一定是元素節點) ->在IE6~8下不相容

//獲取指定元素下的所有元素子節點

//思路：先獲取所有的子節點,然後我們在把其中的元素子節點(nodeType等於1)單獨的獲取到

function queryChildren(curEle) {
var ary = [];//->先弄個容器用來存儲我們需要的元素子節點
var allNodes = curEle.childNodes;//->獲取所有的子節點
//迴圈遍歷每一個子節點,把元素節點單獨的存儲到ary這個容器中
for (var i = 0; i < allNodes.length; i++) {
var cur = allNodes[i];
if (cur.nodeType === 1) {
//ary.push(cur);
ary[ary.length] = cur;
}
}
return ary;
}
//獲取上一個元素哥哥節點
function prev(curEle) {
//相容的話直接用,函數體中遇到return就不在執行了
if (curEle.previousElementSibling) {
return curEle.previousElementSibling;
}
//不相容我們自己用while迴圈一級級的查找
var pre = curEle.previousSibling;
while (pre && pre.nodeType !== 1) {//->獲取的節點存在並且不是元素節點,我們就一直迴圈向上找
pre = pre.previousSibling;
}
return pre;
}