這篇文章為大家介紹有關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中文網其他相關文章！
