Day.23 「更加認識 DOM,並初次了解事件綁定」 —— JavaScript DOM
Day.23 「更加認識 DOM,並初次了解事件綁定」 —— JavaScript DOM
我們之前在 HTML 篇章有介紹 DOM,是 Document Object Model 的縮寫!
我們主要操作 DOM 來控制網頁內容
- Document 代表了整個 HTML 網頁
- Object 代表把網頁中每個部分節點都轉變成物件
- Model 代表用來表示物件之間的關係,形成容易理解的樹狀圖,也就是 DOM Tree
還記得它吧~
利用 DOM 取得文本內容
之前已經認識了網頁標籤,而現在我們要透過 JavaScript 來獲取我們的網頁節點!
假設我們要獲取 button
內的文本內容
1 |
|
獲取文本內容
- 可以使用
textContent
來獲取文本內容字的部分,同時也能依靠它來變更文本內容 - 可以使用
innerHTML
來獲取文本內容,與textContent
相比更方便常用,除了獲取到文本內容的字,連文本內容的標籤也會獲取,同時也能依靠它來變更文本內容與標籤
獲取節點
而獲取節點的方法也很多,我來講幾個比較常用的獲取方法~
- 透過
id
來獲取document.getElementById("");
,因為id
單一的特性,所以只會獲取到一個節點
1 |
|
- 透過 元素節點 來獲取
document.getElementsByTagName("");
,需注意因為 元素節點 是複數,所以會獲得一個類似陣列的物件,並以索引值代表順序
1 |
|
- 透過
class
來獲取document.getElementsByClassName("");
,需注意class
選擇器是複數,所以會獲得一個類似陣列的物件,並以索引值代表順序
1 |
|
- 與 jQuery 一樣方便的節點選擇器
document.querySelector("")
和document.querySelectorAll("")
,前面的是只會回傳第一個,後面的是只要符合條件的都會回傳,而這個回傳的是比較像陣列的 NodeList。需注意 的是,它的條件可以是 元素、id
、class
,所以跟 CSS 選擇器一樣,元素不需要前贅詞,id
需要前贅詞#
,class
需要前贅詞.
1 |
|
事件
事件就是使用者與瀏覽器互動的行為,如:點擊按鈕、滑鼠移動、控制視窗…等
我們可以事先在網頁內寫好 JavaScript 程式碼,當這些事件觸發時,就會執行程式碼,這也就是 JavaScript 負責互動的部分!
同樣的事件綁定也有很多種方法
寫在 HTML 內
這方法其實不太好,因為 HTML 結構與 JavaScript 行為牽連在一起,會比較不方便維護,但還是認識一下!
1 |
|
綁定事件
這是常用的方法,結構與行為分開
1 |
|
獲取到節點後綁定 onclick
點擊事件
1 |
|
瀏覽器執行順序
之前第二天有介紹 script
標籤通常都放在最下面,而不會放在 head
標籤內,是因為瀏覽器在執行的時候,是由上而下執行下來。
1 |
|
這時 btn
獲取到的物件節點就會回傳 null
,因為它找不到節點!
而寫在下面 </body>
標籤前時
1 |
|
就能正常回傳 <button id="btn">我是按鈕</button>
節點了
onload 事件
如果我一定要寫在上面呢?其實可以使用 onload
事件綁定,等網頁畫面執行完(DOM 已經完成)了,才執行程式碼
1 |
|
總結
終於要開始為我們網頁添加互動元素了!今天的 DOM 對於互動頁面非常重要,而我們還有 BOM 還沒介紹!