JS中常用的DOM操作事件，包括有節點查找，鍵盤鼠標事件等等，本文內容介紹DOM的節點查找。
<script>
window.onload = function(){
//children 與 childNodes
console.log( document.body.children ); //包含7個節點的數組
console.log( document.body.childNodes ); //包含7個實節點，以及8個空節點組成的 長度為15的數組
//firstChild 與 firstElementChild
console.log( document.body.firstChild ); //返回第一個節點，空節點 (換行)
console.log( document.body.firstElementChild ); //返回第一個實節點 <h1>同學們：</h1>
//lastChild 與 lastElementChild
console.log( document.body.lastChild ); //返回第一個節點，空節點 (換行)
console.log( document.body.lastElementChild ); //返回最后一個實節點 <div class="girls">喬宛如</div>
//nextSibling 與 nextElementSibling
console.log( document.getElementById("xiaoming").nextSibling ); //空節點
console.log( document.getElementById("xiaoming").nextElementSibling ); //<div class="boys">李雷</div>
//previousSibling 與 previousElementSibling
console.log( document.getElementById("xiaoming").previousSibling ); //空節點
console.log( document.getElementById("xiaoming").previousElementSibling ); //<h1>同學們：</h1>
//parentNode 與 offsetParent
console.log( document.getElementById("hanFather").parentNode ); //返回直接父級 <div class="parents">
console.log( document.getElementById("hanFather").offsetParent ); //返回第一個有定位屬性的父級 <div class="parents_wrap"> 。。 如果沒有定位父級，則返回body
}
</script>
console.log輸出節點內容，元素內容
<body>
<h1>同學們：</h1>
<div class="boys" id="xiaoming">小明</div>
<div class="boys">李雷</div>
<div class="girls">韓梅梅</div>
<div class="parents_wrap">
<div> 韓梅梅父母：</div>
<div class="parents">
<div id="hanFather"> 父：韓小東</div>
<div> 母：劉瓊瑤</div>
</div>
</div>
<div class="girls">劉曉玲</div>
<div class="girls">喬宛如</div>
</body>