DOM 操作

Document Object Model

HTML 上面的任何元素都是 DOM

抓取

單一

document.querySelector(selector)

單一抓取時，無論符合的 selector 有幾個，都只會回傳第一個

html

<div id="uid">UID</div>

<div class="student">Student 1</div>
<div class="student">Student 2</div>

js

let uid = document.querySelector('#uid');
let students = document.querySelector('.student');

console.log(uid);
console.log(students);

多選

document.querySelectorAll(selector)

單一抓取時，無論符合的 selector 有幾個，都會回傳陣列型態

html

<div id="uid">UID</div>

<div class="student">Student 1</div>
<div class="student">Student 2</div>

js

let uid = document.querySelectorAll('#uid');
let students = document.querySelectorAll('.student');

console.log(uid);
console.log(students);

控制

內容

dom.innerHTML

html

<div id="uid">UID</div>

js

let uid = document.querySelector('#uid');

console.log(uid.innerHTML);

uid.innerHTML = 'New UID';

數值

dom.value

html

<input type="text" value="David Lin" id="full-name">

js

let fullName = document.querySelector('#full-name');

console.log(fullName.value);

fullName.value = 'John Chen';

CSS

dom.style

遇到屬性有 - 連接的，使用小駝峰命名

background-color => backgroundColor

html

<div id="uid">UID</div>

js

let uid = document.querySelector('#uid');

uid.style.color = 'red';
uid.style.backgroundColor = 'yellow';

class

dom.classList

附加

dom.classList.add('class name')

重複附加也只會顯示一個

html

<div id="uid">UID</div>

js

let uid = document.querySelector('#uid');

uid.classList.add('some');
uid.classList.add('some');
uid.classList.add('some');

移除

dom.classList.remove('class name')

移除不存在的 class name 不會發生錯誤

html

<div id="uid">UID</div>

js

let uid = document.querySelector('#uid');

uid.classList.remove('some');
uid.classList.remove('some');
uid.classList.remove('some');

取得

dom.className

回傳字串，使用 String.split(' ') 切割成陣列

html

<div id="uid" class="first name full">UID</div>

js

let uid = document.querySelector('#uid');

let className = uid.className;

console.log(className);

let classes = className.split(' ');

console.log(classes);

確認名稱存在

dom.classList.contains('class name')

html

<div id="uid" class="first name full">UID</div>

js

let uid = document.querySelector('#uid');

let exists = uid.classList.contains('first');

console.log(exists);

dataset

dom.dataset 對應 data-* 屬性

html

<div id="uid" class="first name full" data-id="1">UID</div>

js

let uid = document.querySelector('#uid');

console.log(uid.dataset.id);

uid.dataset.id = 999;

事件監聽

dom.addEventListener(event, function)

event 事件類型

function 執行函數

html

<button id="btn">Click</button>

js

let btn = document.querySelector('#btn');

btn.addEventListener('click', function(e) {
    console.log(e);
})

click 點擊事件

e 事件物件，紀錄事件的詳細資料

互動初體驗

建立一顆按鈕
建立一姓名輸入匡
建立一個顯示區塊
當點擊按鈕時，顯示區塊顯示『Hi!, {姓名輸入匡內容}』

前端開發