一文詳解Javascript類別選擇器方法
這篇文章為大家介紹有關Javascript類別選擇器方法，希望對需要的朋友有幫助！
Javascript類別選擇器方法
瀏覽器作為一個生態和平台，它會提供一系列程式語言可以呼叫控制的函數方法，對於瀏覽器而言，自然是透過Javascript語言呼叫瀏覽器內建方法， 對於作業系統而言，多數語言調可以呼叫它的API。
CSS透過id選擇器或是class類別選擇器可以為HTML元素新增樣式，瀏覽器平台和CSS一樣也提供了可供Javascript語言呼叫的id選擇器和class類別選擇器方法，之前使用的id選擇器方法是getElementById()， 本文要講解的類別選擇器方法是getElementsByClassName()，透過名字你都可以看出他們要表達的意思，標準委員會制定這些標準也不是心血來潮隨意命名，都盡量做到顧其名思其義，當然這是針對英語語言的顧名思義。
ID的特點是選擇一個，class的點特點批量選擇，例如透過Javascript動態地為一些元素批量添加樣式屬性，就主要用到getElementsByClassName()方法。 【相關推薦：JavaScript影片教學】
案例
#在一個已經寫好的HTML和css的檔案基礎上加入Javascript程式碼，實作使用者可以在網頁上批次自訂元素的樣式。
48 <body style="background-color: #777777">
49 <!--自定义颜色功能按钮-->
50 <button style="background-color: #00aaff" id="button1" onclick="fun1()"></button>
51 <button style="background-color: #1abc9c" id="button2" onclick="fun2()"></button>
52 <!--Web应用界面命令-->
53 <div class="command">
54 <!--注释空格-->
55 <div class="bottom padding radius left-radius div">圆弧</div><!--
56 --><div class="bottom padding div">直线</div><!--
57 --><div class="bottom padding div">矩形</div><!--
58 --><div class="bottom padding div">曲线</div><!--
59 --><div class="padding right-radius div">倒角</div>
60 </div>
61 <script>
62 // 批量选中类属性名为div的所有元素，返回所有元素对象组成的数组
63 let arr = document.getElementsByClassName("div");
64 // 定义两个更改颜色的函数fun1和fun2
65 function fun1() {
66 // 遍历所有元素对象
67 for(let i = 0; i<arr.length;i++){
68 // 更改背景颜色
69 arr[i].style.backgroundColor="#00aaff";
70 }
71 }
72 function fun2() {
73 for(let i = 0; i<arr.length;i++){
74 arr[i].style.backgroundColor="#1abc9c";
75 }
76 }
77 </script>
78 </body>程式碼解析
第53行到第60行程式碼定義的是一系列應用程式介面的命令按鈕，第50和第51行程式碼定義的是兩個具有自訂其它元素樣式的功能按鈕button，當你點選其中一個功能按鈕button時候，會呼叫script標籤中的函數fun1()或fun2(),例如執行fun1函數後，第53行到第60行程式碼定義的元素背景元素顏色會批次修改，由灰色變成#00aaff色。
第63行程式碼透過類別選擇器方法getElementsByClassName()選取類別屬性名稱是「div」的所有元素，getElementById()方法傳回的一個對象，也就是元素本身， getElementsByClassName()方法傳回的是所有元素物件組成的陣列。這也就是說，如果你想更改一個元素的屬性值，透過陣列下標的方式存取元素，例如arr[0]表示第55行程式碼定義的div元素。如果直接寫入arr.style.backgroundColor="#00aaff";更改arr全部元素的背景顏色是不合法的，arr是一個數組，它沒有.style樣式屬性，要透過arr [i].style.backgroundColor="#00aaff這樣的形式來重置元素背景顏色。
要更改的元素比較多，而元素要更改的顏色也一致，所以可以透過for循環結構程式來完成，程式碼第67行到第70行的作用就是遍歷數組arr中的所有div元素，然後更改他們的背景顏色。
第65行和第72行分別定義了函數fun1和fun2，可以透過滑鼠點選事件調用，fun1的功能是批次把元素的背景顏色改為#00aaff，fun1的功能是批次把元素的背景顏色改為#1abc9c。
<strong>getElementsByTagName()</strong>
getElementsByTagName()方法和getElementsByClassName()方法一樣可以用於批次選擇元素，傳回的結果從資料型別的角度看都是數組對象，差別之處在於getElementsByTagName()方法是透過元素的標籤名字來選擇元素， 對應CSS的知識點就是元素選擇器，getElementsByTagName()方法名字中的英文Tag就是標籤的意思。
應用
學習了一些選擇元素的方法，知道他們各自的特點，就是為了應用，實際應用的時候如何選擇getElementById() 、getElementsByClassName()和getElementsByTagName()。這一點可以參考CSS，在CSS中一般都是使用類別選擇器， 偶爾使用元素和id選擇器，使用元素的標籤名字來選擇元素，如果一個完整的頁面很多地方都用要某個元素，而這些元素例如要求背景顏色不一樣，你使用getElementsByTagName()方法就會誤傷，getElementsByClassName()的好處就是你想選擇誰，直接貼一個class屬性名就可以，一個元素可以有多個類別名稱。實際工程中往往講究程式碼重複使用，程式碼複用其實就是歸類，例如一個網站往往有一個主題背景顏色，網站的數千萬個頁面都是某個顏色，你只需要定義一個顏色類別樣式， 然後透過在每個頁面引入這個類別名稱就可以。
總結
#本文不只解釋了getElementsByClassName()方法，透過比較的方式解說了Javascript選擇元素的三種方法，對應的是CSS中的元素選擇器、id選擇器、class類別選擇器，透過比較CSS選擇器和Javascript選擇器（DOM方法）， 來降低學習的記憶負擔，從系統的角度去學習技術，站在標準委員會制定者的角度去理解一個技術標準。
以上是一文詳解Javascript類別選擇器方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
如何使用WebSocket和JavaScript實現線上預約系統
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
javascript如何使用insertBefore
Nov 24, 2023 am 11:56 AM
用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。
JavaScript與WebSocket：打造高效率的即時影像處理系統
Dec 17, 2023 am 08:41 AM
JavaScript是一種廣泛應用於Web開發的程式語言，而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能，我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統，並提供具體的程式碼範例。首先，我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備，可以擷取即時的影像數
