Kami mengulangi elemen-elemen dalam objek daftar dengan metode
<p class="bold text">Coding</p> <p class="bold text">Beauty</p> <p class="bold text">Dev</p> <button id="add">Add class</button>
8 nya. Metode<p class="bold text">Coding</p> <p class="bold text">Beauty</p> <p class="bold text">Dev</p> <button id="add">Add class</button>
8 ini bekerja seperti.bold { font-weight: bold; } .big { font-size: 1.2em; }
0<p class="bold text">Coding</p> <p class="bold text">Beauty</p> <p class="bold text">Dev</p> <button id="add">Add class</button>
3Berlangganan Buletin Kecantikan Coding
Dapatkan wawasan bermanfaat dan tingkatkan pengetahuan pengembangan web Anda dengan tips dan tutorial mingguan dari Coding Beauty. Lebih dari 1.700 pengembang berlangganan
.bold { font-weight: bold; } .big { font-size: 1.2em; }
2 metodeKita dapat menggunakan metode
.bold { font-weight: bold; } .big { font-size: 1.2em; }
2 sebagai pengganti<p class="bold text">Coding</p> <p class="bold text">Beauty</p> <p class="bold text">Dev</p> <button id="add">Add class</button>
7 saat pemilih adalah pemilih kelas. Untuk.bold { font-weight: bold; } .big { font-size: 1.2em; }
_5, kami meneruskan nama kelas tanpa.bold { font-weight: bold; } .big { font-size: 1.2em; }
6 (titik), dan kami menggunakan.bold { font-weight: bold; } .big { font-size: 1.2em; }
7 untuk mengubah hasilnya menjadi array sebelum iterasi dengan<p class="bold text">Coding</p> <p class="bold text">Beauty</p> <p class="bold text">Dev</p> <button id="add">Add class</button>
JavaScriptDisalin.
const elements = Array.from(document.getElementsByClassName('text')); elements.forEach((element) => { element.classList.add('big'); });
Catatan. Berbeda dengan metode
.bold { font-weight: bold; } .big { font-size: 1.2em; }
_9,const elements = document.querySelectorAll('.text'); elements.forEach((element) => { element.classList.add('big'); });
0 mengembalikan daftar langsung Elemen HTML; . Jika sebuah elemen dalam array tidak lagi memenuhi syarat untuk pemilih yang ditentukan dalam.bold { font-weight: bold; } .big { font-size: 1.2em; }
5, itu akan dihapus secara otomatis. Ini berarti bahwa satu iterasi daftar bisa berbeda dari yang lain, bahkan tanpa modifikasi langsung pada daftarconst elements = document.querySelectorAll('.text'); elements.forEach((element) => { element.classList.add('big'); });
2 metodeKami menggunakan metode
const elements = document.querySelectorAll('.text'); elements.forEach((element) => { element.classList.add('big'); });
_2 untuk menambahkan kelas ke setiap elemenAnda dapat menambahkan banyak kelas dengan meneruskan lebih banyak argumen ke
const elements = document.querySelectorAll('.text'); elements.forEach((element) => { element.classList.add('big'); });
4JavaScriptDisalin.
const elements = document.querySelectorAll('.text'); elements.forEach((element) => { element.classList.add('big', 'blue'); });
Jika ada kelas yang diteruskan ke
const elements = document.querySelectorAll('.text'); elements.forEach((element) => { element.classList.add('big'); });
_4 sudah ada pada elemen,const elements = document.querySelectorAll('.text'); elements.forEach((element) => { element.classList.add('big'); });
4 akan mengabaikan ini, alih-alih membuat kesalahanTambahkan kelas ke elemen dengan pemilih yang berbeda
Terkadang tidak ada pemilih umum di antara elemen yang ingin Anda tambahkan kelasnya. Untuk kasus seperti itu, Anda dapat meneruskan beberapa pemilih yang dipisahkan koma ke metode
.bold { font-weight: bold; } .big { font-size: 1.2em; }
9JavaScriptDisalin.
const elements = document.querySelectorAll('.class-1, #id-1, tag-1'); elements.forEach((element) => { element.classList.add('class'); });
Sebagai contoh
HTMLDisalin.
<p class="bold text">Coding</p> <p class="bold text">Beauty</p> <p class="bold text">Dev</p> <div id="box-1">English</div> <div>Spanish</div> <div id="box-2">French</div> <br /> <button id="add">Add class</button>
CSSDisalin.
.bold { font-weight: bold; } .italic { font-style: italic; } .underline { text-decoration: underline; }
JavaScriptDisalin.
<p class="bold text">Coding</p> <p class="bold text">Beauty</p> <p class="bold text">Dev</p> <button id="add">Add class</button>
0Hapus kelas dari beberapa elemen
Sama seperti
const elements = document.querySelectorAll('.text'); elements.forEach((element) => { element.classList.add('big'); });
_2 menambahkan satu atau lebih kelas ke elemen,const elements = document.querySelectorAll('.text'); elements.forEach((element) => { element.classList.add('big'); });
9 menghapus satu atau lebih kelas dari elemenJadi kita bisa menggunakannya dalam
<p class="bold text">Coding</p> <p class="bold text">Beauty</p> <p class="bold text">Dev</p> <button id="add">Add class</button>
_8 loop ke kelas ke beberapa elemen DOMJavaScriptDisalin.
<p class="bold text">Coding</p> <p class="bold text">Beauty</p> <p class="bold text">Dev</p> <button id="add">Add class</button>
_111 Fitur JavaScript Baru yang Menakjubkan di ES13
Panduan ini akan mempercepat Anda dengan semua fitur terbaru yang ditambahkan di ECMAScript 13. Fitur baru yang kuat ini akan memodernisasi JavaScript Anda dengan kode yang lebih pendek dan lebih ekspresif
Daftar dan dapatkan salinan gratis segera
Ayibatari Ibaba
Ayibatari Ibaba adalah pengembang perangkat lunak dengan pengalaman bertahun-tahun membangun situs web dan aplikasi. Dia telah banyak menulis tentang berbagai topik pemrograman dan telah menciptakan lusinan aplikasi dan pustaka sumber terbuka