網頁中的<script>
基本上，JavaScript透過控制DOM來控制網頁。若要在網頁中直接寫進JavaScript語法（而非引用獨立js檔），就要將程式碼寫在<script>標籤中，且不能將其放在<head>標籤內，否則會無效，因為：
- 基於瀏覽器解析網頁的順序，此時會暫停解析，先執行<script>標籤中的內容。
- 因為尚未解析網頁本體，所以JavaScript語法中想抓取的對象（如網頁中某標籤的id），就根本找不到。
DOM節點的抓取與類型
常見的抓取方法如下
- document.getElementById('id名稱') //類似css選取器抓id，不用井字號
- document.getElementsByTagName('tag名稱') //可抓全部同名標籤
- 以下兩個效果很像
- document.getElementsByClassName('class名稱') //抓class，抓回類似陣列
- document.querySelector('選取器條件') //類似css選取器class
- querySelector回傳靜態的靜態NodeList，不會跟著DOM改變。而getElementsByClassName是動態的HTML元素，會跟著DOM改變。
- document.querySelectorAll('選取器條件') //可抓全部同名元素（class與id），抓回類似陣列
例
指定變數i之querySelector「x」中的「y」。
/<script>
let i = document.querySelector("#x")
let j = i.querySelector("#y")
console.log(i)
console.log(j)
/</script>
DOM節點的查找與關係
如DOM-Tree所示，DOM節點具有層級概念。節點與節點之間是上下或平行的關係。
- 上下（父子）關係：除了根部的document，每個節點都有一個上層（父）節點，反之，就是下層（子）節點。
- 平行（兄弟）關係：節點之間擁有同一上層（父）節點，就是平行（兄弟）節點。
此外，重要的屬性具列如下：
- Node.childNodes：各節點皆有，寫成「node.hasChildNodes()」檢查有無子節點。
- Node.firstNodes：取得第一個子節點。
- Node.lastNodes：取得最後一個子節點。。
- Node.parentNodes：取得父元素。
- Node.previousSibling：取得同層的前一個節點。
- Node.nextSibling：取得同層的後一個節點。
iThome鐵人賽
看影片追技術