EP.13 RE:從零開始的學習 JS 生活-第十三日之文件物件模型 DOM

前言

轉生第十三日,這一篇將會來介紹 DOM,也就是所謂的文件物件模型。

DOM

DOM 全名為 Document Object Model,簡稱 DOM 元素,在前面章節的部分程式碼我們有寫過一個東西,也就是 domcunent,而這 domcunent 就是本章節要介紹的 DOM。

DOM 的觀念是身為一個網頁開發者必須懂得基礎觀念,它的樣子大概就像這樣 ↓

來源:維基百科

DOM 其實看起來很像一個樹狀圖,所以又被稱之為 DOM Tree (DOM 樹)。

那為什麼要了解 DOM 元素呢?首先你可以想想前面的章節,我們在使用選取器時,都會寫 domcunent.方法,而前面這個 domcunent 就是代表著 DOM 的最頂層 ↓

頂層

所以說每一個 DOM 底下的每一層都有它的意義存在,如果了解 DOM 對於操作 DOM 的觀念上也會比較清楚。

DOM Element

DOM Element 又稱 DOM 元素,最主要範圍是這些(紅框所圈都是元素) ↓

紅框所圈都是元素

所以 domcunent.getElementById('id') 對應著 Element,所以你可以看到這個 JavaScript 語法裡面有一個 Element,當然 document.querySelector('calss or ID') & document.getElementsBytagName(tag) 也是相同道理,所以才會回傳 Element,但是 document.getElementsBytagName(tag) 則是回傳 element 的一個集合這要注意一下。

DOM Text

DOM Text 稱之為 DOM 文字,我們可以透過使用 domcunent.getElementById('id').textContent ='XXX'; 來改變文字內容,所以說你可以想像成我們使用了 domcunent.getElementById('id') 來尋找 ID 叫 XXX 的 Element 元素,然後回傳給我們,接下來我們就透過 .textContent() 的方法來修改這個 Element 元素底下的文字內容。

Dom Attribute

DOM Attribute 則是 DOM 屬性,屬性簡單理解就是在講 class,所以我們可以透過 JavaScript 提供的 setAttribute() 來選取屬性,進而設置屬性或修改屬性,例如domcunent.getElementById('id').setAttribute('class','bg-cover'),此時該 HTML 就會變成這樣:

1
<div id="box" class="bg-cover">1234</div>

補充

最後這邊要注意一件事情,若你使用 document.querySelectorAll('calss or ID') 將會回傳的是一個 NodeList,而 NodeList 並不是一個陣列,它是一個類陣列,並且是一個動態集合(live collection),所謂的動態集合就是它會隨著內容改變而變化,所以它可能會比真正的陣列少一些方法。

詳情可見 MDN

最後你可以發現一件事情,其實 DOM 元素也是物件 (Object) 的一種,也就是前面章節所講的名稱與值的配對。

結尾

下一篇的 RE:從零開始的學習 JS 生活-第十四日 將會介紹 JSON。

0%