可以被操控的節點種類
父節點
子節點
相鄰節點
References
之前有提到Node的類型，包含element node、text node、document node…等等。
為接下來的說明，先講解元素之間的關係，並將下面一組畫成示意圖：
<html>
<body>
<div>
</div>
<div>
</div>
</body>
</html>
<body>的parent是<HTML>，child是兩個<div>，而兩個<div>是相鄰的。
會回傳指定節點的父節點。如果指定的節點是Document，那麽再往上就會是null，如果是剛創建並未加上樹上的也會回傳null。在瀏覽器嘗試新增一個元素，但沒有指定這個元素要被放到哪，這時就只會是null。
這時把新增的div放進body，div的parentNode才會回傳值。
parentElement跟parentNode很相似，但parentElement只回傳Element。
使用document.documentElement會回傳document的根元素，也就是<HTML>，而document不是元素，因此對<HTML>用parentElement就會找不到任何東西，但如果使用parentNode，就回傳document。
接下來用這組範例：
<ul class = "data">
<li>hotpotFlavor: <i>Spicy Sichuan</i></li>
<li>hotpotIngredients:<i>Beef slices, Tofu, Enoki mushrooms, Napa cabbage</i></li>
<li>beveragePairing:<i>Jasmine tea</i></li>
</ul>
對指定的元素，回傳一組後代的HTMLCollection。如果子代是空的，會回傳一組空的Collection。
const data = document.querySelector('.data')
console.log(data.children)
對指定的元素，去取得後代的數量。
const data = document.querySelector('.data')
console.log(data.childElementCount)//3
如果想要選取所有子節點，那麽childNodes會是你的好朋友，且使用會回傳一個動態Nodelist。
const data = document.querySelector('.data')
console.log(data.childNodes)
對指定的元素回傳第一個子代元素。
const data = document.querySelector('.data')
console.log(data.firstElementChild)//li
對指定的元素回傳最後一個子代元素。
const data = document.querySelector('.data')
console.log(data.lastElementChild)//li
使用之後會回傳子代的第一個節點。
const data = document.querySelector('.data')
//剛剛回傳的Nodelist中，第一個是textNode
console.log(data.firstChild)//#text
使用之後會回傳子代的最後一個節點。
const data = document.querySelector('.data')
console.log(data.lastChild)//#text
更新子範例的內容，為每一個<li>新增名字。
<ul class="data">
<li class='one'>hotpotFlavor:<i>Spicy Sichuan</i></li>
<li class='two'>hotpotIngredients:<i>Beef slices, Tofu, Enoki mushrooms, Napa cabbage</i></li>
<li class='three'>beveragePairing:<i>Jasmine tea</i></li>
</ul>
對指定的A元素，去選A元素前面的B元素。
const two = document.querySelector('.two')
console.log(two.nextElementSibling)//li.one
對指定的A元素，去選A元素後面的B元素。
const two = document.querySelector('.two')
console.log(two.nextElementSibling)//li.one
選指定元素前面的節點。
const two = document.querySelector('.two')
console.log(two.previousSibling)//#text
選指定元素前面的節點。
const two = document.querySelector('.two')
console.log(two.previousSibling)//#text
iThome鐵人賽
看影片追技術