<html>
<head>
</head>
<body>
<div class="test" id="first">
<span>first test</span>
</div>
<div class="test" id="second">second</div>
<div class="test" id="third">third</div>
<div class="test" id="four">four</div>
<div class="test" id="five">five</div>
<div class="test" id="six">six</div>
</body>
<script>
var $ = function (id){
return document.querySelector(id);
}
var ele = $("#wrapper");
//自动函数
(function(){
console.log(ele.children); //该节点所有的孩子
console.log(ele.firstElementChild); //第一个孩子
console.log(ele.lastElementChild); //最后一个孩子
console.log(ele.firetElementChild.nextElementSibling); //第一个孩子的下一个兄弟
console.log(ele.childElementCount); //子元素的个数
(function(){
console.log(ele.parentNode); //body
console.log(ele.childNodes); // 13 实时表示 包括两部分 text和 comment
console.log(ele.firstChild); //
console.log(ele.lastChild); //
})
var ele_first = $("#first");
console.log(ele_first.nextSibling); //该元素的下一个兄弟
console.log(ele_first.nextElementSibling.nextSibling); //下一个兄弟的下一个兄弟
console.log(ele_first.previousSibling); // 前一个兄弟
}
)();
</script>
</html>
