DOM 是什麼？

DOM 文件物件模型 ( Document Object Model )，光看名稱一定會覺得這是什麼東東？
它是由 W3C 定義，讓各個瀏覽器能夠按此規則去設計，其實就是把 HTML 文件裡的個個標籤和元素等定義成物件，而些物件形成樹狀結構就是你的 HTML 文件的架構。

(圖片來源：維基百科)

節點 (node)

在 DOM 裡面，每個 element、attribute 等都稱作為一個節點。
通常節點分為下列四種：

1. document

也就是這份 HTML 文件，所有的東西都會從 document 開始。

2. element

例如 <div>、<a>、<img> 等 HTML tag 都歸類在 element 中。

3. text

指被各種 tag 裡面包住的文字，例如 <p>這是被包住的文字</p>，text 指的就是 "這是被包住的文字"

4. attribute

指的是各種標籤內的相關屬性，例如 <img src="" alt="">中的 src 和 alt 就屬於 attribute。

操作 DOM

當我們想利用 JavaScript 來改變畫面渲染結果或進行一些操作時，首先得先使用選擇器來選取 DOM。
選擇器比較常用的寫法有下列幾種：

• document.getElementById('id名稱')
• document.getElementByClassName('class名稱')
• document.querySelector('#id名稱')
• document.querySelector('.class名稱')
• document.querySelectorAll('.class名稱 / #id名稱')

選擇器的用法我們就明天繼續看下去吧 :D