第一篇文章有提到可以用 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()
的差異性