[學習筆記] querySelector & querySelectorAll

2021-06-13
JavaScript

今天是 2021/06/13,距離政府宣布第三級警戒開始,即將滿一個月,也代表 work from home 也快一個月。去年看著在海外唸書、工作的朋友,完全無法想像會是怎樣的生活,如今自己親身體會,也可以隔空對他們說:「我懂。」(拍肩)
今天也開放 85 歲以上的長輩打疫苗,雖然不知道何時會輪到我們,真的很希望台灣可以早日撐過去,回歸以往的生活。醫護人員真的辛苦了!

以上 mur mur 結束。

在選取想要的元素時,無論是要選到 id 或是 class 等等,querySelector 是個實用的好幫手;我在做一些練習題時,有遇到一題的概念很像選取陣列,想簡單的做個紀錄與分享。

S:有一個無序清單,裡面有多個 list

T:選取到所有的


  • A:document.querySelectorAll(‘.list li’)
    R:選到所有的
  • S:有一個無序清單,裡面有多個 list

    T:修改第二個 li 的文字為 “ Hello! ”
    A:document.querySelectorAll(‘.list li’)[1].textContent = “ Hello! ”
    R:第二個

  • 文字改為 Hello!

    可以發現特別是要選取第二個

  • ,使用了 [1] 而不是 [2]
    跟上一篇提到的選取陣列中的元素一樣

    陣列=[ iPhone, iPad, MacBook, AirPods ]
    要取出 MacBook,會是 [2],而不是 [3],因為實際順序是 [ 0, 1, 2, 3 ]

    不過坦白說,我如果遇到這種狀況,我不會這麼寫
    如果今天要選的那個

  • 順序很後面,一直無法算出來是第幾個的話
    我會直接在要選到的地方加一個 class or id,用 querySelector(“.class”)就好

    以上就是這篇簡單的小筆記,其實 querySelector 博大精深,還有很多可以琢磨,如果有需調整的地方,再請路過大大不吝指出,謝謝~

    以上資料來自六角學院設計給 JS 新手的百道前端初學者題目 
    十分感謝他們大方且專業的分享,寫完可以看自己錯哪題,不懂的就去找谷歌大神吧!


  • 留言: