Kata pengantar
Alibaba, magang front-end web akan mengikuti ujian online. Memang, saya ingin menambahkan beberapa pengetahuan pada pemula. Jadi Baidu dan Google memiliki pertanyaan tes tertulis front-end sebelumnya untuk perekrutan kampus Alibaba, dan merasa bahwa mereka benar-benar dibenci dan tidak dapat memahaminya sama sekali. Ah, front-end Ribaba adalah tes tertulis online.
Ketika saya melihat pertanyaan ini, saya merasa bahwa saya memang harus merangkum beberapa metode yang biasa Anda gunakan, seperti halnya jQuery. Beberapa metode dibuat untuk mencapai kompatibilitas browser atau kelas alat, yang memang bermanfaat bagi pengembangan di masa depan.
Html
Demi penjelasan, mari kita tulis html dulu
Salinan kode adalah sebagai berikut:
<p> Temukan saya </p>
<div> Juga temukan saya </div>
Kami menghilangkan CSS.
Metode implementasi
1 GetElementsByClassName
Salinan kode adalah sebagai berikut:
console.log (document.geteLementsByClassName ("a"));
console.log (document.geteLementsByClassName ("ab"));
Hasil muncul (Firefox 27.0)
Memang, saya pikir metode ini harus dapat menyelesaikan masalah di atas, tetapi setelah melihat kompatibilitasnya, saya pikir harus lebih baik untuk menemukan metode lain.
2 QuerySelectorall
Salinan kode adalah sebagai berikut:
console.log (document.queryselectorall (".a"));
console.log (document.queryselectorall (".b, .a"));
Mari kita lihat apa hasilnya? Apa bedanya dari yang di atas?
Hasil yang kedua berbeda.
Sebenarnya, kompatibilitas metode ini tidak terlalu bagus
Berdasarkan masalah kompatibilitas di atas (bagaimanapun, saya masih menjelaskan sebagian besar browser Cina IE6/7/8), saya mungkin juga melakukan cara untuk mencapainya sendiri.
3 querynodesbyclass
Saya pikir saya harus berbicara tentang ide -ide saya terlebih dahulu
(1) Dapatkan seluruh halaman terlebih dahulu
(2) mengulangi setiap node dan mendapatkan string nama className -nya
(3) Operasi string ClassName, pertama -tama bagikan ke dalam array dengan spasi, kemudian gunakan objek untuk mengatur kuncinya ke setiap elemen array, maka nilai yang sesuai benar
(4) Masalahnya sekarang didasarkan pada parameter yang Anda lewati (misalnya, satu parameter adalah "pemilih", dua adalah "selector_1 selector_2", dan seterusnya), dan kemudian mengubahnya menjadi array, dan setiap elemen array adalah Digunakan seperti sebelumnya, nilai kunci dari objek yang sesuai dengan string ClassName di node kami sebelumnya, jika cocok, itu benar, dan jika tidak, itu tidak ditentukan.
Sekarang kami memberikan kode kami
Salinan kode adalah sebagai berikut:
function stringToObj (string) {
var arr = string.split ("") .sort ();
var result = {};
untuk (var i = arr.length-1; arr [i]; i-) {
Hasil [arr [i]] = true;
}
hasil pengembalian;
}
Salinan kode adalah sebagai berikut:
function stringToArray (string) {
var arr = string.split ("") .sort ();
var result = [];
untuk (var i = arr.length-1; arr [i]; i-) {
result.push (arr [i]);
}
hasil pengembalian;
}
Salinan kode adalah sebagai berikut:
function querynodesbyclass (className) {
// pikiran (1)
var all = document.geteLementsbyTagname ("*"), len = all.length, result = [];
var cname = stringToArray (className); // thinking (4)
untuk (var i = 0; i <len; i ++) {// Transfer ide yang sesuai dari setiap node (2)
// Yang sesuai adalah ide (3), yaitu, peran metode StringToObj
var dom_cname = stringToObj (semua [i] .className), cname_len = cname.length;
untuk (var j = 0; j <cname_len; j ++) {
if (! dom_cname [cName [j]])
merusak;
}
if (j == cname_len)
{
result.push (semua [i]);
}}
hasil pengembalian;
}