Javascript類選擇器方法怎么使用
本文小編為大家詳細(xì)介紹“Javascript類選擇器方法怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Javascript類選擇器方法怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。
創(chuàng)新互聯(lián)2013年開(kāi)創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元應(yīng)縣做網(wǎng)站,已為上家服務(wù),為應(yīng)縣各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220
Javascript類選擇器方法
瀏覽器作為一個(gè)生態(tài)和平臺(tái)，它會(huì)提供一系列編程語(yǔ)言可以調(diào)用控制的函數(shù)方法，對(duì)于瀏覽器而言，自然是通過(guò)Javascript語(yǔ)言調(diào)用瀏覽器內(nèi)置方法， 對(duì)于操作系統(tǒng)而言，多數(shù)語(yǔ)言調(diào)可以調(diào)用它的API。
CSS通過(guò)id選擇器或者class類選擇器可以給HTML元素添加樣式，瀏覽器平臺(tái)和CSS一樣也提供了可供Javascript語(yǔ)言調(diào)用的id選擇器和class類選擇器方法，之前使用的id選擇器方法是getElementById()， 本文要講解的類選擇器方法是getElementsByClassName()，通過(guò)名字你都可以看出他們要表達(dá)的意思，標(biāo)準(zhǔn)委員會(huì)制定這些標(biāo)準(zhǔn)也不是心血來(lái)潮隨意命名，都盡量做到顧其名思其義，當(dāng)然這是針對(duì)英語(yǔ)語(yǔ)言的顧名思義。
ID的特點(diǎn)是選擇一個(gè)，class的點(diǎn)特點(diǎn)批量選擇，比如通過(guò)Javascript動(dòng)態(tài)地給一些元素批量添加樣式屬性，就主要用到getElementsByClassName()方法。
案例
在一個(gè)已經(jīng)寫好的HTML和css的文件基礎(chǔ)上添加Javascript代碼，實(shí)現(xiàn)用戶可以在網(wǎng)頁(yè)上批量自定義元素的樣式。
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應(yīng)用界面命令-->
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的所有元素，返回所有元素對(duì)象組成的數(shù)組
63 let arr = document.getElementsByClassName("div");
64 // 定義兩個(gè)更改顏色的函數(shù)fun1和fun2
65 function fun1() {
66 // 遍歷所有元素對(duì)象
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行代碼定義的是一系列應(yīng)用界面的命令按鈕，第50和第51行代碼定義的是兩個(gè)具有自定義其它元素樣式的功能按鈕button，當(dāng)你單擊其中一個(gè)功能按鈕button時(shí)候，會(huì)調(diào)用 script標(biāo)簽中的函數(shù)fun1()或fun2(),比如執(zhí)行fun1函數(shù)后，第53行到第60行代碼定義的元素背景元素顏色會(huì)批量修改，由灰色變?yōu)?code>#00aaff色。
第63行代碼通過(guò)類選擇器方法getElementsByClassName()選中類屬性名是“div”的所有元素，getElementById()方法返回的一個(gè)對(duì)象，也就是元素本身，getElementsByClassName()方法返回 的是所有元素對(duì)象組成的數(shù)組。這也就是說(shuō)，如果你想更改一個(gè)元素的屬性值，通過(guò)數(shù)組下標(biāo)的方式訪問(wèn)元素，比如arr[0]表示第55行代碼定義的div元素。 如果直接寫arr.style.backgroundColor="#00aaff";更改arr全部元素的背景顏色是不合法的，arr是一個(gè)數(shù)組，它沒(méi)有.style樣式屬性，要通過(guò)arr[i].style.backgroundColor="#00aaff這樣的形式來(lái)重置 元素背景顏色。
要更改的元素比較多，而元素要更改的顏色也一致，所以可以通過(guò)for循環(huán)結(jié)構(gòu)程序來(lái)完成，代碼第67行到第70行的作用就是遍歷數(shù)組arr中的所有div元素，然后更改他們的背景顏色。
第65行和第72行分別定義了函數(shù)fun1和fun2，可以通過(guò)鼠標(biāo)單擊事件調(diào)用，fun1的功能是批量把元素的背景顏色更改為#00aaff，fun1的功能是批量把元素的背景顏色更改為#1abc9c。
getElementsByTagName()
getElementsByTagName()方法和getElementsByClassName()方法一樣可以用于批量選擇元素，返回的結(jié)果從數(shù)據(jù)類型的角度看都是數(shù)組對(duì)象，區(qū)別之處在于getElementsByTagName()方法是通過(guò)元素的標(biāo)簽名字來(lái)選擇元素， 對(duì)應(yīng)CSS的知識(shí)點(diǎn)就是元素選擇器，getElementsByTagName()方法名字中的英文Tag就是標(biāo)簽的意思。
應(yīng)用
學(xué)習(xí)了一些選擇元素的方法，知道他們各自的特點(diǎn)，就是為了應(yīng)用，實(shí)際應(yīng)用的時(shí)候如何選擇getElementById()、getElementsByClassName()和getElementsByTagName()。這一點(diǎn)可以參考CSS，在CSS中一般都是使用類選擇器， 偶爾使用元素和id選擇器，使用元素的標(biāo)簽名字來(lái)選擇元素，如果一個(gè)完整的頁(yè)面很多地方都用要某個(gè)元素，而這些元素比如要求背景顏色不一樣，你使用getElementsByTagName()方法就會(huì)誤傷，getElementsByClassName()的好處就是 你想選擇誰(shuí)，直接貼一個(gè)class屬性名就可以，一個(gè)元素可以有多個(gè)類名。實(shí)際工程中往往講究代碼復(fù)用，代碼復(fù)用其實(shí)就是歸類，比如一個(gè)網(wǎng)站往往有一個(gè)主題背景顏色，網(wǎng)站的數(shù)千數(shù)萬(wàn)個(gè)頁(yè)面都是某個(gè)顏色，你只需要定義一個(gè)顏色類樣式， 然后通過(guò)在每個(gè)頁(yè)面引入這個(gè)類名就可以。
讀到這里，這篇“Javascript類選擇器方法怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享文章：Javascript類選擇器方法怎么使用
標(biāo)題路徑：http://jinyejixie.com/article36/jjhgpg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、面包屑導(dǎo)航、網(wǎng)站營(yíng)銷、建站公司、網(wǎng)站策劃、做網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 做網(wǎng)站選擇成都網(wǎng)站建設(shè)公司要注意哪些問(wèn)題？ 2016-11-09
- 為什么做網(wǎng)站建設(shè)的人越來(lái)越多 2014-11-21
- 做網(wǎng)站優(yōu)化創(chuàng)新互聯(lián)教你寫高質(zhì)量的文章 2020-04-10
- 做網(wǎng)站網(wǎng)頁(yè)數(shù)據(jù)不壓縮是對(duì)使用者的一種傷害 2022-09-24
- 如何以“貼膜”為關(guān)鍵詞做網(wǎng)站推廣 2016-09-02
- 網(wǎng)站的姿態(tài)影響用戶體驗(yàn) 2016-08-26
- 用戶體驗(yàn)是從哪里來(lái)的 2016-08-22
- 合肥網(wǎng)站建設(shè)公司：做網(wǎng)站一定要選擇效果好的建站公司！ 2021-11-03
- 做網(wǎng)站優(yōu)化要跟做網(wǎng)站結(jié)合起來(lái)，全盤考慮才行 2016-11-14
- 做網(wǎng)站引流量如何用百度文庫(kù)給自己的網(wǎng)站帶來(lái)訪問(wèn)者 2021-07-06
- 做網(wǎng)站建設(shè)的三個(gè)境界 2015-03-02
- 做網(wǎng)站SEO收集數(shù)據(jù)的4種方法 2022-06-15