<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function getDom01(){
//var divs = document.querySelectorAll("#box > div");
//var div = document.querySelector("#box1");
//得到子节点 和父节点
//得到父节点 level by level
var div = document.getElementById("box1");
var p = div.parentNode;
console.log(div);
console.log(p);
//得到子节点
var c = div.childNodes;
/* for(var i=0; i<c.length;i++){
console.log(c[i].nodeName);
}*/
var pre = div.previousSibling;
console.log(pre);
var next = div.nextSibling;
console.log(next);
}
</script>
</head>
<body>
<input type="button" onclick="getDom01()" value="getDom01">
<hr>
<div id="box">
<div id="box1">
<span>this is a span in div 01</span>
<span>this is a span in div 02</span>
</div><div id="box2">
<span>this is a span in div 01</span>
<span>this is a span in div 02</span>
</div>
<div id="box3">
<span>this is a span in div 01</span>
<span>this is a span in div 02</span>
</div>
<div id="box4">
<span>this is a span in div 01</span>
<span>this is a span in div 02</span>
</div>
</div>
</body>
</html>