suchen

Heim >Web-Frontend >js-Tutorial >Browserübergreifende JavaScript-Methode, um denselben Klassenknoten in den page_javascript-Fähigkeiten zu erhalten

Browserübergreifende JavaScript-Methode, um denselben Klassenknoten in den page_javascript-Fähigkeiten zu erhalten

WBOY
WBOYOriginal
2016-05-16 16:11:271231Durchsuche

Bei der Entwicklung von Webseiten müssen wir oft Elemente mit demselben Klassennamen bedienen, also Elemente mit derselben Klasse. Ich habe gestern den schriftlichen Test gemacht und konnte eine entsprechende Frage nicht beantworten:

JavaScript ruft den Knoten mit Klassentest auf der Seite ab

Deshalb habe ich einige relevante Informationen gesammelt und in diesem Artikel zwei Methoden aufgelistet, die meiner Meinung nach besser sind. Wenn es Mängel gibt, hoffe ich, dass jeder sie kritisieren und korrigieren kann. Wenn Sie eine bessere Methode haben, hoffe ich, dass Sie sie teilen können.

Lösung1 Jeremy Keuth Lösung

Onkel Jeremy Keuth sprach in Kapitel 3, Abschnitt 4 des Buches „The Art of JavaScript DOM Programming (2. Auflage)“ (Englisch: DOM Scripting-Web Design with JavaScript and the Document Object Model It). spricht auch darüber, wie man diese Methode in Browsern anwendet, die dieses Attribut nicht unterstützen (IE6, IE7 und IE8, verachten wir sie). Der Auszug ist hier, mit einigen Änderungen.

Es gibt eine neue Methode im HTML5-DOM, die uns den Zugriff auf Elemente über den Klassennamen im Klassenattribut ermöglicht: getELementsByClassName. Da die Methode relativ neu ist, ist sie in einigen DOM-Implementierungen noch nicht verfügbar Seien Sie vorsichtig, wenn Sie es verwenden. Schauen wir uns zunächst an, was diese Methode für uns leisten kann, und diskutieren dann, wie wir diese Methode zuverlässig verwenden können.
Ähnlich wie die Methode getELementsByTagName akzeptiert getElementsByClassName nur einen Parameter, nämlich den Klassennamen:

Code kopieren Der Code lautet wie folgt:

getElementsByClassName(class)

Der Rückgabewert dieser Methode ähnelt auch getElementsByTagName. Es handelt sich um ein Array von Elementen mit demselben Klassennamen. Die folgende Codezeile gibt ein Array zurück, das alle Elemente mit dem Klassennamen „sale“ enthält
Code kopieren Der Code lautet wie folgt:
document.getElementsByClassName("sale")

Sie können diese Methode auch verwenden, um Elemente mit mehreren Klassennamen zu finden. Um mehrere Klassennamen anzugeben, trennen Sie die Klassennamen einfach durch Leerzeichen im Zeichenfolgenargument. Fügen Sie beispielsweise die folgende Codezeile zum <script>-Tag hinzu: <br> <br><div class="codetitle"><span><a style="CURSOR: pointer" data="71155" class="copybut" id="copybut71155" onclick="doCopy('code71155')">Code kopieren<u></u></a> Der Code lautet wie folgt:</span></div> <div class="codebody" id="code71155"> warning(document.getElementsByClassName("sale important").length);<br> <br> </div> <p>Vollständiger Code<strong></strong> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="10676" class="copybut" id="copybut10676" onclick="doCopy('code10676')">Code kopieren<u></u></a> Der Code lautet wie folgt:</span></div> <div class="codebody" id="code10676"> <!DOCTYPE html><br> <html> <Kopf><br> <meta charset="utf-8"> <title>Einkaufsliste</title><br> </head> <body><br> <h1>Was Sie kaufen sollten</h1><br> <p title="eine sanfte Erinnerung">Vergessen Sie nicht, dieses Zeug zu kaufen.</p><br> <ul id="purchase"><br>                                                                                                                                                                                                                                                                                                                         </ul><br> <script><br> Alert(document.getElementsByClassName("sale important").length);<br> </script>





Im Warnfeld wird 1 angezeigt, was darauf hinweist, dass nur ein Element übereinstimmt, da es nur ein Element mit den Klassennamen „wichtig“ und „Verkauf“ gibt. Beachten Sie, dass das Element auch dann übereinstimmt, wenn die Reihenfolge des Klassennamens im Klassenattribut des Elements „Verkauf wichtig“ anstelle der im Parameter angegebenen Reihenfolge „Wichtiger Verkauf“ lautet. Dabei spielt nicht nur die tatsächliche Reihenfolge der Klassennamen keine Rolle, es spielt auch keine Rolle, ob das Element auch mehrere Klassennamen hat. Genau wie getELementsByTagName können Sie auch getElementsByClassName und getElementById in Kombination verwenden. Wenn Sie wissen möchten, wie viele Listenelemente, deren Klassenname „test“ enthält, sich im Element mit der ID „Kauf“ befinden, können Sie zuerst dieses spezifische Objekt suchen und dann getElementsByClassName:
aufrufen


Code kopieren

Der Code lautet wie folgt:


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

Auf diese Weise enthält das sales-Array nur Elemente mit der Klasse „sales“ in der „purchase“-Liste. Führen Sie die folgende Codezeile aus und Sie werden sehen, dass das sales-Array zwei Elemente enthält:

Code kopieren Der Code lautet wie folgt:

Alert(sales.length);

Diese getELementsByClassName-Methode ist sehr nützlich, wird aber nur von neueren Browsern (Safari 3.1, Chrome, Firefox 3 und Opera 9.5 und höher) unterstützt. Um diesen Mangel auszugleichen, müssen DOM-Skriptprogrammierer vorhandene DOM-Methoden verwenden, um ihren eigenen getElementsByClassName zu implementieren, was ein bisschen wie ein Übergangsritus ist. In den meisten Fällen ähnelt ihr Implementierungsprozess in etwa dem unten aufgeführten getElementsByClassName. Diese Funktion kann sowohl auf alte als auch auf neue Browser angewendet werden.

Code kopieren Der Code lautet wie folgt:

Funktion getElementsByClassName(node,classname){
If(node.getElementsByClassName){
            return node.getElementsByClassName(classname);
}else{
var results = [];
         var elems = node.getElementsByTagName("*");
for(var i=0;i If(elems[i].className.indexOf(classname)!=-1){
results[results.length]=elems[i];
            }
}
Ergebnisse zurückgeben;
}
}

Diese getElementsByClassName-Funktion akzeptiert zwei Parameter. Der erste Knoten stellt den Startpunkt der Suche im DOM-Baum dar, und der zweite Klassenname ist der zu durchsuchende Klassenname. Wenn die entsprechende getElementsByClassName-Funktion bereits auf dem eingehenden Knoten vorhanden ist, gibt diese neue Funktion direkt die entsprechende Knotenliste zurück. Wenn die Funktion getElementsByClassName nicht vorhanden ist, durchläuft diese neue Funktion alle Tags und findet Elemente mit dem entsprechenden Klassennamen.

Der Nachteil dieser Methode besteht darin, dass sie nicht mit mehreren Klassennamen funktioniert.

Wenn Sie diese Funktion verwenden, um den vorherigen Vorgang zum Abrufen der Einkaufsliste zu simulieren, können Sie dies wie folgt schreiben:

Code kopieren Der Code lautet wie folgt:

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

Um die Frage am Anfang des Artikels zu lösen, lautet der verwendete Code wie folgt:

Code kopieren Der Code lautet wie folgt:




   
    Einkaufsliste


   

Was Sie kaufen sollten


   

Vergessen Sie nicht, dieses Zeug zu kaufen.


   

           
  • Eine Portion Bohnen

    •        
  • Käse

    •        
  • Milk

    •    

<script><br>     Funktion getElementsByClassName(node,classname){<br>         if(node.getElementsByClassName){<br>             return node.getElementsByClassName(classname);<br>         }else{<br>             var results = [];<br>             var elems = node.getElementsByTagName("*");<br>             for(var i=0;i<elems.length;i ){<br>                if(elems[i].className.indexOf(classname)!=-1){<br>                    results[results.length]=elems[i];<br>                }<br>             }<br>             Ergebnisse zurückgeben;<br>         }<br>     }<br>     var body = document.getElementsByTagName("body")[0];<br>     var sales= getElementsByClassName(body,"sales");<br>     console.log(sales);<br> </script>


Lösung2 Robert Nyman方案

Dom und DOM haben sich die Zeit genommen Von Robert Nyman im Jahr 2008 veröffentlicht: The Ultimate GetElementsByClassName, Anno 2008 hat eine neue Version von getElementsByClassName erstellt时候，修改了部分代码，添加了许多新的功能:

1. 如果当前浏览器支持getElementsByClassName函数,则调用该原生函数数；
2. Klicken Sie auf XPath；//览器支持方面不统一
3.支持多个类名的搜索，不计先后顺序；
4. Die Funktion „getElementsByClassName“ wird von „nodelist“ verwendet象, 它很像数组, 有length和数字索引属性, 但并不是数组, 不能用Pop, Push, Robert, Robert, NodeList, NodeList und NodeList ::

复制代码 代码如下:

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

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

复制代码 代码如下:

/*
Entwickelt von Robert Nyman, http://www.robertnyman.com
Code/Lizenzierung: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag, elm){
    if (document.getElementsByClassName) {
        getElementsByClassName = function (className, tag, elm) {
            Ulme = Ulme || Dokument;
            var elements = elm.getElementsByClassName(className),
                nodeName = (tag)? new RegExp("\b" tag "\b", "i") : null,
                returnElements = [],
                aktuell;
            for(var i=0, il=elements.length; i                 current = elements[i];
                if(!nodeName || nodeName.test(current.nodeName)) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        };
    }
    else if (document.evaluate) {
        getElementsByClassName = function (className, tag, elm) {
            tag = tag || "*";
            Ulme = Ulme || Dokument;
            var-Klassen = className.split(" "),
                classToCheck = "",
                xhtmlNamespace = "http://www.w3.org/1999/xhtml",
                namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace: null,
                returnElements = [],
                Elemente,
                Knoten;
            for(var j=0, jl=classes.length; j                 classesToCheck = "[contains(concat(' ', @class, ' '), ' "classes[j] " ')]";
            }
            versuche es mit {
                elements = document.evaluate(".//" tagclassesToCheck, elm, namespaceResolver, 0, null);
            }
            fangen (e) {
                elements = document.evaluate(".//" tagclassesToCheck, elm, null, 0, null);
            }
            while ((node ​​= elements.iterateNext())) {
                returnElements.push(node);
            }
            return returnElements;
        };
    }
    sonst {
        getElementsByClassName = function (className, tag, elm) {
            tag = tag || "*";
            Ulme = Ulme || Dokument;
            var-Klassen = className.split(" "),
                classesToCheck = [],
                elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
                aktuell,
                returnElements = [],
                Übereinstimmung;
            for(var k=0, kl=classes.length; k                 classesToCheck.push(new RegExp("(^|\s)"classes[k] "(\s|$)"));
            }
            for(var l=0, ll=elements.length; l                 current = elements[l];
                match = false;
                for(var m=0, ml=classesToCheck.length; m                     match =classesToCheck[m].test(current.className);
                    if (!match) {
                        Pause;
                    }
                }
                if (match) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        };
    }
    return getElementsByClassName(className, tag, elm);
};
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS-Feuerwerk-Hintergrundeffekt-Implementierungsmethode_Javascript-KenntnisseNächster Artikel：JS-Feuerwerk-Hintergrundeffekt-Implementierungsmethode_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen