197-3 querySelectorAll getElement的比較

Original: https://course.andys.pro/Javascript-Intro/07-3-comparison-of-queryselectorall-getelement/

講義

1. querySelectorAll 的進階用法

• 多選功能：可以使用逗號選擇多個不同標籤。
  • 範例：document.querySelectorAll("h1, h2") ➝ 同時取回所有的 h1 與 h2 元素。
• 回傳型別：回傳的是 NodeList。這與 getElementsBy... 系列回傳的 HTMLCollection 雖然類似，但在方法支援上略有不同。

2. querySelectorAll vs getElementBy...

特性	getElementBy...	querySelector 家族
靈活性	較低 (僅限 ID, Class, Tag)	極高 (支援所有 CSS 選擇器)
執行速度	較快 (引擎優化過)	較慢
回傳型別	Element 或 HTMLCollection	Element 或 NodeList

3. 開發建議與效能考量

• 便利性優先：在初學階段或一般網頁開發，優先使用 querySelector 家族，因為這能讓你用同樣的 CSS 邏輯來編寫 JavaScript。
• 效能優化 (Optimization)：若遇到處理大量 DOM 元素（如數千個列表項）且感覺到速度變慢時，再考慮將關鍵部分改寫為 getElementBy... 方法。
• 及早開發，後期優化：不要陷入「及早優化」的陷阱。先讓功能運作，等到有性能瓶頸時再針對特定部分加強。

影片逐字稿 (AI 生成)

現在我們來講7-37-3跟前面7-2不太一樣的事情是我們剛才前面CureSelector只能選一個東西那CureSelectorAll可以選的是多項的東西然後再來我們會去跟GetElement來做比較首先呢我們把你用Element可以是Document也可以是其他的東西裡面再去Select一次那大部分我們都是直接用Document來做Selector就是用CSS的語法來選比如說你想要選Class阿或是你想要選Techname在這個例子裡面呢他是把H1跟H2的元素全部一起選出來那這個逗點的意思是獲釋的意思這逗點是獲釋好的那這邊有一個例子我們可以看一下就是他說我在DocumentCureSelector去選P這個Techname然後SelectorAll去選那我選到什麼東西呢那依照這個例子我把範例做出來範例在這裡那他就是那他就是打開然後我們到FullPage點一下喔然後當然做了一點變化啦就說我們看一下剛剛他的例子是什麼VarDocumentCureSelector那這個時候X是什麼這時候X是一個NodeList跟剛剛不太一樣對不對剛才前面是HDML Collection現在是一個NodeList那有沒有看到剛剛截圖PGreen然後Class然後底線Green就跟這個截圖是一樣OK然後他是一個NodeList好的那X第0個因為我們要我們要去去碰X的時候他裡面有好多個元素那只是剛好現在裡面只有一個元素然後第0個我們把他的Style的Color去改成Green這時候他的字就會變成綠色那其實我們這邊在這個範例裡面我們已經把它做掉了然後把顏色改成綠色然後這個時候他就把字改成綠色所以他就是綠色所以他就是綠色那這邊呢我有把這些東西印出來然後還有他的數目length點length印出來第0個是什麼東西OK他的長度我這邊都有把它寫出來大家可以到那個就是我補充的講義裡面7-16這邊去看一下好的那我們現在來比較一下跟getElementBy有什麼不一樣那當然這邊泛指的是getElement跟getElementsBy好首先呢getElementBy執行速度比較快那CureSelector他其實的靈活性會比較大因為他可以用很多不同CSS的Selector去選就你要選的東西但他很靈活同時就會有很靈活你可能就會有一些小小的比較複雜的地方要注意的比如說像我們剛才7-2補充的那些可能對各位來講就會剛開始吸收的時候會比較複雜一點好所以我們來比較一下他們兩個差別一個getElement是他是用單一值他是直接去查那CureSelector是CSS的選擇器那getElementBy的速度會比較快所以當你其實當你的資料量很大或是你要做的希望他速度比較快的時候你可以用getElementBy可是因為CureSelector其實對一般人來講是比較好用的所以剛開始我們在學的時候其實比較常用會是CureSelector到後面我們要優化的時候再去用getElementBy就好所以有的時候在寫Cure的時候就是比如說像在Google裡面他們都是先用Python寫然後後面才會去用C++寫就你先用比較慢的方法沒有關係可是你比較方便的方法先把東西做出來先把東西伸出來然後當某一個地方遇到速度瓶頸技術瓶頸的時候就是應該是講說某一個地方需要優化速度要快的時候再找特別的人或是自己再去優化那個比較慢的地方如果跑起來都沒有問題不需要速度優化那就不用沒關係就是先從不用及早優化就是先把東西可以伸出來就好好的所以剛剛前面有提到大量元素的時候用getElement買會比較快OK那這邊有提到說getElement by name跟 tag name在效能上沒有太大的差別OK好的他這邊有提到比如說像JavaScript的主流框架像JQuery和JQMobi裡面的選擇器都是用CurieSelector其實不是因為它的便利性是因為它的速度因為你平常在用JQuery和JQMobi的時候你不會碰到它內部的這些Selector而這些Selector都是它幫你處理好的你可能你在用的時候你只是call一個function你只是叫它的功能來用而已那可是你是開發者你用JQuery或JQMobi的時候你當然也希望這個框架的速度是快的所以它當然要對它的框架做優化OK所以它是他們在寫的時候是以效能為最佳化的為優先考量那我們自己在寫的時候其實是以便利性為考量所以這邊要把它就是寫一下它其實是因為它的效能好的那 Lab 可能就要請大家再自己做做看好本帳的重點是我們就是複習其實是複習的就是第二章學的就是GetElementByIDGetElementsByClassName這些用法然後再來我們多學了一個QESelector的做法然後我們還比較這兩種的Selector不同的地方好的這邊就是第七章謝謝大家

影片逐字稿largev2

現在我們來講7-37-3跟7-2不太一樣的事情是我們剛才前面Query Selector只能選一個東西那Query Selector All可以選的是多項的東西然後再來我們會去跟GetElement來做比較首先呢我們把你用Element是可以是Document也可以是其他的東西也裡面再去Selector一次,再去Select一次那大部分我們都是直接用Document來做Selector就是用CSS的語法來選比如說你想要選Class阿或是你想要選TagName那這個例子裡面呢他是把H1跟H2的元素全部一起選出來那這個逗點的意思是獲釋的意思這逗點是獲釋那這邊有一個例子我們可以看一下他說我在Document Query Selector去選P這個TagName然後Selector All去選那我選到什麼東西呢那依照這個例子我把範例做出來好,範例在這裡那他就是打開然後我們到Full Page等一下喔然後我當然做了一點變化啦就說我們看一下剛剛他的例子是什麼Var Document Query Selector好,那這個時候X是什麼這時候X是一個Node List跟剛剛不太一樣對不對剛剛前面是HTML Collection現在是一個Node List有沒有看到剛剛截圖P Green然後Class然後底線Green就跟這個截圖是一樣OK,然後他是一個Node List那X第0個因為我們要Asset我們要去去碰X的時候他裡面有好多個元素那只是剛好現在裡面只有一個元素然後第0個我們把他的Style的Color去改成Green這時候他的字就會變綠色的那其實我們這邊在這個範例裡面我們已經把他做掉了我們把顏色改成綠色然後這個時候他就把字改成綠色所以他就是綠色那這邊呢我有把這些東西印出來然後還有他的數目Length點Length印出來第0個是什麼東西OK,他的長度我這邊都有把它寫出來大家可以到就是我補充的講義裡面7-16這邊去看一下好的,那我們先來比較一下跟GetElementBy有什麼不一樣那當然這邊泛指的是GetElement跟GetElementBy首先呢,GetElementBy執行速度比較快那Query Selector他其實的靈活性會比較大因為他可以用很多不同CSS的Selector去選就你要選的東西但他很靈活同時就會有很靈活你可能就會有一些小小的比較複雜的地方要注意的比如說像我們剛剛7-2補充的那些可能對各位來講就會剛開始吸收的時候會比較複雜一點好,所以我們來比較一下他們兩個的差別一個GetElement是他是用單一值他是直接去查Query Selector是CSS的選擇器那GetElementBy的速度會比較快所以當你當你的資料量很大或是你要做的希望他速度比較快的時候你可以用GetElementBy可是因為Query Selector其實對一般人來講是比較好用的所以剛開始我們在學的時候其實比較常用的會是Query Selector到後面我們要優化的時候再去用GetElementBy就好所以有的時候在寫code的時候比如說像在Google裡面他們都是先用Python寫然後後面才會去用C++寫就你先用比較慢的方法沒有關係可是你比較方便的方法先把東西做出來先把東西生出來然後當某一個地方遇到速度瓶頸、技術瓶頸的時候應該是講說某一個地方需要優化、速度要快的時候再找特別的人自己再去優化那個比較慢的地方如果跑起來都沒有問題不需要速度優化那就不用沒關係就是先從不用及早優化就是先把東西可以生出來就好好的所以剛剛前面有提到大量元素的時候用GetElementBy會比較快那這邊有提到說GetElementBy Name跟TagName效能上沒有太大的差別好,他這邊有提到比如說像Javascript的主流框架像JQuery和JQmobile裡面的選擇器都是用QuerySelector其實不是因為它的便利性是因為它的速度因為你平常在用JQuery和JQmobile的時候你不會碰到它內部的這些Selector而這些Selector都是它幫你處理好的可能你在用的時候你只是Call一個function你只是叫它的功能來用而已那可是你是開發者你用JQuery或JQmobile的時候你當然也希望這個框架的速度是快的所以它當然要對它的框架做優化所以它是他們在寫的時候是以效能為最佳化的為優先考量那我們自己在寫的時候其實是以便利性為考量所以這邊要把它寫一下它其實是因為它的效能好的那Lab可能就要請大家再自己做做看本章的重點是我們複習了其實複習的就是第二章學的GetElementByIdGetElementByClassName這些用法然後再來我們多學了一個QuerySelector的作法然後我們還比較這兩種的Selector不同的地方好的這邊就是第七章謝謝大家