Apakah getElementsByClassName
(dan fungsi serupa suka getElementsByTagName
dan querySelectorAll
) bekerja sama getElementById
atau apakah mereka mengembalikan array elemen?
Alasan saya bertanya adalah karena saya mencoba mengubah gaya semua elemen menggunakan getElementsByClassName
. Lihat di bawah.
//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';
//works
document.getElementById('myIdElement').style.size = '100px';
getElementsByClassName()
menyiratkan jamak, sedangkangetElementById()
menyiratkan item elemen tunggal.Jawaban:
getElementById()
Kode Anda berfungsi karena ID harus unik dan karenanya fungsi selalu mengembalikan tepat satu elemen (ataunull
jika tidak ada yang ditemukan).Namun,
getElementsByClassName()
,querySelectorAll()
, dan lainnyagetElementsBy*
metode mengembalikan koleksi array seperti elemen. Iterate seperti itu dengan array nyata:Jika Anda lebih suka sesuatu yang lebih pendek, pertimbangkan untuk menggunakan jQuery :
sumber
<iframe>
yang juga merupakan bagian dari domain AndaquerySelectorAll()
dan Anda dapat memiliki kode pendek yang bagus tanpa ketergantungan sekolah lama yang besar.qSA(".myElement").forEach(el => el.style.size = "100px")
Mungkin pembungkus menerima panggilan balik.qSA(".myElement", el => el.style.size = "100px")
Anda menggunakan array sebagai objek, perbedaan antara
getElementbyId
dangetElementsByClassName
adalah:getElementbyId
akan mengembalikan objek Elemen atau null jika tidak ada elemen dengan ID yang ditemukangetElementsByClassName
akan mengembalikan HTMLCollection langsung , mungkin dengan panjang 0 jika tidak ada elemen yang cocok ditemukangetElementsByClassName
https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname
getElementById
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
dalam kode Anda, baris:
TIDAK akan bekerja seperti yang diharapkan, karena
getElementByClassName
akan mengembalikan array, dan array TIDAK akan memilikistyle
properti, Anda dapat mengaksesnyaelement
dengan mengulangi melalui mereka.Itu sebabnya fungsi
getElementById
bekerja untuk Anda, fungsi ini akan mengembalikan objek langsung. Karena itu Anda akan dapat mengaksesstyle
properti.sumber
Deskripsi berikut diambil dari halaman ini :
Jadi, sebagai parameter
getElementsByClassName
akan menerima nama kelas.Jika ini adalah badan HTML Anda:
maka
var menuItems = document.getElementsByClassName('menuItem')
akan mengembalikan koleksi (bukan array) dari 3 atas<div>
, karena cocok dengan nama kelas yang diberikan.Anda kemudian dapat mengulangi
<div>
koleksi node ini ( dalam hal ini) dengan:Silakan merujuk ke posting ini untuk lebih lanjut tentang perbedaan antara elemen dan node.
sumber
for (var menuItemIndex = 0 ; menuItemIndex < menuItems.length ; menuItemIndex ++) {
menurut saya.ES6 menyediakan
Array.from()
metode, yang membuat instance Array baru dari objek mirip-array atau yang dapat diulang.Seperti yang Anda lihat di dalam cuplikan kode, setelah menggunakan
Array.from()
fungsi Anda kemudian dapat memanipulasi setiap elemen.Solusi yang sama menggunakan
jQuery
.sumber
Dengan kata lain
document.querySelector()
menyeleksi hanya yang pertama salah satu elemen dari pemilih yang ditentukan. Jadi itu tidak memunculkan array, itu adalah nilai tunggal. Mirip dengandocument.getElementById()
yang mengambil elemen ID saja, karena ID harus unik.document.querySelectorAll()
memilih semua elemen dengan pemilih yang ditentukan dan mengembalikannya dalam array. Mirip dengandocument.getElementsByClassName()
untuk kelas dandocument.getElementsByTagName()
tag saja.Mengapa menggunakan querySelector?
Ini digunakan hanya untuk tujuan kemudahan dan keringkasan saja.
Mengapa menggunakan getElement / sBy? *
Performa lebih cepat.
Mengapa perbedaan kinerja ini?
Kedua cara pemilihan memiliki tujuan untuk menciptakan NodeList untuk digunakan lebih lanjut. querySelectors menghasilkan NodeList statis dengan pemilih sehingga harus dibuat terlebih dahulu dari awal.
getElement / sBy * segera menyesuaikan NodeList langsung yang ada dari DOM saat ini.
Jadi, kapan harus menggunakan metode mana terserah Anda / proyek Anda / perangkat Anda.
informasi
Demo semua metode Tes Kinerja
Dokumentasi NodeList
sumber
Ini mengembalikan daftar seperti array.
Anda menjadikan Array sebagai contoh
sumber
Anda bisa mendapatkan elemen tunggal dengan menjalankan
tapi itu akan bekerja untuk elemen pertama dengan class .myElement.
Jika Anda ingin menerapkan ini untuk semua elemen dengan kelas saya sarankan Anda untuk menggunakannya
sumber
sumber
Dengan ES5 + (semua yang diramban saat ini - 2017) Anda harus dapat melakukannya
sumber
Sebuah jawaban untuk kasus spesifik Drenzii ...
Anda bisa membuat fungsi yang akan berfungsi untuk salah satu
word
elemen dan memasukkan jumlah yang ingin Anda ubah, seperti:sumber