节点的访问关系,是以属性的方式存在的。DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问。
一、关系
1、父节点 parentNode
调用者就是节点。一个节点只有一个父节点。调用方式:节点.parentNode
2、兄弟节点
nextSibling
nextElementSibling
previousSibling
previousElementSibling
nextSibling:调用者是节点。IE678中指下一个元素节点(标签)。在火狐谷歌IE9+以后都指的是下一个节点(包括空文档和换行节点)。
nextElementSibling:在火狐谷歌IE9都指的是下一个元素节点。
总结:在IE678中用nextSibling,在火狐谷歌IE9+以后用nextElementSibling
下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling
previousSibling:调用者是节点。IE678中指前一个元素节点(标签)。在火狐谷歌IE9+以后都指的是前一个节点(包括空文档和换行节点)。
previousElementSibling:在火狐谷歌IE9都指的是前一个元素节点。
总结:在IE678中用previousSibling,在火狐谷歌IE9+以后用previousElementSibling。
下一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling
3、子节点
firstChild:调用者是父节点。IE678中指第一个子元素节点(标签)。在火狐谷歌IE9+以后都指的是第一个节点(包括空文档和换行节点)。
firstElementChild:在火狐谷歌IE9都指的第一个元素节点。
第一个子节点=父节点.firstElementChild || 父节点.firstChild
lastChild:调用者是父节点。IE678中指最后一个子元素节点(标签)。在火狐谷歌IE9+以后都指的是最后一个节点(包括空文档和换行节点)。
lastElementChild:在火狐谷歌IE9都指的最后一个元素节点。
第一个子节点=父节点.lastElementChild|| 父节点.lastChild
4、所有字节点
childNodes
children
childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点 (
火狐谷歌等高本版会把换行也看做是子节点
nodeType==1时才是元素节点(标签)
nodeType == 1 表示的是元素节点 记住 元素就是标签
nodeType == 2 表示是属性节点 了解
nodeType == 3 是文本节点 了解
子节点数组 = 父节点.childNodes; 获取所有节点。
children:非标准属性,它返回指定元素的子元素集合。
但它只返回HTML节点,甚至不返回文本节点,虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所有浏览器的支持。
children在IE6/7/8中包含注释节点
在IE678中,注释节点不要写在里面。
子节点数组 = 父节点.children; 用的最多。
节点自己.parentNode.children[index];随意得到兄弟节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不要的</title>
</head>
<body>
<div id="box1">
<div id="box2" ></div>
<div id="box3"></div>
<div dir="box4"></div>
<div dir="box5"></div>
</div>
<script type="text/javascript">
// 获取 box2结点
var box2=document.getElementById('box2');
// 根据 parentNode 获取 box1结点
var box1=box2.parentNode;
//兄弟节点 获取下一个节点
var box3=box2.nextElementSibling;
console.log(box3);
//获取box3上一个节点
var newbox2=box3.previousElementSibling;
console.log(newbox2);
//子节点
//获取box1 第一个子节点
var firstbox=box1.firstElementChild;
console.log(firstbox);
//获取 box2最后一个子节点
var lastbox=box1.lastElementChild;
console.log(lastbox);
//所有子节点
var allchild=box1.childNodes;
console.log('allchild='+allchild);
var all=box1.children;
console.log('all='+all);
</script>
</body>
</html>