最完整的前端 DOM 教學(上) - 甚麼是 DOM？如何獲取 DOM 的值並更改網站內容？

DOM 是學前端一定跑不開的話題和知識點，理解 DOM 是甚麼後，我們就能對網頁進行很多動態的操作，讓整個網站活起來，如果你還不知道 DOM 是甚麼，就讓我們一起來看看吧!

甚麼是 DOMDOM 其實就是 HTML 元素，只是轉換成了 JS 物件，而這個物件提供一些操作 HTML 元素的方法，例如更改元素的樣式或屬性等，讓開發人員能夠利用 JS 操作 HTML 元素，也就是 DOM 提供了操作 HTML 元素的能力。

如果要用比較學術的話來說，DOM 的全名是文件物件模型(Document Object Model)，在網頁加載時，瀏覽器會將 HTML 文件轉換成一個樹狀結構，如下:

而每個 HTML 元素都是樹中的一個節點。這樣的結構就是 DOM，DOM 將 HTML 元素轉換成一個 JS 物件，使得開發人員可以使用 JavaScript 來操作和修改 HTML 元素的內容、屬性和樣式等。因此，DOM 可以被視為一個窗口，用來在網頁和 JavaScript 之間進行交互。

document 物件DOM 的核心物件是 document 物件，他是是瀏覽器內建的一個物件，我們可以直接用 console.log(document) 來查看他，他裡面放了很多用來操作元素的各種方法，例如獲取一個 HTML 元素，而在我們通過 document 獲取 HTML 元素後，就把這個物件叫做 DOM 物件

所以就像上面說的，DOM 其實就是 HTML 元素的物件版本。

DOM 可以幹嘛上面有說到，JS 可以利用 DOM 來操作和修改 HTML 的元素，而常見的操作有:

獲取一個元素移除一個元素創建一個元素向頁面添加一個元素給元素綁定一個事件獲取、修改、增加、刪除元素的屬性給元素添加一些 CSS 樣式給元素添加一些 CSS 的 class 或 id 等等...所以說只要有了 DOM，我們就可以用 JS 來對網頁進行很多的操作，例如我要做一個代辦清單，就可以利用 DOM ，來點擊按鈕新增一個待辦事項，或是刪除代辦事項。

接下來就來看看如何操作 DOM 吧。

如何獲取 DOM在開始操作之前，總要先獲取 DOM 吧，JS 提供多種獲取 DOM 的方法，可以分為

透過 id / class 獲取getElementById()getElementsByClassName()透過標籤名字獲取getElementsByTagName()透過表單元素的 name 屬性獲取getElementByName()透過 CSS 選擇器來獲取querySelector()querySelectorAll()因為獲取 DOM 的方法存在 document 這個 JS 內置的物件內，所以在獲取 DOM 元素時，都要在前面加上 document 來使用。

透過 id / class 獲取 DOM可以利用 getElementById() 來獲取指定 id 的 HTML 元素:

HTML

JSconst myDivId = document.getElementById('myDivId');

console.log(myDivId.innerText); // 123上面的 innerText 正是 DOM 提供的其中一個屬性，用來表示 DOM 物件的內容。

接著也可以利用 getElementsByClassName 來獲取指定 class 的 HTML 元素: (注意是 Elements，因為一個 class 可能存在於多個 HTML 元素上)

HTML

JSconst myDivClass = document.getElementsByClassName('myDivClass');

console.log(myDivClass[0].innerText); // 456需要注意的是，因為 class 可能同時在多個元素上，所以利用這個方法獲取的 DOM 物件是一個偽陣列 (像陣列但並不是真正的陣列)，所以要加上 [0] 來獲取指定的元素喔。

透過 HTML 標籤名字獲取 DOM 元素有時候我們想要對某個標籤做操作，就可以使用 getElementsByTagName() 來一次獲取所有指定標籤的 DOM 元素，例如: (注意是 Elements)

HTML

JSconst divs = document.getElementsByTagName('div');

console.log(divs[0].innerText); // 1

console.log(divs[1].innerText); // 2和 getElementsByClassName 一樣，獲取的 DOM 是個偽陣列。

透過表單元素的 name 屬性獲取這個方法適用於有表單元素時，可以用 getElementsByName() 來獲取 DOM 元素

HTML

Email

JSconst userEmail = document.getElementsByName('userEmail');

console.log(userEmail[0].value); // kkk@gmail.com因為獲取的是 input 元素，所以要用 value 代替 innerText 喔，所有的表單元素都會用 value 來獲取用戶輸入的值喔。

透過 CSS 選擇器來獲取 DOM到這邊你可能會覺得，這麼多獲取的方法也太麻煩了吧，所以後來 JS 推出了新的方法，可以利用 CSS 選擇器來選擇，這樣就不用記這麼多的方法。

這個新增的方法是 querySelector 和 querySelectorAll，一個用來選取單一元素，另一個用來選取多個元素，querySelector 只會選取第一個元素。

這個方法讓你用 CSS 選擇器的方法選擇元素，如下:

HTML

JSconst myDivClass = document.querySelector('.myDivClass');

const myDivId = document.querySelector('#myDivId');

console.log(myDivClass.innerText); // 123

console.log(myDivId.innerText); // 456如果有多個相同 class 的元素，就可以用 querySelectorALl() 選取:

HTML

JSconst myDivClass = document.querySelectorAll('.myDivClass');

console.log(myDivClass[0].innerText); // 123

console.log(myDivClass[1].innerText); // 456要注意的是，這個方法要加上 . 或是 #，因為他就是依照選擇器的方法來選擇的，只要在 CSS 能用的選擇器，這個方法都可以使用，因此這是我最推薦的方法，因為它能在任何場景使用。

像如果你想要選取標籤，也能這樣使用:

const divs = document.querySelector('div');操作 DOM 物件的內文更改 DOM 物件內文的方式有三種:

innerTextinnerHTMLvalueinnerTextinnerText 只能獲得純文本的訊息，不會獲得標籤，例如

HTML

JSconst myDOM = document.querySelector('.myDOM');

console.log(myDOM.innerText);

// "Hello World

// I am thisWeb"若要修改文本內容直接附值就可以:

myDOM.innerText = 'Hi World！';此時就會看到畫面上的文本內容出現改變了。

innerHTMLinnerHTML 則是會連標籤都一起獲取:

HTML

const myDOM = document.querySelector('.myDOM');

console.log(myDOM.innerHTML);

// Hello World

//

I am thisWeb

所以若要修改 HTML 的結構，就要使用 innerHTML:

myDOM.innerHTML = `Hi World, It's a Google link`;此時修改成 google 連結了。

value這個屬性用在表單元素上面，例如 input 標籤:

HTMLJSconst textInput = document.querySelector('.textInput');

console.log(textInput.value); // 預設值value 可以搭配等下會說的事件還獲取用戶輸入的值。

若 input 是使用 checkbox 或 radio 選框的話，可以用 checked 來判斷用戶是否有選取:

const checkInput = document.querySeletor('.checkInput');

console.log(checkInput.checked); // true 或 false操作 DOM 的樣式我們可以直接在 JS 用 DOM 來操作樣式，使用方法為 xxx.style.xxx = xxx:

HTML

JSconst box = document.querySelector('.box');

box.style.color = 'green';

// 若遇到 css 的 '-' 符號，要用駝峰寫法代替，例如

box.style.backgroundColor = 'blue';直接修改類名針對類的修改可以分三個:

增加類刪除類直接覆蓋類1. 增加類

CSS.active {

color: red;

}JSbox.classList.add('active');此時 box 的文字顏色就會改成紅色的。

2. 刪除類

box.classList.remove('active');此時 box 的文字顏色就會變回去。

有時候我們可能要經常增加或刪除某個類，所以 JS 提供 toggle 來幫助我們快速切換。

box.classList.toggle('active');這樣 JS 就會判斷 box 是否有 active 類名，然後自己增加或刪除了。

3. 直接覆蓋

我們也可以直接使用 className 來直接覆蓋整個 class:

box.className = 'active';要注意，這個方法比較少使用，因為這樣會把原本的類名也覆蓋掉。

操作 DOM 屬性除了修改內文、樣式、類名，我們也可以操作屬性，有三種方法:

getAttribute() : 獲取屬性setAttribute() : 設置屬性removeAttribute() : 刪除屬性getAttribute()只要元素上有設定的屬性都可以獲取，例如 a 連結，或圖片來源:

HTMLGoogle

// 或圖片

JSconst a = document.querySelector('a');

const img = document.querySelector('img');

const href = a.getAttribute('href'); // https://google.com

const src = img.getAttribute('src'); // https://...不過其實也可以直接獲取元素:

console.log(a.href); // https://google.com就看你喜歡哪種寫法。

setAttribute()設定屬性可以用來更換連結或圖片:

const a = document.querySelector('a');

const img = document.querySelector('img');

a.setAttribute('href', 'https://www.youtube.com/');

img.setAttribute('src', '...');和上面一樣，也可以直接對屬性修改:

a.href = 'https://www.youtube.com/';兩種寫法都可以。

removeAttribute()當然，我們也可以刪除屬性：

const a = document.querySelector('a');

a.removeAttribute('href');自訂義屬性而用 setAttribute() 可以自訂義自己的屬性:

const div = document.querySelector('a');

a.setAttribute('myAttribute', 123);

const myAttribute = a.getAttribute('myAttribute'); // 123不過這樣有個壞處，就是常常看不出來哪一個屬性是自己定義的，所以 JS 提供另一個方法來自定義屬性，dataset:

a.dataset.myAttribute = 123;這樣自訂義的屬性會在前面增加 data-* 字樣，可以打開 F12 觀察自己增加的屬性會變成 data-myAttribute，這樣可以看出哪些是自己新增的屬性。

小結今天說了什麼是 DOM 物件，以及獲取和修改它的各種方法，其實 DOM 就是把 HTML 元素轉成 JS 物件來讓開發人員修改，下一篇會來繼續講如何增加、刪除 DOM 元素。

你可能會感興趣的文章 👇CSS 超好用的混色功能 color-mix()JS Object.groupBy 教學 - 再也不用手寫分組邏輯為什麼要 max-width？讓網站更好看的前端技巧js padStart 的實際應用 - 將數字處理成你想要的格式