2-3 getElementById, codepen full 的 console 方法

Original: https://course.andys.pro/Javascript-Intro/02-3-getelementbyid-codepen-full-page-with-chrome-console/

講義

1. 選取元素的方法

• getElementById：
  • 語法：document.getElementById('ID')
  • 特性：單一選取。ID 在頁面上應是唯一的。
  • 注意：如果有多個相同 ID，只會回傳第一個抓到的元素。
• getElementsByClassName：
  • 語法：document.getElementsByClassName('Class名稱')
  • 特性：多重選取。回傳一個類似陣列的 HTMLCollection。
  • 注意：包含字母 s (Elements)。
• getElementsByTagName：
  • 語法：document.getElementsByTagName('標籤名') (如 div, p, input)
  • 特性：抓取所有特定標籤的元素集合。
• getElementsByName：
  • 語法：document.getElementsByName('name屬性')
  • 特性：常用於表單元素 (<input name="...">)，回傳 NodeList。

2. 屬性與資訊獲取

• 基本屬性：取得元素物件後，可直接讀取其屬性。
  • element.tagName：取得標籤名稱 (通常為大寫，如 INPUT)。
  • element.type：取得表單類型 (如 text, button)。
  • element.value：取得輸入框的值。
  • element.className：取得 Class 名稱。
• getAttribute：
  • 語法：element.getAttribute('屬性名')。
  • 用途：獲取指定的 HTML 屬性值。

3. 除錯技巧

• CodePen Full Page View：
  • 在 CodePen 練習時，建議切換到 “Full Page View” 或 “Debug Mode”。
  • 搭配使用 Chrome DevTools (F12)，可以獲得比 CodePen 內建 Console 更完整、更漂亮的除錯資訊。

影片逐字稿largev2

好,我們接下來講2-3就是GetElementById然後GetElementBy的相關方法還有GetAttribute然後這個2-3這個GetElementById大家可以寫一下這個語法是最原始就是最一開始最一開始JavaScript的做法它是ES3的寫法因為畢竟JavaScript是一個已經算很老的語言就是跟C和C++比它算是一個很年輕的語言可是實際上因為網頁和行動裝置的出現所以語言會一直不斷的改版那它是一個ES3的寫法那我們來看喔就是說最簡單我要抓一個東西是不是最簡單就是我只抓一個那ID就是最好的因為ID只會有一個就是你直接抓就抓到了那我們來看一下這份code我記得我也是有那首先呢我這邊我的做法就比較不一樣囉我在這裡面我的做法是我創了一個Codepen就是一個範例的一個snippet就是一個網頁這樣這邊我可以放就是HTML是我有一個ID test然後IMH1然後我的這邊呢我的JS我可以來看我的JS我的JS做什麼事情我的JS就是DocumentGetElementGetElementByIDTest那這個GetElementByIDTest是不是就會去抓什麼就會抓這個H1然後我再把它做什麼我再把它印出來好那這樣子直接在這邊看可能不是很容易理解沒關係我們直接點這個連結進去然後把這個Codepen打開然後這個Codepen你就可以比如說這個介面我們也簡單講一下就是你可以在這邊寫你的HTML在這邊寫你的JS這邊寫CSS然後就可以做出一個很簡單的一個小的網頁那這邊呢它的Console就會把這個印出來可是有的時候我不喜歡這個網頁的Console那這個時候呢這邊有一個跳出來整頁模式這邊你就可以按一下它就會跳出讓它變有沒有看到這兩個差別這個是Pen對不對Four就是它整頁模式那這個時候整頁模式我們可以看到的是它的Console就會是用系統預設的Console那這邊我就會看到我剛剛的Console Log是不是就會跑在這裡H1 TestI am H1那這邊的H1就會是剛剛這邊的因為我們剛剛在這裡面寫的JS就好像是在這個Full Page裡面的這邊去寫的OK就是這邊那我剛剛Console Log印出來就會印在Console這個位置正常網頁是長這樣嘛那它因為它的Console是它自己內建的Console不然它會跑不出來這邊是它自己內建的Console因為它是獨特它有點像是一個虛擬機欸它為什麼怎麼叫不出來那主要是這個Code分享給大家它GetElement把IDTest可以抓到它那我們可以在剛剛這個頁面我們再試一次就是Get先打DocumentDocument就是我這整份的HTML然後呢GetElement然後像你在Google Console有一個好處是它會幫你怎麼樣它會自動幫你填完就是比如說GetElement把ID或甚至你像我自己都是用VSCode就是Visual Studio Code那它就會自動幫你比如說你有時候打GEBI就是有時候你打GEBI它就會GetElement把ID出來好我們現在把它選出來然後選Test然後它就會選到這個沒問題吧好我們來測一下講義下面這裡它說是大小敏感的就是說假如你這裡面的Test這裡的Test假如是小寫的這兩個是要一樣的喔你不可以一邊是大寫一邊是小寫Test是大寫嘛對不對這全部都是大寫嘛然後最後一個問題在哪裡就是它沒有什麼它沒有把它選起來嘛對不對那我們來測一下嘛就是我們不要光說不練我們試試看好那我們先把這邊先註解掉我直接用這個好了用for自己來測好我們在這裡我們直接呢Document對不對GetElement把ID第一個例子是什麼第一個例子是我要Test的第一個是大寫然後它就抓不到因為你沒有這個東西那我如果四個都大寫它也抓不到因為它明明就是小寫的四個都是小寫嘛好最後一個這可能大家有時候會不小心打錯喔忘了打分號喔這什麼意思為什麼這個時候你的Test其實是一個變數對不對我甚至是我如果都是小寫老師我都是小寫為什麼抓不到因為為什麼我會抓不到因為就是Test是一個變數啊就是你要這個是一個自創然後Test是一個變數不好意思就是這份講義它是從就是可能從HTML然後開始帶領你去就是抓HTML的東西來學習那可能大家在這邊可能還是會很很混淆就是什麼是變數什麼是自創那這個東西後面會講就是因為這是講義排順序的問題就是如果我前面講數字和自創的話然後又要用GetElement把ID或是這些東西的話就是沒關係反正這幾天一定就直接會好所以不行吧就是因為這是變數嘛就是Test這個是變數那所以這前面這三這兩個可能會Get到Null喔可是最後這個可能不見得會Get到Null喔這邊要注意喔就是假如你就是這份講義你要注意就是這第三個這不見得是Null喔因為有時候你的Test這個變數是沒有那這個就會直接什麼他就會噴這個UncaughtReferenceErrorTest is not defined他就會跑出It’s not defined喔這個這要注意就是Test字變這麼醜Sorry若為定義會為什麼啊不知道為什麼等我現在開開那個ReferenceError喔直接用打的喔不好意思會會ReferenceError好好的那這邊2-14我們提到一件事情是我們剛才講說要直接抓一個東西最快就直接ID只有一個所以我們直接抓他可是有時候我們是新手嘛對不對我們會出現什麼狀況我們有時候IDIDID設然後我們就會把好多個東西設成同一個ID那這樣當我要抓ID的時候怎麼辦他會抓到什麼那這邊就是大家記得一個原則就是他只會抓一個元素因為他是GetElement他是一個就是他只會抓到IamFirst這個東西我看一下我有沒有列範例這邊有沒有列範例好像沒有列沒關係那我現在LiveCoding寫給大家看吧直接建一個Pan這邊說有幾個有這幾個對不對卡過來那我們這邊直接卡過來我看一下然後他跑了嗎跑了閃了一下他只抓到IamFirst他不會抓到後面的他只會抓第一個他是GetElement再來我們看ClassName就是抓Class那這邊呢大家要注意一件很重要的事情就是ES3的這種寫法就比較舊的寫法要注意這個S很重要一次抓很多個所以他GetElement這邊有一個SByClassName那你如果是用比如說Google他直接幫你推薦完了你就其實不會看到那我們來看一下我們現在來抓Class的時候我們怎麼抓東西呢那這邊應該有我記得我有放ExampleCode這個我等一下再命名好2-15這裡出不來出不來重整沒有Save先Save怎麼出不來他不給我看Console好吧那我們就把他打開在旁邊這樣開全頁模式好的首先我裡面有什麼首先我裡面有一個Test和RedTest然後我用我這邊我重新顯示給大家看Document對不對我有一個文件然後我GetElementByClassName有沒有抓他的Class那這個東西我們怎麼看他的Class我們在Debug的時候一隻手就是弄起來然後指他對不對指他這邊會告訴你有一個Body這個Body裡面有兩個P再來是這個然後他有Class一個是Test一個是Red那所以我現在我要抓Test那我們在這邊GetElementByClassName然後我們把記得喔這個分號我要抓Test這時候他就給你一個HTML Collection他就抓到這兩個東西OK抓到一個是這個是Test然後這個是RedTest他抓到這兩個東西好我們來看講義好的那如果說我今天我在這裡面放了RedTest然後空白空白的話那他會抓到什麼呢他會抓到的是他會只抓到這一個要同時有Red同時有Test在同一個物件裡面他才會抓到他OK那前面這個就不會抓到那其實有時候大費周章嘛因為我原本這個Class就只有Red我也可以直接這樣抓就可以抓到我直接Red就抓他就好啦因為這個有Red有Test那這個只有Test好的那我們再來看GetElementByTagName跟GetElementByName那這兩個Example我會直接小偷懶一下直接看W3Schools的Example好的那在這邊呢他這邊寫了一個List那這個List是有Coffee,Tea,Milk然後呢他這邊的做法大家簡單理解一下就是當我按這個按鈕的時候他會執行這個Function他的寫法就是介面上有點不太一樣然後這邊他做什麼事情他去Document, GetElementByTagName他去抓LI那他抓LI是會抓到幾個會抓到這這三個嘛對不對Coffee, Tea, Milk那他選擇用小括號去選第一個那第一個在我們簡單講一下JavaScript裡面所有的數字開頭都是從00開始所以他抓第一個其實會抓到T有沒有他抓到T那他這邊GetElement下面這邊innerHTML這個寫法只是為了要把這個T印回來給大家看那如果大家還是不是很理解的話沒有關係我們來看我們剛剛這份Code我們剛剛前面的Code是不是有試過就是GetElementByClassName裡面有抓Test那抓到Test裡面是不是有兩個東西那我們來嘗試一下如果我說第一個其實第一個是這個RedTest不是這個Test那第0個是剛剛This is a Test第一個這個這樣講好饒口第一個東西就是0就是Index是0的這個Test那這個Index是1好那這邊他這個Example要告訴你的是他可以一次抓TagName這個TagName是Li他一次抓所有的Li然後把Li的CoffeeTea Milk這樣抓出來那如果說我們試試看我可以改一下Code我把他放在UL外面我說他是Milk2那我重新去Run他其實會一次抓到4個那如果我把這個Li放在前面來講好了他現在重新跑他應該跑的時候第一個他抓到的是什麼他抓到的是Coffee因為他第0個是Milk這是01234OK嗎大家可以理解嗎沒關係那我們這邊比如說第0個我一個一個跑給大家看0是Milk第一個是Coffee第2個是Tea他要重跑了Tea第3個重跑是Milk然後第4個才是Milk2那這邊其實要學的事情是GetElementsByTagName是去抓Li那他抓Li他是一次把檔案裡面所有的Li全部都抓出來在這邊的話他是一次抓所有的Li全部抓出來那我們現在來抓名稱這個元素那我們來看一下這個Example那他這邊又更複雜了一點他在FirstName這邊又寫一個FirstName這兩個都是叫FirstName他裡面是Michael跟Dar然後呢我們看一下他按這個按鈕他要做的事情他去GetName然後去抓FName那元素裡面的Name是FName的他就會同時抓兩個東西出來然後抓兩個東西出來以後他抓第0個的TagName所以是TagName是什麼所以是Input他TagName是Input就是這個的兩個都是FName其實他這邊的話我們可以試試看如果我們不要知道他的TagName我們想看他的Value這就是Michael第0個我們抓第0個他的Value是Michael我不見得要抓他的TagName我可以輸出他的Value他這邊不是有Value嗎就是這個元素我抓到的元素是這兩個元素那我們如果要更容易理解的話我也是開一個Codepen給大家看再開一個Codepen再開一個Codepen把它存起來然後我可以把它展開我先把它展開我先把它展開然後我把剛才那一份Code這邊他是什麼因為我覺得直接開這樣應該比較容易直接開這樣應該比較容易理解我這邊有我這邊有兩個一個是Michael一個是Dark他們兩個都是前面是文字後面是Input那我今天在Console的時候我想要抓的是我直接DocumentGetElementByName他的Name都是什麼他的Name都是FName然後我就抓到兩個他這邊寫的是NodeList然後NodeList裡面是我抓到這兩個元素一個是這一個元素我點一下他就跑到那裡去一個是這個元素一個是這個元素那這元素裡面每一個元素比如說我想要抓我抓到這兩個了那抓到這兩個以後呢我可以呼叫他第0個是什麼第0個是這一個嘛第一個是後面這個對不對那這個時候呢我可以說我可以去問他說你的TagName因為我已經抓到這個元素了我可以說你的TagName是什麼然後跟你講我是Input或是我可以問你說你的值是什麼Value值是Michael那第二個就是Index是1然後他的Value是DarkOK然後這邊就可以看到然後我甚至可以問比如說他的Type他的Type是TextOK所以你就可以看到很多的他其實就是一個在這裡面來講的話就是.Name.Type.ValueOK這邊可能要花一點腦氣是不是很燒腦好哇時間打超過好再來我們來看GetAttribute就是我們來拿這東西的屬性那我剛剛已經有拿過一個Input的屬性那我們來跑跑看這方面的Call那這邊他就可以直接跑就是我拿到這個Input然後拿這個Input裡面我去想要看他的Type是什麼那他的Type是Button那我們試試看這份Call好好的那我們直接這邊我們來看所以我剛剛這邊跟課本上面一樣那我的JS呢我後面這邊做了很多Call因為後面這些Call都是下面這些Example好那我把它首先呢是不是我要拿他的Type所以我GetElement把ID Input是GetAttribute Type然後他就把Type印出來他是一個Button那下面這邊的Input他Input是GetElement by ID Input那是不是跟上面這裡一樣GetElement by ID只是他後面有GetAttribute Type所以要把他存成Type那這邊我是直接拿這個Input那這個Input我可以直接拿他的什麼拿他的ClassName那我覺得我們可以把就是我們可以把這個連結點下去然後我們到他的整頁模式這樣大家可能比較容易就是直接用InspectElement直接玩那我們可以看一下這邊我要拿我們可以先建一個然後DocumentDocument我先把文件叫出來GetElementby ID然後他的名稱是Input沒抓到他不是Input嗎哪裡打錯哪裡打錯沒有我沒打錯不好意思就是我Get他了以後他是不是已經存到Input所以我直接叫Input出來他就已經有抓到這個物件抓到這個物件以後呢我可以直接Input.Class我是用ClassName就可以看到他有什麼底線Class這個ClassName然後再來我想要知道他什麼我想要知道他的Style想要知道他的TagName所以我可以點Style然後就拿到一戳他的CSS一大戳那他空的他就是裡面都沒有東西可是他就是放空的然後TagNameTagName就是Input他最前面是什麼他是Input那這邊就是讓大家去練習一下然後CoreLab大概可以測試一下本篇的重點就是DOM是一個樹狀結構的表示法剛剛有同學寫2-1-1的2-1的第一題的練習題然後有一點小問題樹狀結構那個我會跟CoreLab我會跟他們反應一下再來我們可以學到的是用CreateElement可以創建標籤然後我們可以去設定他的ID是什麼或是Class是什麼可以用SetAttribute去設定再來我們可以既然可以設定他的ID我們也可以透過ID把某一個值從HTML裡面抽出來那再來呢我們可以去指定我們可以去取這個物件比如說我們已經取到這個物件我們可以去知道他的屬性有什麼他Type是什麼他的Value是什麼等等之類的那這邊是DOM的結構練習然後要叫你試著畫出他的結構畫出結構可能就是像上面那個樹狀圖把它畫出來有Head裡面有Title有值阿可以參考剛剛前面講的部分那Lab的話就是這邊就是要創建一個Input放在Body裡面裡面要加一個Placeholder然後CSS有教大家怎麼把字體置中所以你就可以用剛剛前面教的方法去把H1去加入的Style裡面的Style裡面去把它設定置中好這是第二章的部分謝謝