iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

前端藏寶圖系列 第 10

DOM 節點選取

前一篇文章 中粗淺地介紹我對 DOM 的理解,在實際見識它的廬山真面目前先要知道幾個概念:

  • DOM Tree 採用樹狀結構來儲存網頁元素,這種結構具有層次關係
  • Document 中所有的物件都算是某種節點,根節點是 Document,代表整個網頁
  • 節點有12個子類別,例如元素節點,文字節點,註解節點,屬性節點等等

以下看個簡單的例子:

畫面上的紫色文字代表的就是元素節點,是構成 DOM Tree 的基礎,灰色的文字代表文字節點,綠色的文字則是註解節點。

選取 DOM 元素

操作 DOM 元素的概念跟在 Google Sheet 上的操作很雷同,當我們要在一個特定欄位輸入文字時,我們必須先用滑鼠點選到特定的框框,然後再輸入文字,每當要改變文字的顏色或框框的底色時,就得再點選一次要更動的框框,當要刪掉框框內的文字,一樣必須再點選框框。可以觀察到點選框框是一切的開始,那我們先來看看如何選取 DOM 元素。

學習CSS的時候,一定要學會CSS選擇器的概念才能正確選定要調整的元素,在選取 DOM 元素時,也可以利用同樣的概念選取,但必須是使用下面介紹的兩個方法

  • querySelector() : 找出文件中符合指定CSS選擇器的第一個元素,如果找不到則會回傳null

document.querySelector('nav') // 選取<nav>元素 
document.querySelector('.logo') // 選取class屬性中帶有"logo" 的元素
document.querySelector('input[type="button"]') // 選取<input type="button">元素
document.querySelector('.copyright span') //選取class="copyright" 的元素的任何<span> 後裔
  • querySelectorAll():找出文件中所有符合CSS的所有元素(會以 Nodelist 表示)
//當你在閱讀這個文章時,可以試試開啟console,輸入以下這行程式碼
document.querySelectorAll('.menu__left li')

//會回傳下列資料
NodeList(7) 
[li.menu__item, li.menu__item, li.menu__item, li.menu__item, li.menu__item, li.menu__item.menu__item--ironman, li.menu__item.menu__item--ironman]

特別要注意的是Nodelist並不是陣列,而是類陣列,所以一般知道的陣列方法無法處理Nodelist的資料,但可以將Nodelist傳入Array.from(),這樣就可以把它轉成真正的陣列了。

至於怎麼修改元素的樣式呢?就留到下一篇討論吧~

參考資料:


上一篇
未來世界的樹 - DOM Tree
下一篇
修改 DOM 元素樣式
系列文
前端藏寶圖30

2 則留言

0
南國ㄟ安迪
iT邦新手 5 級 ‧ 2021-09-25 13:47:05

喜歡DOM view的圖!!

0
Hooo
iT邦新手 5 級 ‧ 2021-09-25 14:41:56

每天看佳萱po文學DOM 🙌

我要留言

立即登入留言