7-2 querySelector 與 CSS 選擇器

Original: https://course.andys.pro/Javascript-Intro/07-2-queryselector-and-css-selector/

講義

1. 新一代選取器：querySelector

相較於傳統的 getElementById 等方法，querySelector 允許使用 CSS 選擇器 的語法來抓取 DOM 元素，更具靈活性。

• document.querySelector(selector)：
  • 回傳符合條件的 第一個 元素。
  • 找不到則回傳 null。
• document.querySelectorAll(selector)：
  • 回傳符合條件的 所有 元素之集合 (NodeList)。

2. 常見的 CSS 選擇器語法

• ID 選取：#myId
• Class 選取：.myClass
• 標籤選取：h1, p, div
• 屬性選取：[title*="flower"] (選取 title 屬性中包含 “flower” 字眼的元素)。

3. 選擇器的組合與層級

• 交集 (同時符合)：.class1.class2 (中間沒有空格)。代表該元素必須同時擁有 class1 與 class2。
• 後代選取 (任一層內)：.class1 .class2 (中間有 空格)。代表在 class1 元素裡面的所有 class2 元素。
• 子代選取 (直接下一層)：.class1 > .class2。代表在 class1 元素「正下方」第一層的 class2 元素。
• 並列選取 (或)：.class1, .class2 (以 逗號 隔開)。選取所有符合 class1 或符合 class2 的元素。

4. 實務練習

建議使用 Chrome 開發者工具的 Console 面板，搭配不同的 CSS 組合語法來測試選取到的元素範圍。

影片逐字稿 (AI 生成)

接下來我們來看7-2 CureSelector前面我們用ES3比較傳統的方法GetElementById,GetElementsByTagName,GetElementsByClassName現在我們來看比較偏向CSS寫法的CureSelector是怎麼做的還有CureSelector還有CSS選擇器我們會再更仔細的看首先呢CureSelector會用類似像CSS選擇器去選東西所以它的公式大概像這樣你可以在旁邊補公式就是DocumentCureSelector然後這邊的Selector是像CSS的選法所以在前面GetElementById和GetElementsByClassName這兩種的方法其實在這邊都可以用Selector直接來選它就像CSS是.class或是警號ID來選ID這樣那如果是TagName呢TagName就直接寫H1或是你的P就可以直接選它的做法就是跟CSS是類似就是很類似這樣子那星星在那個CSS裡面是選所有的元素然後這邊呢我可能就不會給大家example好那這邊就是有一個attribute這邊有一個包含的值那這個地方呢我在那個paper上面有做補充我們現在來看一下是這裡嗎這邊有做補充就是attribute然後這是w3score的補充好主要它這邊因為它其實就是一個CSS的Selector那我們來看一下這個example是長怎樣好在這個example裡面我們會看到有三張圖然後這三張圖裡面第一張圖有被選起來然後大家會說欸那JavaScript在哪裡那其實我們會看到這邊的title裡面有三個title嘛有一個是climatisflower然後有flowers跟landscape那這邊的CSS它是選title然後裡面有flower的然後我會把它的border改成是yellow那我們看到這邊它這邊中間就算有空格它這個有flower它還是有選到它那如果你是用等於的話你就一定要跟它寫的一模一樣比如說像看一下喔這樣跑的話就不會可是這樣子flowers就會選到這個對不對所以像這邊的話這個你沒有一定一樣flower你就是用字號因為它就是裡面有flower它就會選到它好大家可以去玩玩看這個example那這邊呢我放了一個是這個是w3這邊是解釋定義的這邊是然後這邊是這邊是exampleok好的那這邊我來講一個滿有趣的一個東西可是這我不知道你們CSS裡面有沒有教就是呃兩個class點點合在一起跟分開的差異這裡面江老師有教嗎還是還沒教到沒有關係沒有教也沒有關係我們現在來看好不好好不好我昨天晚上都做example呵呵好就是說我這邊的我們可以直接把它打開那這邊會有幾個case一個case是兩個點1點2是連在一起的第二個case是點1點2中間有個空格第三個case是用大魚連接他們第四個是2在前面好就是講一下就是這邊你如果用冒號的話那個paper會跑出表情符號對好第五個例子是用逗號連接他們那我們現在一個一個例子來看然後這個頁面好像有點大我們把它縮小一點好我們把這個call pen打開這是第一個例子好第一個例子是連在一起的那它會選到什麼它會選到的是同時有應該是同時有吧同時有1跟2的這個boxokcss selector兩個都有的情況下它是連在一起是同時都有1跟2的那個class它會選到這一個ok好第二個例子如果中間有空格這邊很容易會跟前面的那個這邊很容易跟前面的get elementsby class name去搞混這邊有空格是第一個是有1的class底下任意2的class然後選到這個東西所以比如說我們這邊的這個我把這個html拉大一點好我們看到這一個1box是這個只有1只有2是這一個然後這是12box同時有1跟2那其實我們現在被畫紅底的是什麼被畫紅底的是這一個1裡面有2然後這邊是右嘛對不對然後再來是這裡面的這個2所以這邊我們會看到說DocumentCurySelectorall你選到12其實是選到在1這個box裡面有2的這個這個dom所以會選到的是這一個選到這一個跟這一個這一個跟這一個ok那空格代表說在1底下任意有2的class都可以選這是第二個在1底下有沒有的任意的2都可以選所以要選到是這一個和這一個ok好這是第二個例子第三個例子有大於的你可以把它想就是有大於就是在CSS裡面就有強制性好那你會發現說跟剛剛前面不一樣剛剛空格是1裡面任意的2都可以選到可是呢現在我們變成什麼我們現在變成是在1裡面只有在1裡面只有這個2會被選到因為呃然後這個2這個不會被選到因為它在3它在3裡面對不對它是先1然後在3然後在2OK它是被三個包住的所以1 2只會選到這一個因為大於這個這個符號是有強制性的它一定要在1底下的2那剛剛空格是說我1裡面任意的2我都可以選我都可以選得到這樣可以理解嗎還是要想一下那如果說你說欸我只要選到3裡面這一個的話那你要怎麼做你就要1然後點3這樣子2然後我們把它存檔它就選到這一個有沒有因為它是1裡面的3的21 3 2OK你要拉大一點這樣這樣比較清楚有沒有1這一格我點這邊的時候有沒有它這邊選起來這一格裡面的3的2選到它它有強制性那如果只有1 2是什麼1裡面強制的2是這一個那如果是空白的話它就是1裡面任意有只要有2這個class都會被選到好這邊大家要注意一下應該是CSS的東西這是CSS selector好的第四個例子2空白1這應該比較簡單吧這應該我們直接在這裡看就可以吧就第一個是2然後第二個是裡面任意的1那我們在這個例子裡面只有這個box所以就很清楚的可以知道說只有它好的那如果是豆點呢豆點在這邊就會比較有點像是點1我同時想要選點1我我同時也想要選點2這兩個class同時要選它有點像或者對不對我要是1或者是2那這邊所有的都有1或者是2的class所以它全部都會被選到OK這是CSS selector就是應該是CSS你們要看一下好好這邊是7-2

影片逐字稿largev2

接下來我們來看七之二,Query Selector前面我們用ES3比較傳統的方法GetElement by ID, GetElement by TagName, GetElement by ClassName現在我們來看比較偏向像CSS的寫法的Query Selector是怎麼做的還有Query Selector,還有CSS選擇器,我們會再更仔細的看首先呢,Query Selector會用類似像CSS選擇器去選東西所以它的公式大概像這樣,你可以在旁邊補公式就是Document, Query Selector,然後這邊的Selector是像CSS的選法所以在前面GetElement by ID,和GetElement by ClassName這兩種的方法其實在這邊都可以用Selector直接來選它就像CSS是點Class,或是頸號ID來選ID這樣那如果是TagName呢,TagName就直接寫H1或是你的P就可以直接選它的做法就是跟CSS是很類似的那星星在CSS裡面是選所有的元素然後這邊呢,我可能就不會給大家Example好,那這邊就是有一個Attribute,有一個包含的值那這個地方呢,我在Paper上面有做補充,我們現在來看一下是這裡嗎?這邊有做補充,就是Attribute,然後這是W3Score的補充好,主要它這邊,因為它其實就是一個CSS的Selector那我們來看一下這個Example是長怎樣好,在這個Example裡面我們會看到有三張圖然後這三張圖裡面,第一張圖有被選起來然後大家會說,那JavaScript在哪裡?那其實我們可以看到這邊的Title裡面有三個Title有一個是ClaimMatticeFlower,然後有Flowers跟Landscape那這邊的CSS它是選Title,然後裡面有Flower然後我會把它的Border改成是Yellow那我們看到這邊,它中間就算有空格,它這個有Flower,它還是有選到它那如果你是用等於的話,你就一定要跟它寫的一模一樣比如說像,看一下,這樣跑的話就不會可是這樣子Flowers,就會選到這一個對不對所以像這邊的話,這個你沒有一定一樣嘛Flower你就是用字號,因為它就是裡面有Flower它就會選到它好,大家可以去玩玩看這個Example那這邊呢,我放了一個是,這是W3,這邊是解釋定義的這邊是Example好的,那這邊我來講一個蠻有趣的東西可是這我不知道你們CSS裡面有沒有教就是兩個Class點合在一起跟分開的差異這裡面,江老師有教嗎?還是還沒教到?沒有關係,沒有教也沒有關係,我們現在來看我昨天晚上都做了Example好,就是說我這邊的,我們可以直接把它打開那這邊會有幾個Case一個Case是兩個.1.2是連在一起的第二個Case是,.1.2中間有個空格第三個Case是,用大於連接它們第四個是2在前面好,就是,講一下就是,這邊你如果用冒號的話那個Paper會跑出表情符號好,第五個例子是,用逗號連接它們那我們現在一個一個例子來看然後這個頁面好像有點大,把它縮小一點好,我們把這個Codepen打開這是第一個例子第一個例子是連在一起的,那它會選到什麼?它會選到是同時有,應該是同時有同時有1跟2的這個BoxCSS Selector,兩個都有的情況下它是連在一起是同時都有1跟2的Class它會選到這一個,OK?好,第二個例子,如果中間有空格這邊很容易會跟前面的GetElementsByClassName去搞混這邊有空格是,第一個是有1的Class底下有任意2的Class,然後選到這個東西所以,比如說我們這邊的這個,我把這個HTML拉大一點我們看到這一個,1Box是只有1,只有2是這一個然後這是1,2Box是同時有1跟2那其實我們現在被畫紅底的是什麼?被畫紅底的是,這一個1裡面有2,然後這邊是右,再來是這裡面的這個2所以這邊我們會看到說,DocumentQuerySelectorAll你選到1,2,其實是選到在1這個Box裡面有2的這個Dom所以會選到的是這一個,選到這一個跟這一個這一個跟這一個,OK?那空格代表說,在1底下任意有2的Class都可以選這是第二個例子,在1底下任意有2的Class都可以選所以要選到的是這一個和這一個,OK?這是第二個例子第三個例子有大於的有大於的在CSS裡面就有強制性那你會發現說跟剛剛前面不一樣剛剛空格是1裡面任意的2都可以選到可是呢,現在我們變成什麼?我們現在變成是在1裡面只有這個2會被選到然後這個2,這個不會被選到因為它在3裡面,它是先1,然後再3,然後再2它是被三個包住的所以1,2只會選到這一個因為大於這個符號是有強制性的它一定要在1底下的2那剛剛空格是說,我1裡面任意的2我都可以選得到這樣可以理解嗎?要想一下那如果你說,我只要選到3裡面這一個的話那你要怎麼做?你就要1,然後點3,這樣子2然後我們把它存檔它就選到這一個因為它是1裡面的3的21,3,2然後拉大一點給大家看這樣比較清楚1這一格,我點這邊的時候它這邊會選起來,這一格裡面的3的2它會選到它它有強制性那如果只有1,2是什麼?1裡面強制的2是這一個那如果是空白的話它就是1裡面任意有2這個class都會被選到這邊大家要注意一下這應該是CSS的東西這是CSS Selector好的,第四個例子2空白1,這應該比較簡單吧這應該我們直接在這裡看就可以吧就第一個是2,然後第二個是裡面任意的1那我們在這個例子裡面只有這個box所以就很清楚的可以知道只有它好的,那如果是逗點呢逗點在這邊就會有點像是點1,我同時想要選點1我同時也想要選點2這兩個class同時要選它有點像或者我要是1或者是2那這邊所有的都有1或者是2的class所以它全部都會被選到這是CSS Selector應該是CSS你們要看一下這邊是7-2