7-1 getElement Id Tagname ClassName

Original: https://course.andys.pro/Javascript-Intro/07-1-getelement-id-tagname-classname/

講義

1. 取得標籤元素：ES3 方法

在 JavaScript 中，我們可以使用以下三種傳統方法來選取網頁中的 DOM 元素：

• getElementById("id")：
  • 透過唯一的 ID 找尋元素。
  • 回傳值：單一元素 (Element)。
  • 注意：ID 在網頁中理論上必須是獨一無二的。若重複，只會抓到第一個。
• getElementsByTagName("tag")：
  • 透過標籤名稱（如 p, div, input）找尋元素。
  • 回傳值：HTML Collection (元素集合，類似陣列)。
• getElementsByClassName("class")：
  • 透過 Class 名稱找尋元素。
  • 回傳值：HTML Collection。
  • 技巧：若要同時篩選多個 Class，可以用空格區隔，例如 getElementsByClassName("red blue")。

2. HTML Collection 的處理

取得的「集合」 (Collection) 與單一「元素」 (Element) 不同，你無法直接對集合修改樣式。

• 錯誤法：collection.style.color = "red" (無效)。
• 正確做法：必須指定索引值 (Index)，或使用迴圈批次處理。
  • 範例：collection[0].style.color = "red"。
  • 屬性：可以使用 .length 取得集合內元素的總數。

3. 實作技巧：Chrome Console 與 VS Code

• Chrome Console：
  • 按下 F12 或右鍵「檢查」開啟開發者工具。
  • 在 Elements 面板選中元素，搭配 Console 面板可以直接測試變更樣式，例如 document.getElementById("id").style.backgroundColor = "black"。
• VS Code 預覽：建議將 HTML 檔案以瀏覽器開啟，同步開啟開發者工具進行偵錯。

影片逐字稿 (AI 生成)

大家好 我們現在開始來介紹第七章 取得標籤元素那在第七章裡面呢 我們所要看到的是ES3的方法 然後再來後面是CurySelector和CurySelectorAll那ES3的方法其實我們在第二章就已經有碰到一些那我們現在來看一下7-1的方法 我們前面已經有看到好 7-1使用ES3的方法我們前面是不是有學到 GetElementByIdGetElementsTakeName和GetElementsByClassName還是注意一下 所以我們把還是把那個s畫起來好了 GetElementsById是他只會抓到一個指定的id的元素那大部分的時候是唯一值好的 那現在我們就直接來做範例那第一個就是他要抓ElementById 然後我們看一下然後這個id就是大部分是唯一的值 那我們前面也有提到第二章有提到嘛 如果你有你今天你寫code 你的code不是很好就是你有很多個div就是dom就很多個dom裡面的id都是同一個時候你GetElementById就會抓到什麼就會抓到第一個然後後面他就不理他這樣子好的 這裡沒有範例不過我們就自己做吧好 這時候我們到我們到codepad這是我做的另外一個例子不過好 然後我們建一個codepad有一支筆 然後呢我們在這邊直接寫什麼比如說我們一個dom一個dom就是一個div然後我們就寫this is one好 現在有三個東西那我今天如果設定第二個這個有id是id好了好 那我們這邊把它建好了我可以在這邊寫JavaScript可是呢 我現在呢我想要用我們電腦內建的那個console所以我先把它存檔這裡記得先按save那命名的話你當然也可以命名你如果沒有命名的話也沒有關係當我們把這個東西你有登入然後你有存檔了以後呢我們會發現這邊有一個按鈕下面這邊有一個按鈕大家有看到嗎跳出了這個按鈕好 那當你按下這個跳出的按鈕的時候原本這邊是colpan.io然後這是我的縮寫就是txs然後後面是pan當我按下這個按鍵的時候呢然後後面這個id是這一個我們現在這個example的id那我們這個pan會變成full我們可以看一下是liveoh full對好它是先轉live然後再轉full所以看到我們這邊有一個full好txsfull然後這邊是id你如果它沒有自動幫你轉的話你也可以自己把pan改成full好我們按右鍵我們到檢查那我們拿這支筆這個箭頭我們指到這幾個元素好我們知道它我們是不是就看到我們剛剛寫的code這邊是this is one然後這是id是id好然後我們就來執行我們剛剛要跑的東西那這邊再多跟大家講一個就是我們這邊有三個點按下menu這邊有一個show console drawer就是你在element的時候同時如果你的螢幕夠大你可以把console開在下面有沒有這邊同時你有element這邊你有你的可以看到你的style是長怎樣同時你的console可以開在下面不一定一定要直接切過來只是這樣畫面就會非常雜亂好先把這個東西先清掉好那我們先想一下就是剛才叫做document要記得喔就是要先document然後再來getelementbyid很記得我們剛才命名什麼嗎如果忘記的話我們還可以看一下就是直接這樣嗯欸選沒選到我要選選下面這個不讓我選啊怎麼選不到好選到好id對不對對不對所以我們就是getelementbyid這時候就選到他了OK所以這就是嗯你就可以這樣來做操作好的那我們再接下來看下面getelementby tag name那tag name我通常會抓的是什麼通常會抓的是input和p然後呢就是或是會抓就是各種的不同的標籤名那標籤名通常都是比如說像呃p的話就是paragraph嘛input就是呃可能輸入輸出你可以去改他的值你可以用程式去做這件事情好那如果輸入星星的話會返回所有元素的組合好那我們現在來測試一個p好了那我們可以把我們剛才code我們可以再加我們可以再加p然後因為他是他有好幾個嘛我們就複製好幾份好了就好像我寫了很多文章這樣子好那我把它存起來然後這邊應該他不會自動跑出來我們可以把它重整一下有沒有大家有發現剛才這兩個頁面的差別嗎一個是pen一個是full可是他們id都是一樣的代表他們是同一個文件只是不同的介面好的好那我們現在來documentdocument.getElementsbyTagName然後我們抓什麼我們抓p好這時候我們抓p的時候我們會抓到一個html collection看到抓到嗎看一下這是什麼他沒有抓到怪怪的再重整一次好code pen有時候會有就是有時候他好像會怪怪的他還是抓錯嗎好像還是抓錯好沒關係那我們如果有時候code pen會出這樣的問題的時候我們把我們的code拿起來然後我們回去用vscode的方法好vscode我們剛才這是第幾頁7-4頁對不對那我們可以建一個我們可以建一個7-4的html然後我們這邊建一個html以後呢我們用驚嘆號可以創一個很快速的創head跟body都建出來那因為我們現在只是要測試所以我們其實不用管他內容是怎麼樣我們只要在body裡面放入我們剛剛的tag然後我們記得要用tab把它縮排縮好就是縮排這樣比較清楚我們這邊總共有this is有這幾個東西然後還有paragram好那我們記得把它存檔那我們7-4存檔了以後呢我們在這邊我們去我們的資料夾我們把這個檔案用你的瀏覽器打開好我打開了以後呢我們會看到這是在我資料夾file的位置上的7-4然後我們也可以就是用inspect element然後我們在這邊來對它做操作好我們這邊 document點 get elements by tag name然後我們要抓的是p好這時候就正確了有沒有它是一個html collection裡面有三個東西批批批批然後呢有沒有我們選到這個上面來它就會告訴你它在哪裡好那這個時候呢大家還記得就是我們這邊用數字第0個就是它這個嘛然後再來第1個就是這一個再第2個就是這一個我們可以去這樣選然後就選到這一個那比如說我們再更進階一點我們來做點它裡面有什麼我們看一下有沒有我們認識的有一個東西叫做stylestyle完了以後就會用到大家可能之前學的csscolor顏色字的顏色等於什麼比如說我們我們用比較快的方法就是我們直接講說我要把它改紅色所以這時候我就可以把這個改成紅色style color直接改這個紅色OK那你們css才有學到其他不同的特性那這些特性其實都是在style底下然後你可以把它扣出來然後去改它那其實也可以這樣直接看就是說我的style下面有什麼好這樣style然後看到這個style我們直接打style的時候我們可以看到下面有什麼下面有很多有background有background color有一堆的元素那這些東西跟css的不同點在於說它的命名法則是用background然後第二個這邊不是用簡號去連接而是這個字母是大寫clipcolor是這樣那我可以改它的背景色比如說我今天想要把剛剛這個元素啊就是說我想要把它變成是style.background然後color是black我就可以把背景改成黑色或者甚至是你們應該會用警字號對不對比如說像5556這樣可以嗎可以可以它就改成556的顏色警字號那也可以用6個碼的對不對556677就更仔細可是因為這幾個太接近了所以我們一一這樣有沒有就會改它的背景顏色OK你可以用三個或這幾個都可以就在觀考好那這邊我們把tagname講了一下再來我們講class nameelements by class name好的那我們的example就要再多加一些東西了所以我們要加呃我們先看一下它這邊寫的get elements by class nameredblue然後還有就是就是它要有redblue這樣子嘛好那我們可以做什麼事情呢我們可以把我們剛剛的p再加上class對不對我們可以加red和blue那這時候我們可以去我們剛剛的檔案那我現在是直接叫vscode出來然後把這邊呢我們給它加class給它加class你加class加什麼加一個是red一個是blue一個是red blue存檔存檔完以後我們到剛剛這個檔案把它拉到中間好了不然太小了你們可能看不清楚而且你們可能是用切半邊的螢幕所以我這邊我可以調整dark size我可以把它放到下面好我們這邊來看現在的code可能還是剛剛的code喔所以我們可以選一下欸我這邊剛好被欸我這邊剛好被我剛剛擋到喔喔喔不行看一下看一下剛剛這裡code有沒有這裡還沒有跑出剛剛的class所以代表說我還沒有重整所以我要重整我重整以後有沒有發現一件事情red bluered blue都出來了ok這邊可以來做document.getelementby class name然後這邊可以比如說我先簡單一個example是我直接先抓red的有沒有它會抓到什麼它會抓到兩個東西一個是第一個有red的class的還有第第二個這個就是01index為1的是這個元素有red的有blue的ok那我們現在get elements by class name如果我們今天空白然後再加一個blue它會抓到什麼它會抓到的是這邊空白get elements by class name如果中間放空白的話它會抓到的是同時擁有red跟blue的元素就是這個可以看一下ok那大家有時候在用這些元素的時候最怕一件事情就是你覺得你抓到一個東西然後你想要直接用它可是通常我們都會建議大家就是在console裡面看一下因為你以為你抓到的是一個東西實際上它是還是一個數列只是它裡面有一個東西所以我們這時候就用這樣子我們後面要補括號0我們才可以拿到真正的元素ok就是說我們拿到這個東西其實是一個html collection它是一個數列裡面只有一個東西就像你有一個書櫃裡面有一個書包可是你把它當書包用的話它就會找不到那比如說我們可能會這樣子然後點style可是不行啊因為你還沒有到接觸到裡面那個東西你要括號0這才是元素然後才可以點styleok因為它裡面就是裡面有一個東西你要先抓到這個背包裡面背包裡面才可以改顏色啊做任何事情可是你如果你現在碰到這個你沒有0的話是碰到的是書櫃一個書櫃一個書櫃裡面只有一個東西所以你要把index叫出來這才會是一個元素當你這樣叫它的時候它是一個html collection這邊要注意一下ok好的那這邊example呢又做了更多的事情然後我們看一下我們從這個example我們去改我們的code我們發現它要去抓一個是有example color然後還有它要去抓它的長度然後它的sample code長得是這樣子好的那我們就把嗯前面兩個東西加上example好了然後它還要有一個是有color好那沒關係那所以我們要把我們的如果我們只要寫一份sample code的話我們就把我們剛剛那個7-4的p我們再加example跟color那我們就要把這裡再加example然後後面這個blue我們給它加example color然後把它存檔存完了以後呢我們再回來到這裡我們記得要重整好的example跟example color都進來了ok那我們可以來測試一下這個就是它所要叫我們跑的程式當我跑完了以後呢就是還記得還是要記得喔它是把這個get elements by class name存到ex裡面去所以我要看example有什麼好exampletml collectionok裡面有幾個東西呢那我們可以x我們x可以怎麼樣呢我們可以去看它的長度點length好裡面有一個東西ok那我要用這個東西的時候我要x0去用它然後它就會跟你講說它就會跟你講說它就會顯示說喔這是第0你是選到是這一個ok其實我們這邊就是一直在重複的在講就是一步一步的跟大家講好的第二個例子這邊它宣告這個它是只有抓example那也沒有關係我們把這個抓過來我們先把它先清掉好了那我們可以直接看x會看到的長度是2那大家就會覺得說欸為什麼是2我可能看不到它裡面有什麼東西對不對我知道它有兩個那其實它抓的是什麼我們如果在對程式有更深入一點點的了解還有想像的話我們可以知道說get elements by class name所以它只抓example會抓到的是這兩個東西然後它算它的長度當然有兩個元素啦所以就是2可是如果欸我可能沒有辦法那麼抽象的直接想像到就是算出來有兩個的話沒關係我們把前面在這裡再複製一下我們到後面我們再執行一次好然後我們把html collection打開我們看第0個第1個OK有這兩個東西那Chrome很好是它連點lens這個東西它都先幫你寫好在後面有兩個它都先顯示給你看OK這html collection是這樣總這樣好的那我們現在來跑下面這段code那因為我們抓到example有兩個那我們已經可以想像的x就是x其實就是我們剛剛抓到這個東西對不對只是我現在把它存到x裡面去我們先理解這段code存到x裡面這個存到x裡面去了以後呢我們這邊用的是一個4回圈那當然我們4在下一張會交到不過我先跟大家講一下就是然後裡面有4回圈好那我們x.length是不是是2對不對大家前面是不是有就是我們剛剛這個example是不是有看到example.length是不是2所以這個4回圈呢會跑兩次那跑兩次它就是等於是第一次是0第二次是1然後它把背景顏色都改成紅色好那我們跑跑跑看我們如果不理解的話也沒有關係所以我們先把code複製起來然後先把它清掉然後我們要整理一下這邊的code然後首先呢這邊是document.getElementsbyClassNameexample先抓x出來我一步一步帶大家好了等一下我把這邊先刪掉好我們可以看一下x有什麼x是不是抓到兩個東西ok然後再把後面這邊vr i先我先建一個ii然後我要跑回圈這邊我要跑回圈我們先建一個ii現在是undefined沒有東西然後回圈這個東西我們先不用看沒關係我們先把它照抄貼過來照抄貼過來好我們先把它好我剛才這邊怎麼讓它馬上跳過來是用tab跳過來好然後呢它這邊呢會去改它的style還有background color會改成紅色所以這個時候這邊多了一個跑一下所以它把這兩個都畫成紅色那其實4我們先不用理解4可是這段code在幫我們做的事情其實是在其實是在我現在先重整喔不好意思好我們再把剛剛的x先做然後在這邊你按上就可以回到剛剛的code就是可以把剛剛的code交出來好我們先抓到x這件事情那其實剛剛這段codefor這段code在幫你做的事情是這樣是x然後呢第0個對不對然後點style點background color然後等於red好第一個這樣做完對不對然後再做第二個OK它是這樣幫你01做兩次那做兩次其實它就是用程式的方法幫你跑過兩次但是這個forward在做那我們等一下第八章會腳檔所以大家不用緊張好這邊是7-1那讓大家練習一下

影片逐字稿largev2

我們現在開始來介紹第七章取得標籤元素第七章裡面我們首先要看到的是ES3的方法然後再來後面是QuerySelector和QuerySelectorAllES3的方法其實我們在第二章就已經有碰到一些那我們現在來看一下7-1的方法我們前面已經有看到好,7-1使用ES3的方法我們前面是不是有學到GetElementByIdGetElementByTagName和GetElementByClassName還是注意一下所以我們把還是把那個S畫起來好了GetElementById是它只會抓到一個指定的ID的元素那大部分的時候是唯一一值好的那現在我們就直接來做範例那第一個就是它要抓ElementById然後我們看一下然後這個ID就是大部分是唯一的值那我們前面有提到,第二章有提到嘛如果你有你今天寫code不是很好就是你有很多個DIV就是DOM就很多個DOM裡面的ID都是同一個的時候你GetElementById就會抓到什麼就會抓到第一個然後後面它就不理它好的,這裡沒有範例不過我們就自己做吧好這時候我們到我們到Codepad這是我做的另外一個例子不過好,然後我們建一個Codepad有一支筆然後呢,我們在這邊直接寫什麼比如說我們一個DOM一個DOM就是一個DIV然後然後我們寫This is one好,現在有三個東西那我今天如果設定第二個這個有ID是ID好了好,那我們這邊把它建好了以後,我可以在這邊寫Javascript可是呢我現在呢,我想要用我們電腦內建的那個Console所以我先把它存檔,這裡記得先按Save那命名的話你當然也可以命名,你如果沒有命名的話也沒有關係當我們把這個東西,你有登入然後你有存檔了以後呢,我們會發現這邊有一個按鈕下面這邊有一個按鈕大家有看到嗎跳出了這個按鈕好,那當你按下這個跳出的按鈕的時候原本這邊是Copen.io,然後這是我的縮寫就是TXS然後後面是PEN,當我按下這個按鍵的時候呢然後後面這個ID是這個,我們現在這個Example的ID那我們這個PEN會變成Full我們可以看一下是Live喔Full,對,它是先轉Live然後再轉Full,所以看到我們這邊有一個Full然後這邊是ID你如果它沒有自動幫你轉的話你也可以自己把PEN改成Full好,我們按右鍵,我們到檢查那我們拿這支筆這個箭頭,我們指到這幾個元素好,我們指到它,我們是不是就看到我們剛剛寫的Code這邊是This is one然後這是ID是ID嘛好,然後我們就來執行我們剛剛要跑的東西那這邊再多跟大家講一個就是我們這邊有三個點這邊有一個Show Console Drawer就是你在Element的時候同時如果你的螢幕夠大你可以把Console開在下面這邊同時你有Element這邊你有你的可以看到你的Style是長怎樣同時你的Console可以開在下面不一定一定要直接切過來只是這樣畫面就會非常雜亂好,先把這個東西清掉好,那我們先想一下,就是剛才叫做Document,要記得喔就是要先Document,然後再來GetElementByID還記得我們剛才命名什麼嗎如果忘記的話我們還可以看一下就是直接這樣選沒選到我要選下面這個不讓我選怎麼選不到好,選到好,ID對不對所以我們就是GetElementByID這時候就選到它了OK,所以這就是你就可以這樣來做操作好的,那我們接下來看下面GetElementByTagName那TagName我通常會抓的是通常會抓的是Input和P或是會抓各種不同的標籤名標籤名通常都是比如說像P的話就是Paragraph,Input就是可能輸入輸出,你可以去改它的值可以用程式去做這件事情好,那你如果輸入星星的話會返回所有元素的組合好,那我們現在來測試一個P好了可以把我們剛才的Code我們可以再加P然後因為它是它有好幾個嘛,我們就複製好幾份好了就好像我寫了很多文章這樣子好,那我把它存起來然後這邊應該它不會自動跑出來我們可以把它重整一下有沒有大家有發現剛才這兩個頁面的差別嗎一個是Pen一個是Full可是它們ID都是一樣的代表它們是同一個文件,只是不同的介面好的好,那我們現在來DocumentDocument.getElementsby tagName然後我們抓什麼我們抓P好,這時候我們抓P的時候我們會抓到一個HTML Collection大家有抓到嗎它沒有抓到怪怪的再重整一次好了Codepen有時候會有就是有時候它好像會怪怪的它還是抓錯嗎,好像還是抓錯耶好,沒關係,那我們如果有時候Codepen會出這樣子的問題的時候我們把我們的Code拿起來然後我們回去用VSCode的方法好,VSCode我們剛才這是第幾頁七之四頁對不對那我們可以建一個我們可以建一個七之四的HTML好然後我們這邊建一個HTML以後我們用驚嘆號可以很快速的創head跟body都建出來因為我們現在只是要測試,所以我們其實不用管它內容是怎麼樣,我們只要在body裡面放入我們剛剛的tag然後我們記得要用tab把它縮排縮好縮排這樣比較清楚我們這邊總共有幾個東西,然後還有paragraph好,然後我們記得把它存檔七之四存檔了以後呢我們在這邊我們去我們資料夾我們把這個檔案用你的瀏覽器打開好,我打開了以後呢我們會看到這是在我資料夾file的位置上的七之四然後我們也可以就是用inspect element,然後我們在這邊來對它做操作好,我們這邊document.get element by tag name然後我們要抓的是p好,這時候就正確了有沒有,它是一個html collection裡面有三個東西ppp,然後有沒有,我們選到這個上面來,它就會告訴你它在哪裡好,那這個時候呢大家還記得就是我們這邊用數字,第0個就是它這個嘛,然後再來第1個就是這一個,再來第2個就是這一個我們可以這樣去選,然後就選到這一個那比如說我們再更進階一點我們來做點它裡面有什麼,我們看一下我們認識的有一個東西叫做stylestyle完了以後就會用到大家可能之前學的csscolor,顏色字的顏色等於什麼比如說我們用比較快的方法,就是我們直接講說我要把它改紅色所以這時候我就可以把這個改成紅色style color就直接改這個紅色那你們css才有學到其他不同的特性那這些特性其實都是在style底下然後你可以把它call出來然後去改它那其實也可以這樣直接看就是說我的style下面有什麼好,這樣style,然後看到這個style我們直接打style的時候我們可以看到下面有什麼下面有很多有沒有,有background有background color有一堆的元素,那這些東西跟css的不同點在於說它的命名法則是用background,然後第2個這邊不是用簡號去連接而是這個字母是大寫clip color是這樣,那我可以改它的背景色比如說我今天想要把剛剛這個元素就是我想要把它變成style.background然後color是black我就可以把背景改成黑色或甚至是你們應該會用就是景字號對不對,比如說像556這樣可以嗎可以,有沒有,它就改成556的顏色景字號那也可以用6個碼的556677就會更仔細可是因為這幾個太接近了所以我們11就會改它的背景顏色你可以用3個或這幾個都可以就在關卡了好那這邊我們把tag name講了一下再來我們來講class nameget elements by class name好的,那我們的example就要再多加一些東西了我們來加我們先看一下它這邊寫的get elements by class name, red, blue然後還有就是它要有red blue那我們可以做什麼事情呢我們可以把我們剛剛的p再加上class我們可以加red和blue那這時候我們可以去我們剛剛的檔案那我現在是直接叫VSCode出來然後我們把這邊呢,我們給它加class你加class加什麼,加一個是red一個是blue一個是red blue存檔存檔完以後我們到剛剛這個檔案把它拉到中間好了不然太小,你們可能看不清楚而且你們可能是用切半邊的螢幕所以我這邊我可以調整dark size,我可以把它放到下面好我們這邊來看現在的code可能還是剛剛的code喔所以我們可以選一下我這邊剛好被我剛好擋到好,不行看一下剛才這個code,有沒有這裡還沒有跑出剛剛的class所以代表說我還沒有重整所以我要重整我重整以後有沒有發現一件事情red blue red blue都出來了ok,所以我這邊可以來做document.getelementby class name然後這邊可以比如說我簡單的example,我直接先抓red有沒有,它會抓到什麼它會抓到兩個東西一個是第一個有red的class還有第二個就是index為1的是這個元素有red有blue的ok那我們現在get element by class name如果我們今天空白,然後再加一個blue它會抓到什麼它會抓到的是這邊空白,get element by class name如果中間放空白的話它會抓到的是同時擁有red跟blue的元素就是這個可以看一下ok那大家有時候在用這些元素的時候最怕一件事情就是你覺得你抓到一個東西然後你想要直接用它可是通常我們都會建議大家就是在console裡面看一下因為你以為你抓到的是一個東西實際上它還是一個樹裂只是它裡面有一個東西所以我們這時候就要用我們後面要補括號0我們才可以拿到真正的元素ok就是說我們拿到這個東西其實是一個HTML collection它是一個樹裂裡面只有一個東西就像你有一個書櫃裡面有一個書包可是你把它當書包用的話,它就會找不到那比如說我們可能會這樣子然後點style可是不行啊,因為你還沒有到接觸到裡面那個東西所以你要括號0這才是元素然後才可以點styleok因為它裡面就是裡面有一個東西你要先抓到這個背包裡面背包裡面才可以改顏色啊做任何事情可是你如果你現在碰到這個你沒有0的話,是碰到的是書櫃一個書櫃裡面只有一個東西所以你要把index叫出來它是一個元素當你這樣叫它的時候,它是一個HTML collection這邊要注意一下ok好的那這邊example呢又做了更多的事情然後我們看一下,我們從這個example我們去改我們的code,我們發現它要去抓一個是有example color然後它要去抓它的長度然後它的sample code長的是好的那我們就把前面兩個東西加上example好了然後它還要有一個是有color好,那沒關係那所以我們要把我們的如果我們只要寫一份sample code的話我們就把我們剛剛那個7-4的P我們再來再加example跟color那我們就要把這裡example然後後面這個blue我們給它加example color然後我們把它存檔存完了以後呢,我們再回來到這裡我們記得要重整好的,example跟example color都進來了ok那我們可以來測試一下就是它所要叫我們跑的程式當我跑完了以後呢就是還記得,還是要記得喔它是把這個getElementsByClassName存到X裡面去所以我要看X有什麼好,X是一個HTML collectionok裡面有幾個東西呢那我們可以X我們X可以怎麼樣呢我們可以去看它的長度.length好,裡面有一個東西ok,那我要用這個東西的時候我只要X0去用它,然後它就會跟你講它就會顯示說你選到的是這一個ok基本上這邊就是一直在重複的在講就是一步一步的跟大家講好的,第二個例子它宣告這個它是只有抓example那也沒有關係我們把這個抓過來我們先把它清掉好了那我們可以直接看X會看到的長度是2那大家就會覺得說為什麼是2,我可能看不到它裡面有什麼東西對不對,我知道它有兩個那其實它抓的是什麼我們如果對程式有更深入一點點的了解還有想像的話我們可以知道說by class name,它只抓example會抓到的是這兩個東西然後它算它的長度,當然有兩個元素啦所以就是2可是如果我可能沒有辦法那麼抽象的直接想像到算出來有兩個的話沒關係,我們把前面這裡再複製一下我們到後面再執行一次好,那我們把HTML collection打開我們看第0個,第1個ok,有這兩個東西那Chrome很好是它連.length這個東西它都先幫你寫好在後面有兩個,它就先顯示給你看ok,這HTML collection長這樣好的那我們現在來跑下面這一段code那因為我們抓到example有兩個那我們已經可以想像的X其實就是我們剛剛抓到的這個東西對不對只是我現在把它存到X裡面去我們先理解這段code存到X裡面去了以後呢我們這邊用的是一個for回圈那當然我們for在下一章會教到不過我先跟大家講一下就是因為這個example裡面有for回圈好那我們的X.length是不是是2,對不對大家前面是不是有就是我們剛剛這個example是不是有看到example.length是不是2所以這個for回圈呢會跑兩次那跑兩次它就是等於是第一次是0,第二次是1然後它把背景顏色都改成紅色好,那我們跑跑看我們如果不理解的話也沒有關係我們先把code複製起來好,我們先把它清掉然後我們要整理一下這邊的code然後首先呢,這邊是document.getElementsByClassNameexample先抓X出來我一步一步帶大家好了等一下,我把這邊先刪掉好,我們可以看一下X有什麼X是不是抓到兩個東西ok然後再把後面這邊var i,我先建一個i然後我要跑回圈我們先建一個i那i現在是undefined,沒有東西然後回圈這個東西我們先不用看沒關係,我們先把它照抄貼過來好我們先把它我剛剛這邊怎麼讓它馬上跳過來是用tab然後呢,它這邊會去改它的style還有背景顏色會改成紅色所以這時候這邊多了一個跑一下所以它把這兩個都畫成紅色那其實我們先不用理解for其實我們做的事情我現在先重整我們再把剛剛的X先然後在這邊你按上就可以回到剛剛的code就是可以把剛剛的code交出來我們先抓到X這件事情那其實剛剛這一段code在幫你做的事情是這樣是X然後呢,第0個對不對然後點style點background color然後等於red好,第一個這樣做完然後再做第二個ok它是這樣幫你01做兩次那做兩次其實它就是用程式的方法幫你跑過兩次那是這個for在做那我們等一下第八章會教到所以大家不用緊張好,這邊是7-1讓大家練習一下by bwd6