querySelector 選取元素

js上課筆記5/22

querySelector

querySelector可抓取 html 上的 id 以及 class元素的第一個子元素。
像是在寫 css 一樣方式去選取資料。

document.querySelector(‘#idName’);（抓 id，記得加 #）
document.querySelector(‘.idName’);（抓 class，記得加 .） document.querySelector(‘.idName em’);（還可以抓 class 裡面的第一個子元素，記得在 class 後方加上一個空格）

getElementById

querySelector

getElementById 和 querySelector的差異

getElementById只能抓 id，直接在 ()內寫 id名稱，不須加上#。
querySelector可以抓 id 也可以抓 class 或裡面的子元素，抓 id 需在前面加上#，抓 class 需加上.。只能抓取第一個子元素。如果要抓取相同 class 名稱的所有子元素，則使用 querySelectorAll。

querySelectAll

如果要選取多筆資料（相同標簽名 或 相同 class 名稱），querySelectAll會將指定的元素回傳成一個陣列，若要操作陣列裡的元素，則是依陣列序號 [0][1][2]…給值。若陣列裡的元素有相當多筆時，使用 length 可得知共有幾筆。

因為回傳的元素，變成一組陣列，故也可使用 for 迴圈來快速的同步更改裡面的文字內容。

querySelector和 querySelectAll的差異

querySelectAll：要撈多筆資料的時候。可同步更改或依據序號來給予不同的值。
querySelector：只須撈一筆資料，抓裡面最近的第一筆資料。