為什麼要學 DOM？

你可以把網頁想成一間房子，HTML 是蓋房子的「結構」（牆壁、房間、家具擺放位置),但蓋好之後房子是靜態的、不會動的。
DOM（Document Object Model）就是瀏覽器把這間房子變成一份「可以被 JavaScript 操作的地圖」。

有了這份地圖，JavaScript 才能：

• 找到房子裡的某個房間(選取元素)
• 改變房間的擺設(修改內容、樣式)
• 增建或拆除房間(新增、刪除元素)
• 裝上感應器,例如「有人開門就亮燈」(事件監聽)

如果沒有 DOM,JS 只能在背景默默計算,完全沒辦法跟使用者「互動」。你按按鈕、輸入表單、看到頁面內容跳出來 —— 這些全部都要靠 DOM 操作才能實現。

選取元素

1. document.querySelector() — 選取「第一個」符合條件的元素

// HTML: <div class="board">留言板</div>
const board = document.querySelector('.board');
console.log(board.textContent); // 留言板

2.document.querySelectorAll() — 選取「所有」符合條件的元素(回傳類陣列)

總共抓到

// HTML: <ul><li class="task">洗碗</li> <li class="task">倒垃圾</li></ul>
const tasks = document.querySelectorAll('.task');
console.log(tasks.length); // 2

多個相同元素就用陣列去選取

// HTML:<a class = "red" href="#">Click me</a> 
// HTML:<a class = "red" href="#">Click me</a> 
//<style> .red {color: red;} </style>

const myLink = document.querySelectorAll("a");
myLink[0].setAttribute("href", "https://www.google.com"); //第一的a連結
myLink[0].setAttribute("class", "red");
myLink[1].setAttribute("href", "https://www.yahoo.com");//第二的a連結
myLink[1].setAttribute("class", "red");

假如陣列有100個，就會使用到forEach，不會寫到這麼多

3.document.getElementById() — 用 id 選取(較舊但仍常見)

// HTML:<div id="title"> </div>
const title = document.getElementById('title');
//輸出 <div id="title"> </div>

修改內容

1.textContent — 讀取/修改純文字內容

// HTML: <div class="title"> </div>
const title = document.querySelector('.title');
title.textContent = '今日待辦事項'; //網頁文字新增 今日待辦事項
console.log(title.textContent);
//輸出 今日待辦事項

2.innerHTML — 讀取/修改內容(可包含 HTML 標籤)

// HTML: <div class="box"> </div>
const box = document.querySelector('.box');
box.innerHTML = '<strong>注意!</strong>明天放假';
//網頁文字新增 注意!明天放假

3.style修改樣式與屬性— 直接修改 CSS 樣式

// HTML: <div class="submitBtn">更改顏色</div>
const button = document.querySelector('.submitBtn');
button.style.backgroundColor = 'lightblue';

4.setAttribute()修改屬性

//3 HTML:<a class = "red" href="#">Click me</a> 
//<style> .red {color: red;} </style>

const myLink = document.querySelector("a");
myLink.setAttribute("href", "https://www.google.com");//HTML屬性,加入內容
myLink.setAttribute("class", "red");// CSS屬性,加入內容

取值方法

innerHTML、textContent、getAttribute取值方法

//HTML:<a href="https://www.google.com.tw" class = "red"><span>連結</span></a>
const myLink = document.querySelector("a");
console.log(myLink.getAttribute("href"));
//針對href屬性取出內容 https://www.google.com.tw
console.log(myLink.getAttribute("class"));
//針對class屬性取出內容 red
console.log(myLink.innerHTML);
//針對innerHTML結構取出內容 <span>連結</span>
console.log(myLink.textContent);
//針對 a 取出文字資料 "連結"

表單元素取值方法

//HTML:<input type="text" class="txt" value="Hello">
<select class="list">
    <option value="金牛座">金牛座</option>
    <option value="天秤座">天秤座</option>
</select>

const txt = document.querySelector('.txt');
console.log(txt.value); //取出 Hello
txt.value = '你好'; // 網頁修改文字

const list = document.querySelector('.list');
console.log(list.value);//取出 金牛座
list.value = '天秤座';// 網頁修改開頭選單