Ada tiga cara umum untuk mendapatkan elemen, yaitu, yaitu, yaitu, nama melalui ID elemen, nama melalui tag dan nama melalui kelas.
GetElementById
DOM menyediakan metode yang disebut getElementById, yang akan mengembalikan objek simpul dengan atribut ID yang sesuai. Harap berhati -hati untuk menjadi peka kasus saat menggunakannya.
Ini adalah fungsi yang unik untuk objek dokumen dan hanya dapat dipanggil melalui itu. Metode yang digunakan adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
Document.GetElementById ('Demo') // Demo adalah ID yang sesuai dengan elemen
Metode ini kompatibel dengan browser utama, bahkan termasuk IE6+, dan dapat digunakan dengan berani.
GetElementsByTagname
Metode ini mengembalikan array objek (tepatnya, koleksi htmlcollection, ini bukan array yang benar), masing -masing objek sesuai dengan elemen dengan tag yang diberikan dalam dokumen. Mirip dengan GetElementById, metode ini hanya menyediakan satu parameter, dan parameternya adalah nama tag yang ditentukan. Kode contoh adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
document.geteLementsbyTagname ('li') // li adalah nama tag
Perlu dicatat bahwa selain dipanggil oleh objek dokumen, metode ini juga dapat dipanggil oleh elemen biasa. Contohnya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var demo = document.geteLementById ('demo');
var lis = demo.getElementsbyTagname ('li');
Demikian pula, metode ini kompatibel dengan browser utama, bahkan termasuk IE6+, dan dapat digunakan dengan berani.
GetElementsByClassName
Selain mendapatkan elemen dengan menentukan tag, DOM juga menyediakan metode GetElementsByClassName untuk mendapatkan elemen dengan nama kelas yang ditentukan. Namun, karena metode ini relatif baru, browser yang lebih tua tidak mendukungnya, seperti IE6. Namun, kita dapat menebus kekurangan browser lama melalui hack. Metode ini disebut sebagai berikut:
Salinan kode adalah sebagai berikut:
Document.GetElementsByClassName ('Demo') // Nama kelas yang ditentukan oleh demo
Seperti GetElementsByTagname, metode ini dapat dipanggil oleh elemen biasa selain dipanggil oleh objek dokumen.
Untuk browser yang lebih tua, seperti IE6 dan 7, kami dapat mengimplementasikannya melalui peretasan berikut:
Salinan kode adalah sebagai berikut:
function getElementsbycasname (node, className) {
if (node.geteLementsByClassName) {
return node.geteLementsByClassName (className);
}kalau tidak {
var hasil = [];
var elems = node.getElementsbyTagname ("*");
untuk (var i = 0; i <elems.length; i ++) {
if (elem [i] .classname.indexof (className)! = -1) {
hasil [results.length] = elem [i];
}
}
hasil pengembalian;
}
}
memperluas
Jika Anda tidak hanya puas dengan metode pemilihan elemen di atas, Anda ingin mendapatkan elemen melalui pemilih seperti jQuery. Metode implementasi mirip dengan GetElementsByClassName di atas. Jika Anda tertarik, Anda dapat mengimplementasikan satu set pemilih. Namun, saya pikir tiga metode di atas dikombinasikan dengan gelembung acara sudah cukup, setelah semua, ketiga pertunjukan ini sangat baik.
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu semua orang.