一文詳解Javascript類選擇器方法

本篇文章給大家介紹有關Javascript類選擇器方法，希望對需要的朋友有所幫助！

Javascript類選擇器方法

瀏覽器作為一個生態和平臺，它會提供一系列程式語言可以呼叫控制的函數方法，對於瀏覽器而言，自然是通過Javascript語言呼叫瀏覽器內建方法，對於作業系統而言，多數語言調可以呼叫它的API。

CSS通過id選擇器或者class類選擇器可以給HTML元素新增樣式，瀏覽器平臺和CSS一樣也提供了可供Javascript語言呼叫的id選擇器和class類選擇器方法，之前使用的id選擇器方法是getElementById()，本文要講解的類選擇器方法是getElementsByClassName()，通過名字你都可以看出他們要表達的意思，標準委員會制定這些標準也不是心血來潮隨意命名，都儘量做到顧其名思其義，當然這是針對英語語言的顧名思義。

ID的特點是選擇一個，class的點特點批次選擇，比如通過Javascript動態地給一些元素批次新增樣式屬性，就主要用到getElementsByClassName()方法。【相關推薦：】

案例

在一個已經寫好的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。

getElementsByTagName()

getElementsByTagName()方法和getElementsByClassName()方法一樣可以用於批次選擇元素，返回的結果從資料型別的角度看都是陣列物件，區別之處在於getElementsByTagName()方法是通過元素的標籤名字來選擇元素，對應CSS的知識點就是元素選擇器，getElementsByTagName()方法名字中的英文Tag就是標籤的意思。

應用

學習了一些選擇元素的方法，知道他們各自的特點，就是為了應用，實際應用的時候如何選擇getElementById()、getElementsByClassName()和getElementsByTagName()。這一點可以參考CSS，在CSS中一般都是使用類選擇器，偶爾使用元素和id選擇器，使用元素的標籤名字來選擇元素，如果一個完整的頁面很多地方都用要某個元素，而這些元素比如要求背景顏色不一樣，你使用getElementsByTagName()方法就會誤傷，getElementsByClassName()的好處就是你想選擇誰，直接貼一個class屬性名就可以，一個元素可以有多個類名。實際工程中往往講究程式碼複用，程式碼複用其實就是歸類，比如一個網站往往有一個主題背景顏色，網站的數千數萬個頁面都是某個顏色，你只需要定義一個顏色類樣式，然後通過在每個頁面引入這個類名就可以。

總結

本文不僅僅講解了getElementsByClassName()方法，通過對比的方式講解了Javascript選擇元素的三種方法，對應的是CSS中的元素選擇器、id選擇器、class類選擇器，通過對比CSS選擇器和Javascript選擇器（DOM方法），來降低學習的記憶負擔，從系統的角度去學習技術，站在標準委員會制定者的角度去理解一個技術標準。

以上就是一文詳解Javascript類選擇器方法的詳細內容，更多請關注TW511.COM其它相關文章！