querySelector - 選擇單一元素

使用 querySelector 來選擇元件，讓程式碼更簡潔

html:

<h1 id="titleId" class="titleClass">title</h1>

JS:

document.getElementById('titleId').textContent = '1234';

我想要「更改h1的文字內容」，可以使用上面的 JS 語法，但是，這樣的程式碼太冗長了（在閱讀上會較為吃力），要如何讓程式碼更簡潔呢？

作法如下說明

更簡潔的「選擇器的寫法」

使用「變數el」

html:

<h1 id="titleId" class="titleClass">title</h1>

JS:

var el = document.getElementById('titleId');

el.textContent = '1234567';

🎃 建立一個變數el，用來取代document.getElementById('titleId');

🍋 el是「element 的縮寫」

使用「變數el」的好處是：

🎃 在「變數el」就選擇了元件，這樣之後想要對此元件作任何事情，就可以直接使用「變數el」，而不需要再寫一長串的「document.getElementById('titleId');」

🎃 程式碼較為簡潔，可讀性提高

使用.querySelector()來選擇元件

📖 query 的意思是「疑問，問題」

html:

<h1 id="titleId" class="titleClass">title</h1>

JS:

var el = document.querySelector('#titleId');

el.textContent = '123456789';

✅ 使用.querySelector()來選擇元件時，寫法跟「css 選擇器」是一樣的

🎃 使用.querySelector()來選擇元件「id」時，前面要加上「#」

var el = document.querySelector('#titleId');

🎃 使用.querySelector()來選擇元件「className」時，前面要加上「.」

var el = document.querySelector('.titleClass');

🎃 使用.querySelector()來選擇「.titleClass裡面的<em></em>」時，就跟 css 選擇器的寫法一樣「'.titleClass em'」

html:

<h1 id="titleId" class="titleClass"><em>12</em></h1>

JS:

var el = document.querySelector('.titleClass em');

el.textContent = '1234';

可以看到，<em></em>的文字內容，就改成 1234 了

.getElementById()跟.querySelector()的差別

🎃 .getElementById()是用來「讀取“獨一無二的 id”」

🍋 一個網頁上，一個 id 只能出現一次

.querySelector跟.querySelectorAll的差異

🎃 .querySelector() 會從上找到下，找出符合“指定 className”的「第一個 DOM」

🎃 .querySelectorAll() 會從上找到下，找出符合“指定 className”的「全部 DOM」，並且以「陣列 array」的方式回傳