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;

}