<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");
//自動函數(shù)
(function(){
console.log(ele.children); //該節(jié)點所有的孩子
console.log(ele.firstElementChild); //第一個孩子
console.log(ele.lastElementChild); //最后一個孩子
console.log(ele.firetElementChild.nextElementSibling); //第一個孩子的下一個兄弟
console.log(ele.childElementCount); //子元素的個數(shù)
(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>
