1、 原生JS中nodeType属性
节点属性类型：
nodeType
任何的HTML元素，都有nodeType属性，值有1~11，这里精简到了5个：
1： 元素节点
3： 文本节点
8： 注释节点
9： document节点
10: DTD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点</title>
</head>
<body>
<div id="box"> 节点</div>
<script>
var box = document.getElementById("box");
alert(box.nodeType); //弹出 1
alert(box.childNodes[0].nodeType); //3
</script>
</body>
</html>
只有alert(document.nodeType); 结果为 9。
2、原生JS中的节点关系-childNodes
我为了好记叫（儿子数组）
任何节点都有childNodes属性，是一个类数组对象，存放着所有自己的儿子。
注意，这里有重大兼容性问题：空白文本现象
结构
<div id="box">
<p></p>
</div>
Chrome、IE9、IE10……高级浏览器，认为：
alert（box.childNodes[0].nodeType ） //3
高级浏览器认为box的大儿子是文本节点。当然是空文本。
IE6、7、8等低级浏览器认为：
alert（box.childNodes[0].nodeType） //1
IE6、7、8认为 box 的大儿子是p。
所以为了没有兼容问题，需要遍历节点的时候，HTML结构就不能有空格。
一个面试题：
<div id="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
document.getElementById(“box”).childNodes.length; //高级浏览器9，低级浏览器4
怎么解决这个差异呢？放弃原有的数组，重新遍历儿子数组，把所有nodeType为1的元素组成一个新的数组。
var childs = [];
for(var i = 0 ; i < box.childNodes.length ; i++){
if(box.childNodes[i].nodeType == 1){ //可以为一也可以为三五八，筛选条件不同。
childs.push(box.childNodes[i]);
}
}
childs[1].style.background = "red";
firstChild属性、lastChild属性： 也不好用，IE6、7、8认为firstChild是节点， 而Chrome认为firstChild是空文本
3、原生JS中的节点关系-parentNode
我为了好记叫（父亲数组）
注意 childNodes 儿子可以有很多 ，parendNode 父亲只能有1个
4、previousSibling、nextSibling
previous | 英[ˈpri:viəs] 以前的; 先前的; 过早的; （时间上） 稍前的;
sibling | 英[ˈsɪblɪŋ] 同胞兄弟，姐妹; [生] 同科。
previousSibling、nextSibling
上一个同胞兄弟，下一个同胞兄弟。
<div id="box">
<p>AAA</p>
<p>BBB</p>
<p>CCC</p>
<p>DDD</p>
</div>
ps[2].previousSibling //低级浏览器就是BBB那个p，高级浏览器是空文本节点
让一个 box 序列上面全部变红。box 下面所有盒子变红雷同。
让 box 节点的之前的所有节点，都变红，原生 JS 挺难的：
var prev = box;
while(prev = prev.previousSibling){ //一直查找兄弟的兄弟，直到遇见 null。
暗含一个 for 迭代器if(prev.nodeType == 1){
prev.style.background = "red";
}
}
jQuery 写法：
$("#box").prevAll().css.backgoround = ""red;
原生 JS 中的节点关系
网友评论