iT邦幫忙

1

JavaScript 基礎知識-querySelector

第一篇文章有提到可以用 document.getElementById() 的方式選取 id 元素渲染到網頁,但如果今天我想選取的不只是 id 元素,還有 class 元素或者標籤

這時候可以使用到 .querySelector() 的方式,他就不僅僅只局限於 id 元素
只是在使用 .querySelector() 的時候,選取器的方式要像 css 的方式一樣
當選取 id 元素時:

document.querySelector('#title');

當選取 class 元素時:

document.querySelector('.title');

都要有相對應的 # 或者 .

竟然都已經有學到變數了,這時候我們就可以宣告一個變數,專門來儲存我們要選取的元素,日後同一個元素需要使用到很多方法時就會方便很多,例如:

var el = document.querySelector('#title');
el.textContent = 'Hello World!';

這樣的程式碼,相對跟下面的程式碼相比會比較簡潔易懂

document.querySelector('#title').textContent = 'Hello World!';

下一篇將講到 .querySelectorAll() 以及跟 .querySelector() 的差異性


尚未有邦友留言

立即登入留言