Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
DOM = Document Object Model,中文即「文件物件模型」。
建立 practice/dom.html
檔案,內容如下:
瀏覽器解析以上 html 後,產出的 DOM tree:
用瀏覽器開啟檔案,按下 Cmd + Option + i
或 F12
,如下圖的 Elements 頁籤,展開看看,這就是瀏覽器將你寫的 html 解析出來的 DOM Tree:
試著加上以下的原始碼(可放在 </body>
之前):
再到上述提的 Elements 頁籤觀察看看,出了什麼問題?
javascript 本身並沒有 window、document 這種物件,這是瀏覽器解析完之後,提供給開發人員使用的,例如:
window.alert
document.getElementById
document.setAttribute
document.getAttribute
以上這些其實都是 DOM Scripting,。
以這個 html 為例:
往內層找元素,回傳的會是 NodeList,可以使用 .forEach()
函式。
例:
找到第一層的子元素。回傳的會是 HTMLCollection,無法使用 .forEach()
函式。
例:
找到第一個子元素、找到最後一個子元素。
例:
透過 querySelector 往內層找,以及使用 :nth-child()
:
例:
找到同層的前一個元素。
例:
找到同層的下一個元素。
例:
找到最近的父元素。
例:
往父層找,找到指定的元素。
例: