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;
}