溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“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屬性名就可以，一個元素可以有多個類名。實際工程中往往講究代碼復用，代碼復用其實就是歸類，比如一個網站往往有一個主題背景顏色，網站的數千數萬個頁面都是某個顏色，你只需要定義一個顏色類樣式， 然后通過在每個頁面引入這個類名就可以。
讀到這里，這篇“Javascript類選擇器方法怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
