Penjelasan terperinci tentang kaedah pemilih kelas Javascript-tutorial js-php.cn

Penjelasan terperinci tentang kaedah pemilih kelas Javascript

藏色散人

Lepaskan： 2022-08-06 14:37:41

ke hadapan

4629 orang telah melayarinya

Artikel ini akan memperkenalkan anda kepada kaedah pemilih kelas Javascript Saya harap ia akan membantu rakan yang memerlukan.

Kaedah pemilih kelas Javascript

Sebagai ekosistem dan platform, penyemak imbas akan menyediakan satu siri kaedah fungsi yang boleh dipanggil dan dikawal oleh bahasa pengaturcaraan, untuk menyemak imbas Untuk penyemak imbas, adalah wajar untuk memanggil kaedah terbina dalam penyemak imbas melalui bahasa Javascript Untuk sistem pengendalian, kebanyakan bahasa boleh memanggil APInya.

CSS boleh menambah gaya pada elemen HTML melalui pemilih id atau pemilih kelas Platform penyemak imbas, seperti CSS, juga menyediakan pemilih id dan kaedah pemilih kelas yang boleh dipanggil oleh bahasa Javascript Digunakan sebelum Kaedah pemilih id adalah getElementById(), dan kaedah pemilih kelas yang akan dijelaskan dalam artikel ini ialah getElementsByClassName() Anda boleh melihat apa yang mereka ingin nyatakan dengan nama mereka berbuat demikian. Seperti namanya, sudah tentu ini adalah maksud nama bagi bahasa Inggeris.

Ciri ID ialah memilih satu, dan memilih ciri kelas dalam kelompok Contohnya, untuk menambahkan atribut gaya secara dinamik pada beberapa elemen dalam kelompok melalui Javascript, kaedah getElementsByClassName() digunakan terutamanya. [Cadangan berkaitan: Tutorial video JavaScript]

Kes

Tambahkan kod Javascript berdasarkan fail HTML dan css yang telah ditulis menyesuaikan gaya elemen pada halaman web.

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>

Salin selepas log masuk

Analisis Kod

Baris 53 hingga 60 kod mentakrifkan satu siri butang perintah untuk antara muka aplikasi Baris 50 dan 51 kod menentukan dua butang fungsi tersuai butang gaya elemen lain Apabila anda mengklik salah satu butang butang fungsi, fungsi fun1() atau fun2() dalam teg skrip akan dipanggil Warna elemen latar belakang elemen akan diubah suai dalam kelompok, daripada kelabu kepada warna #00aaff.

Baris 63 kod memilih semua elemen yang nama atribut kelasnya ialah "div" melalui kaedah pemilih kelas getElementsByClassName() Objek yang dikembalikan oleh kaedah getElementById() ialah kaedah getElementsByClassName() returns Merupakan tatasusunan yang terdiri daripada semua objek elemen. Ini bermakna jika anda ingin menukar nilai atribut elemen, akses elemen melalui subskrip tatasusunan Sebagai contoh, arr[0] mewakili elemen div yang ditakrifkan dalam baris 55 kod. Menulis arr.style.backgroundColor="#00aaff"; secara langsung adalah haram untuk menukar warna latar belakang semua elemen arr ialah tatasusunan dan ia tidak mempunyai atribut .style Untuk menetapkan semula warna latar belakang elemen, gunakan borang arr[i].style.backgroundColor="#00aaff.

Terdapat banyak elemen yang perlu diubah, dan warna elemen yang akan ditukar juga adalah sama, jadi ia boleh dilakukan melalui program struktur gelung untuk fungsi baris 67 hingga 70 kod adalah untuk melintasi semua div dalam elemen arr tatasusunan dan kemudian menukar warna latar belakangnya.

Baris 65 dan 72 masing-masing mentakrifkan fungsi fun1 dan fun2, yang boleh dipanggil melalui acara klik tetikus Fungsi fun1 adalah untuk menukar warna latar belakang elemen kepada #00aaff Warna latar belakang elemen bertukar kepada #1abc9c. Kaedah

<code><strong>getElementsByTagName()</strong>getElementsByTagName()

getElementsByTagName()getElementsByClassName() boleh digunakan untuk memilih elemen dalam kelompok seperti kaedah

dan kaedah yang dikembalikan Hasilnya adalah daripada data Dari perspektif jenis, mereka semua adalah objek tatasusunan. ) nama kaedah bermaksud tag .

Application

Saya mempelajari beberapa kaedah memilih elemen dan mengetahui ciri masing-masing, hanya untuk aplikasi, cara memilih getElementById() dan getElementsByClassName() dalam aplikasi sebenar dan getElementsByTagName(). Anda boleh merujuk kepada CSS untuk perkara ini Dalam CSS, pemilih kelas biasanya digunakan dan pemilih id kadang-kadang digunakan, dan nama tag elemen digunakan untuk memilih elemen jika halaman lengkap menggunakan elemen tertentu, dan ini Sebagai contoh, jika elemen memerlukan warna latar belakang yang berbeza, anda akan merosakkannya secara tidak sengaja jika anda menggunakan kaedah getElementsByTagName() Kelebihan getElementsByClassName() ialah anda boleh menampal nama atribut kelas kepada sesiapa sahaja yang anda mahu pilih boleh mempunyai beberapa nama kelas. Dalam projek sebenar, penggunaan semula kod sering dititikberatkan gaya kelas Kemudian hanya memperkenalkan nama kelas ini pada setiap halaman.

Ringkasan

Artikel ini bukan sahaja menerangkan kaedah getElementsByClassName(), tetapi juga menerangkan tiga kaedah memilih elemen dalam Javascript melalui perbandingan, yang sepadan dengan pemilih elemen, pemilih id dan pemilih kelas dalam CSS dengan membandingkan pemilihan CSS dan Javascript pemilih (kaedah DOM) untuk mengurangkan beban memori pembelajaran, mempelajari teknologi dari perspektif sistem, dan memahami standard teknikal dari perspektif pembangun jawatankuasa standard.

Atas ialah kandungan terperinci Penjelasan terperinci tentang kaedah pemilih kelas Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!