Kaedah pelayar silang JavaScript untuk mendapatkan nod kelas yang sama dalam kemahiran page_javascript

Apabila membangunkan halaman web, banyak kali kita perlu mengendalikan elemen dengan nama kelas yang sama, iaitu elemen dengan kelas yang sama. Saya mengambil ujian bertulis semalam dan saya tidak dapat menjawab soalan berkaitan:

JavaScript mendapat nod dengan ujian kelas dalam halaman

Jadi saya mengumpul beberapa maklumat yang berkaitan dan menyenaraikan dua kaedah yang saya fikir lebih baik dalam artikel ini, saya harap semua orang boleh menegur dan membetulkannya. Jika anda mempunyai kaedah yang lebih baik, saya harap anda boleh berkongsi.

Penyelesaian1 Penyelesaian Jeremy Keuth

Pak Cik Jeremy Keuth bercakap tentang kaedah getElementsByClass dalam Bab 3, Bahagian 4 buku "The Art of JavaScript DOM Programming (2nd Edition)" (Bahasa Inggeris: DOM Scripting-Web Design with JavaScript and the Document Object Model). juga bercakap tentang cara menggunakan kaedah ini dalam penyemak imbas yang tidak menyokong atribut ini (IE6, IE7 dan IE8, mari kita memandang rendah mereka Petikan di sini, dengan pengubahsuaian di beberapa tempat).

Terdapat kaedah baharu dalam HTML5 DOM yang membolehkan kami mengakses elemen melalui nama kelas dalam atribut kelas Ini ialah: getELEmentsByClassName Memandangkan kaedah ini agak baharu, ia belum lagi tersedia dalam beberapa pelaksanaan DOM berhati-hati apabila menggunakannya. Mari kita lihat dahulu apakah kaedah ini boleh lakukan untuk kita, dan kemudian bincangkan cara menggunakan kaedah ini dengan pasti.
Sama seperti kaedah getELEmentsByTagName, getElementsByClassName hanya menerima satu parameter, iaitu nama kelas:

Salin kod Kod adalah seperti berikut:

getElementsByClassName(kelas)

Nilai pulangan kaedah ini juga serupa dengan getElementsByTagName Ia adalah tatasusunan elemen dengan nama kelas yang sama Baris kod berikut mengembalikan tatasusunan yang mengandungi semua elemen dengan nama kelas "jualan":

Salin kod Kod adalah seperti berikut:

document.getElementsByClassName("jualan")

Anda juga boleh menggunakan kaedah ini untuk mencari elemen dengan berbilang nama kelas. Untuk menentukan berbilang nama kelas, hanya pisahkan nama kelas dengan ruang dalam hujah rentetan. Sebagai contoh, tambahkan baris kod berikut pada teg

Salin kod Kod adalah seperti berikut:

alert(document.getElementsByClassName("jualan penting").panjang);

Kod penuh

Salin kod Kod adalah seperti berikut:

Senarai Beli-belah

Apa yang hendak dibeli

Jangan lupa untuk membeli barangan ini.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

alert(document.getElementsByClassName("jualan penting").panjang);






Anda akan melihat 1 dipaparkan dalam kotak amaran, menunjukkan bahawa hanya satu elemen sepadan, kerana hanya terdapat satu elemen dengan kedua-dua nama kelas "penting" dan "jualan". Ambil perhatian bahawa walaupun susunan nama kelas dalam atribut kelas elemen ialah "jualan penting" dan bukannya "jualan penting" yang dinyatakan dalam parameter, elemen itu akan tetap dipadankan. Bukan sahaja susunan sebenar nama kelas tidak penting, tidak kira jika elemen itu juga mempunyai lebih banyak nama kelas. Sama seperti menggunakan getELEmentsByTagName, anda juga boleh menggunakan getElementsByClassName dan getElementById dalam kombinasi. Jika anda ingin mengetahui berapa banyak item senarai yang nama kelasnya mengandungi ujian berada dalam elemen dengan pembelian id, anda boleh mencari objek khusus itu dahulu dan kemudian memanggil getElementsByClassName:

Salin kod

Kod adalah seperti berikut:

var shopping=document.getElementById("purchase");
var sales = shopping.getElementsByClassName("sale");

Dengan cara ini, tatasusunan jualan hanya mengandungi elemen dengan kelas "jualan" dalam senarai "pembelian" Jalankan baris kod berikut dan anda akan melihat tatasusunan jualan mengandungi dua item:

Salin kod Kod adalah seperti berikut:

alert(sales.length);

Kaedah getELEmentsByClassName ini sangat berguna, tetapi hanya penyemak imbas yang lebih baharu (Safari 3.1, Chrome, Firefox 3 dan Opera 9.5 dan ke atas) menyokongnya. Untuk mengimbangi kelemahan ini, pengaturcara skrip DOM perlu menggunakan kaedah DOM sedia ada untuk melaksanakan getElementsByClassName mereka sendiri, yang sedikit seperti upacara laluan. Dalam kebanyakan kes, proses pelaksanaannya hampir serupa dengan getElementsByClassName di bawah Fungsi ini boleh digunakan pada pelayar lama dan baharu.

Salin kod Kod adalah seperti berikut:

fungsi getElementsByClassName(nod,nama kelas){
If(node.getElementsByClassName){
            kembalikan node.getElementsByClassName(classname);
}lain{
hasil var = [];
         var elems = node.getElementsByTagName("*");
untuk(var i=0;i If(elems[i].className.indexOf(classname)!=-1){
keputusan[results.length]=elems[i];
            }
}
Kembalikan hasil;
}
}

Fungsi getElementsByClassName ini menerima dua parameter. Nod pertama mewakili titik permulaan carian dalam pepohon DOM, dan nama kelas kedua ialah nama kelas yang hendak dicari. Jika fungsi getElementsByClassName yang sesuai sudah wujud pada nod masuk, maka fungsi baharu ini akan terus mengembalikan senarai nod yang sepadan. Jika fungsi getElementsByClassName tidak wujud, fungsi baharu ini akan menggelungkan semua teg dan mencari elemen dengan nama kelas yang sepadan.

Kelemahan kaedah ini ialah ia tidak berfungsi dengan berbilang nama kelas.

Jika anda menggunakan fungsi ini untuk mensimulasikan operasi mendapatkan senarai beli-belah sebelumnya, anda boleh menulisnya seperti ini:

Salin kod Kod adalah seperti berikut:

var shopping=document.getElementById("purchase");
var sales = shopping.getElementsByClassName(shopping,"test");
console.log(jualan);

Jadi, untuk menyelesaikan soalan di awal artikel, kod yang digunakan adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

   
    Senarai Beli-belah


   

Apa yang hendak dibeli

   

Jangan lupa untuk membeli barangan ini.

   

       
• Sedikit kacang

       
• Keju

       
• Susu

   

    fungsi getElementsByClassName(nod,nama kelas){
        if(node.getElementsByClassName){
            kembalikan node.getElementsByClassName(classname);
        }lain{
            hasil var = [];
            var elems = node.getElementsByTagName("*");
            untuk(var i=0;i                if(elems[i].className.indexOf(classname)!=-1){
                   keputusan[results.length]=elems[i];
               }
            }
            pulangkan hasil;
        }
    }
    var body = document.getElementsByTagName("body")[0];
    var sales= getElementsByClassName(body,"sales");
    console.log(jualan);

Penyelesaian2 Robert Nyman方案

搜索匹配的DOM元素的方法还有很多，但真正高效的却不多，Jeremy Keuth大叔的方法三一一与于多个类名，2008年，Robert Nyman在文章 The Ultimate GetElementsByClassName, Anno 2008中提供了自己的解决方案。在2005年，Robert大叔就已经给出了自己的getElementsByClassName0的年函0的年函0的凨函，修改了部分代码，添加了许多新的功能：

1.如果当前浏览器支持getElementsByClassName函数，则调用该原生函数；
.支持方面不统一
3.支持多个类名的搜索，不计先后顺序；
4. 返回真正的节点数组，而不是原生的一个nodelist。//小飞鱼：原生的getElementsByClassName方法返回中方法返回的方法返回的原生很像数组，有length和数字索引属性，但并不是数组，不能用pop，push等数组特有的方法，Robert提供的代码中，将NodeList对象转成了数组。可以将NodeList对象转的：NodeList对象转的：NodeList对象掬的：NodeList对象转的：NodeList对象潬的：NodeList对象掬的：NodeList对象掬的：NodeList对象转的：NodeList对象转的：NodeList对象我转

复制代码 代码如下:

myList = Array.prototype.slice.call (myNodeList)

这是Robert大叔的方法，有些地方还不太明白，待我研究一下再来更新好了>。

复制代码 代码如下:

/*
Dibangunkan oleh Robert Nyman, http://www.robertnyman.com
Kod/pelesenan: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = fungsi (className, tag, elm){
    if (document.getElementsByClassName) {
        getElementsByClassName = fungsi (className, tag, elm) {
            elm = elm || dokumen;
            var elements = elm.getElementsByClassName(className),
                nodeName = (tag)? new RegExp("\b" tag "\b", "i") : null,
                returnElements = [],
                semasa;
            for(var i=0, il=elements.length; i                 semasa = unsur[i];
                if(!nodeName || nodeName.test(current.nodeName)) {
                    returnElements.push(semasa);
                }
            }
            return returnElements;
        };
    }
    else if (document.evaluate) {
        getElementsByClassName = fungsi (className, tag, elm) {
            tag = tag || "*";
            elm = elm || dokumen;
            var classes = className.split(" "),
                classesToCheck = "",
                xhtmlNamespace = "http://www.w3.org/1999/xhtml",
                namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlRuang nama : null,
                returnElements = [],
                elemen,
                nod;
            for(var j=0, jl=classes.length; j                 classesToCheck = "[mengandungi(concat(' ', @class, ' '), ' " classes[j] " ')]";
            }
            cuba {
                elemen = document.evaluate(".//" tag classesToCheck, elm, namespaceResolver, 0, null);
            }
            tangkap (e) {
                elemen = document.evaluate(".//" tag classesToCheck, elm, null, 0, null);
            }
            manakala ((nod = elements.iterateNext())) {
                returnElements.push(nod);
            }
            return returnElements;
        };
    }
    lain {
        getElementsByClassName = fungsi (className, tag, elm) {
            tag = tag || "*";
            elm = elm || dokumen;
            var classes = className.split(" "),
                classesToCheck = [],
                elemen = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
                semasa,
                returnElements = [],
                perlawanan;
            for(var k=0, kl=classes.length; k                 classesToCheck.push(new RegExp("(^|\s)" classes[k] "(\s|$)"));
            }
            for(var l=0, ll=elements.length; l                 semasa = unsur[l];
                padanan = palsu;
                for(var m=0, ml=classesToCheck.length; m                     padan = classesToCheck[m].test(current.className);
                    jika (!padan) {
                        rehat;
                    }
                }
                jika (padanan) {
                    returnElements.push(semasa);
                }
            }
            return returnElements;
        };
    }
    kembalikan getElementsByClassName(className, tag, elm);
};