Saat mengembangkan halaman web, dalam banyak kasus kita perlu mengoperasikan elemen dengan nama kelas yang sama, yaitu elemen dengan kelas yang sama. Saya mengikuti tes tertulis kemarin dan saya tidak menjawab pertanyaan terkait:
Javascript mendapatkan node dengan tes kelas di halaman
Jadi saya mengumpulkan beberapa informasi yang relevan dan mencantumkan dua metode yang menurut saya lebih baik. Kekurangannya juga dibutuhkan. Saya berharap semua orang akan mengkritik dan memperbaikinya. Jika Anda memiliki cara yang lebih baik, saya harap Anda dapat membagikannya.
Solusi Solution1 Jeremy Keuth
Paman Jeremy Keuth berbicara tentang metode GetElementsbyClass di bagian ketiga dan keempat buku "JavaScript Dom Programming Art" (edisi ke-2) (Bahasa Inggris: Dom Scripting-Web Desain dengan JavaScript dan Model Objek Dokumen), dan berbicara tentang cara menerapkan metode ini di browser yang tidak mendukung properti ini (IE6, Kutipan ada di sini, dan ada modifikasi di beberapa tempat.
Metode baru telah ditambahkan ke HTML5 DOM untuk memungkinkan kami mengakses elemen melalui nama kelas di atribut kelas, yaitu: GetElmentsByClassName. Karena metode ini relatif baru, beberapa implementasi DOM belum memilikinya, jadi berhati -hatilah saat menggunakannya. Pertama -tama mari kita lihat apa metode ini dapat membantu kita, dan kemudian membahas cara menggunakan metode ini dengan andal.
Mirip dengan metode GetElmentsByTagname, GetElementsByClassName juga hanya menerima satu parameter, yang merupakan nama kelas:
Salinan kode adalah sebagai berikut:
GetElementsByClassName (kelas)
Nilai pengembalian metode ini juga mirip dengan GetElementsByTagname, keduanya merupakan array elemen dengan nama kelas yang sama. Baris kode berikut mengembalikan array yang berisi semua elemen nama kelas "Sale":
Salinan kode adalah sebagai berikut:
Document.GetElementsByClassName ("Sale")
Gunakan metode ini untuk menemukan elemen dengan beberapa nama kelas. Untuk menentukan beberapa nama kelas, cukup pisahkan nama kelas dengan spasi dalam parameter string. Misalnya, tambahkan baris kode berikut ke tag <script>:
Salinan kode adalah sebagai berikut:
alert (document.getElementsbyclassname ("Sale penting"). Panjang);
Kode lengkap
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> Daftar Belanja </iteme>
</head>
<body>
<h1> Apa yang harus dibeli </h1>
<p> Jangan lupa membeli barang ini. </p>
<ul id = "beli">
<li> Kacang tipis </li>
<li> Keju </li>
<li> susu </li>
</ul>
<script>
alert (document.getElementsbyclassname ("Sale penting"). Panjang);
</script>
</body>
</html>
Anda akan melihat 1 di kotak peringatan, menunjukkan bahwa hanya satu elemen yang cocok, karena hanya satu elemen yang memiliki nama kelas "penting" dan "penjualan". Perhatikan bahwa bahkan dalam atribut kelas suatu elemen, urutan nama kelas adalah "penjualan penting" daripada "penjualan penting" yang ditentukan dalam parameter, itu masih akan cocok dengan elemen. Tidak hanya urutan nama kelas yang sebenarnya tidak masalah, tidak masalah bahkan jika elemen memiliki lebih banyak nama kelas. Seperti menggunakan GetElmentByTagname, Anda juga dapat menggunakan GetElementsByClassName dan GetElementById dalam kombinasi. Jika Anda ingin tahu berapa banyak nama kelas yang berisi item daftar tes dalam elemen dengan pembelian ID, Anda dapat menemukan objek tertentu terlebih dahulu, dan kemudian hubungi GetElementsByClassName:
Salinan kode adalah sebagai berikut:
var shopping = document.geteLementById ("beli");
var Sales = Shopping.getElementsByClassName ("Sale");
Dengan cara ini, array penjualan hanya berisi elemen dengan kelas "penjualan" yang terletak di daftar "pembelian". Jalankan baris kode berikut dan Anda akan melihat bahwa array penjualan berisi dua item:
Salinan kode adalah sebagai berikut:
peringatan (Sales.length);
Metode GetElmentsByClassName ini sangat berguna, tetapi hanya browser yang lebih baru (Safari 3.1, Chorme, Firefox 3 dan Opera 9.5 atau di atas) mendukungnya. Untuk menebus kekurangan ini, pemrogram skrip DOM perlu menggunakan metode DOM yang ada untuk mengimplementasikan GetElementsByClassName mereka sendiri, yang sedikit seperti hadiah yang akan datang. Dalam kebanyakan kasus, proses implementasinya kira -kira mirip dengan GetElementsByClassName berikut, yang dapat diterapkan pada browser baru dan lama.
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;
}
}
Fungsi GetElementsByClassName menerima dua parameter. Node pertama mewakili titik awal pencarian di pohon DOM, dan nama kelas kedua adalah nama kelas yang akan dicari. Jika fungsi GetElementsByClassName yang sesuai sudah ada pada node yang masuk, maka fungsi baru ini secara langsung mengembalikan daftar node yang sesuai. Jika fungsi GetElementsByClassName tidak ada, fungsi baru akan mengulangi semua tag dan mencari elemen dengan nama kelas yang sesuai.
Kerugian dari metode ini adalah tidak berlaku untuk beberapa nama kelas.
Jika Anda menggunakan fungsi ini untuk mensimulasikan operasi sebelumnya untuk mendapatkan daftar belanja, Anda dapat menulisnya seperti ini:
Salinan kode adalah sebagai berikut:
var shopping = document.geteLementById ("beli");
var sales = shopping.getElementsbyclassName (belanja, "tes");
console.log (penjualan);
Oleh karena itu, untuk menyelesaikan masalah di awal artikel, kode yang digunakan adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> Daftar Belanja </iteme>
</head>
<body>
<h1> Apa yang harus dibeli </h1>
<p> Jangan lupa membeli barang ini. </p>
<ul id = "beli">
<li> Kacang tipis </li>
<li> Keju </li>
<li> susu </li>
</ul>
<script>
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;
}
}
var body = document.geteLementsbyTagname ("body") [0];
VAR Sales = GetElementsByClassName (Body, "Sales");
console.log (penjualan);
</script>
</body>
</html>
Solusi2 Solusi Robert Nyman
Ada banyak cara untuk mencari elemen DOM yang cocok, tetapi tidak banyak yang benar -benar efisien. Salah satu kelemahan dari metode Paman Jeremy Keuth adalah bahwa itu tidak dapat digunakan untuk beberapa nama kelas. Pada tahun 2008, Robert Nyman memberikan solusinya sendiri dalam artikel The Ultimate GetElementsByClassName, Anno 2008. Pada tahun 2005, Paman Robert telah memberikan fungsi GetElementsByClassName -nya. Pada tahun 2008, ia memodifikasi beberapa kode dan menambahkan banyak fungsi baru:
1. Jika browser saat ini mendukung fungsi GetElementsByClassName, fungsi asli disebut;
2. Jika browser saat ini mendukungnya, gunakan XPath; // xiaofeiyu: Cara yang kuat untuk menemukan dokumen XML yang dibangun di browser, tetapi dukungan browser tidak disatukan
3. Mendukung pencarian untuk beberapa nama kelas terlepas dari ketertiban;
4. Mengembalikan array simpul asli, bukan daftar nodel asli. // Xiaofeiyu: Metode GetElementsByClassName asli mengembalikan objek nodelist, yang sangat mirip dengan array, dengan properti indeks panjang dan angka, tetapi ini bukan array, dan Anda tidak dapat menggunakan metode spesifik array seperti Pop dan Push. Dalam kode yang disediakan oleh Robert, objek nodelist dikonversi menjadi array. Metode di mana objek nodel dapat dikonversi menjadi array:
Salinan kode adalah sebagai berikut:
mylist = array.prototype.slice.call (mynodelist)
Ini adalah metode Paman Robert. Saya tidak mengerti beberapa hal yang belum saya pahami. Saya akan memperbaruinya setelah saya mempelajarinya.
Salinan kode adalah sebagai berikut:
/*
Dikembangkan oleh Robert Nyman, http://www.robertnyman.com
Kode/Lisensi: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsbycasname = function (classname, tag, elm) {
if (document.geteLementsbyclassName) {
getElementsbycasname = function (classname, tag, elm) {
elm = elm || dokumen;
var elemen = elm.geteLementsbyclassname (classname),
nodename = (tag)? Regexp baru ("// B" + Tag + "// B", "i"): null,
returnElements = [],
Saat ini;
untuk (var i = 0, il = elements.length; i <il; i+= 1) {
saat ini = elemen [i];
if (! nodename || nodename.test (current.nodename)) {
returnElements.push (saat ini);
}
}
pengembalian kembali;
};
}
lain if (document.evaluate) {
getElementsbycasname = function (classname, tag, elm) {
Tag = Tag || "*";
elm = elm || dokumen;
var class = classname.split (""),
classestocheck = "",
xhtmlnamespace = "http://www.w3.org/1999/xhtml",
namespaceresolver = (document.documentelement.namespaceuri === xhtmlnamespace)? xhtmlnamespace: null,
returnElements = [],
elemen,
simpul;
untuk (var j = 0, jl = class.length; j <jl; j+= 1) {
classestocheck + = "[mengandung (concat ('', @class, ''), '" + class [j] + "')]";
}
mencoba {
elemen = document.evaluate (".//" + tag + classestocheck, elm, namespaceresolver, 0, null);
}
Catch (e) {
elemen = document.evaluate (".//" + tag + classestocheck, elm, null, 0, null);
}
while ((node = elements.iterateNext ())) {
returnElements.push (node);
}
pengembalian kembali;
};
}
kalau tidak {
getElementsbycasname = function (classname, tag, elm) {
Tag = Tag || "*";
elm = elm || dokumen;
var class = classname.split (""),
classestocheck = [],
elemen = (tag === "*" && elm.all)? elm.all: elm.geteLementsbytagname (tag),
Saat ini,
returnElements = [],
cocok;
untuk (var k = 0, kl = class.length; k <kl; k+= 1) {
classestocheck.push (regexp baru ("(^| // s)" + kelas [k] + "(// s | $)"));
}
untuk (var l = 0, ll = elemen.lements; l <ll; l+= 1) {
arus = elemen [l];
cocok = false;
untuk (var m = 0, ml = classestocheck.length; m <ml; m+= 1) {
match = classestocheck [m] .test (current.classname);
if (! match) {
merusak;
}
}
if (match) {
returnElements.push (saat ini);
}
}
pengembalian kembali;
};
}
Return GetElementsByClassName (ClassName, Tag, Elm);
};