Maison > Article > interface Web > Méthode multi-navigateur JavaScript pour obtenir le même nœud de classe dans les compétences page_javascript

Méthode multi-navigateur JavaScript pour obtenir le même nœud de classe dans les compétences page_javascript

WBOYoriginal: 2016-05-16 16:11:271184parcourir

Lors du développement de pages Web, nous devons souvent utiliser des éléments avec le même nom de classe, c'est-à-dire des éléments avec la même classe. J'ai passé l'examen écrit hier et je n'ai pas pu répondre à une question connexe :

JavaScript récupère le nœud avec test de classe dans la page

J'ai donc collecté quelques informations pertinentes et répertorié deux méthodes qui, à mon avis, sont meilleures dans cet article. S'il y a des lacunes, j'espère que tout le monde pourra les critiquer et les corriger. Si vous avez une meilleure méthode, j'espère que vous pourrez la partager.

Solution1 Jeremy Keuth Solution

Oncle Jeremy Keuth a parlé de la méthode getElementsByClass dans le chapitre 3, section 4 du livre « The Art of JavaScript DOM Programming (2nd Edition) » (anglais : DOM Scripting-Web Design with JavaScript and the Document Object Model It). explique également comment appliquer cette méthode dans les navigateurs qui ne supportent pas cet attribut (IE6, IE7 et IE8, méprisons-les). L'extrait est ici, avec des modifications à certains endroits.

Il existe une nouvelle méthode dans le DOM HTML5 qui nous permet d'accéder aux éléments via le nom de classe dans l'attribut de classe. Il s'agit de : getELementsByClassName. Étant donné que la méthode est relativement nouvelle, elle n'est pas encore disponible dans certaines implémentations du DOM, donc soyez-en sûr. soyez prudent lorsque vous l'utilisez. Voyons d'abord ce que cette méthode peut faire pour nous, puis discutons de la manière de l'utiliser de manière fiable.
Semblable à la méthode getELementsByTagName, getElementsByClassName n'accepte qu'un seul paramètre, qui est le nom de la classe :

Copier le code Le code est le suivant :

getElementsByClassName(classe)

La valeur de retour de cette méthode est également similaire à getElementsByTagName. Il s'agit d'un tableau d'éléments avec le même nom de classe. La ligne de code suivante renvoie un tableau contenant tous les éléments avec le nom de classe « sale » :
.

Copier le code Le code est le suivant :

document.getElementsByClassName("vente")

Vous pouvez également utiliser cette méthode pour rechercher des éléments portant plusieurs noms de classe. Pour spécifier plusieurs noms de classe, séparez simplement les noms de classe par des espaces dans l'argument de chaîne. Par exemple, ajoutez la ligne de code suivante à la balise <script> : <br> <div class="codetitle"> <span><a style="CURSOR: pointer" data="71155" class="copybut" id="copybut71155" onclick="doCopy('code71155')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code71155"> <br> alert(document.getElementsByClassName("vente importante").length);<br> </div> <p><strong>Code complet</strong></p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="10676" class="copybut" id="copybut10676" onclick="doCopy('code10676')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code10676"> <br> <!DOCTYPE html><br> <html> <tête><br> <meta charset="utf-8"> <title>Liste de courses</title><br> </tête> <corps><br> <h1>Quoi acheter</h1><br> <p title="un doux rappel">N'oubliez pas d'acheter ce truc.</p><br> <ul id="achat"><br> </ul><br> <script><br> alert(document.getElementsByClassName("vente importante").length);<br> </script>

Vous verrez 1 affiché dans la boîte d'avertissement, indiquant qu'un seul élément correspond, car il n'y a qu'un seul élément avec des noms de classe "important" et "vente". Notez que même si l'ordre du nom de classe dans l'attribut class de l'élément est « vente importante » au lieu de « vente importante » spécifié dans le paramètre, l'élément sera toujours mis en correspondance. Non seulement l’ordre réel des noms de classe n’a pas d’importance, mais le fait que l’élément ait également plus de noms de classe n’a pas d’importance. Tout comme avec getELementsByTagName, vous pouvez également utiliser getElementsByClassName et getElementById en combinaison. Si vous souhaitez savoir combien d'éléments de liste dont le nom de classe contient test se trouvent dans l'élément avec l'identifiant d'achat, vous pouvez d'abord rechercher cet objet spécifique, puis appeler getElementsByClassName :

Copier le code

Le code est le suivant :

var shopping=document.getElementById("purchase");

var sales = shopping.getElementsByClassName("sale");

De cette façon, le tableau sales ne contient que des éléments avec la classe "sales" dans la liste "achat". Exécutez la ligne de code suivante et vous verrez que le tableau sales contient deux éléments :

Copier le code Le code est le suivant :

alert(sales.length);

Cette méthode getELementsByClassName est très utile, mais seuls les navigateurs les plus récents (Safari 3.1, Chrome, Firefox 3 et Opera 9.5 et supérieurs) la prennent en charge. Afin de combler cette lacune, les programmeurs de scripts DOM doivent utiliser les méthodes DOM existantes pour implémenter leur propre getElementsByClassName, ce qui est un peu comme un rite de passage. Dans la plupart des cas, leur processus de mise en œuvre est à peu près similaire à getElementsByClassName ci-dessous. Cette fonction peut être appliquée aux anciens et aux nouveaux navigateurs.

Copier le code Le code est le suivant :

fonction getElementsByClassName(node,classname){

Si(node.getElementsByClassName){

            return node.getElementsByClassName(classname);

}autre{

var résultats = [];

         var elems = node.getElementsByTagName("*");

pour(var i=0;i
Si(elems[i].className.indexOf(classname)!=-1){

résultats[results.length]=elems[i];

            }

>

Retourner les résultats ;

>

>

Cette fonction getElementsByClassName accepte deux paramètres. Le premier nœud représente le point de départ de la recherche dans l'arborescence DOM et le deuxième nom de classe est le nom de la classe à rechercher. Si la fonction getElementsByClassName appropriée existe déjà sur le nœud entrant, alors cette nouvelle fonction renverra directement la liste de nœuds correspondante. Si la fonction getElementsByClassName n'existe pas, cette nouvelle fonction parcourra toutes les balises et trouvera les éléments avec le nom de classe correspondant.

L'inconvénient de cette méthode est qu'elle ne fonctionne pas avec plusieurs noms de classes.

Si vous utilisez cette fonction pour simuler l'opération précédente d'obtention de la liste de courses, vous pouvez l'écrire ainsi :

Copier le code Le code est le suivant :

var shopping=document.getElementById("purchase");

var sales = shopping.getElementsByClassName(shopping,"test");

console.log(ventes);

Donc, pour résoudre la question du début de l'article, le code utilisé est le suivant :

Copier le code Le code est le suivant :

    Liste de courses

Quoi acheter

N'oubliez pas d'acheter ce truc.

Une mince couche de haricots

Fromage

Lait

Solution2 Robert Nyman方案

Jeremy Keuth Publié en 2008, Robert Nyman a publié The Ultimate GetElementsByClassName, Année 2008, année 2008.时候，修改了部分代码，添加了许多新的功能：

1. 2. Le système XPath；//小飞鱼：一种浏览器内置的定位XML文档的强大方式，不过浏览器支持方面不统一

3.支持多个类名的搜索，不计先后顺序；
4. Il s'agit d'une liste de nœuds définie par GetElementsByClassName. // Il s'agit d'une liste de nœuds象，它很像数组，有length和数字索引属性，但并不是数组，不能用pop ， push ：

复制代码代码如下 :

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

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

复制代码代码如下 :

/*

Développé par Robert Nyman, http://www.robertnyman.com

Code/licence : http://code.google.com/p/getelementsbyclassname/

*/

var getElementsByClassName = function (className, tag, elm){

    if (document.getElementsByClassName) {

        getElementsByClassName = function (className, tag, elm) {

            orme = orme || documenter;

            var elements = elm.getElementsByClassName(className),

                nodeName = (balise) ? new RegExp("\b" balise "\b", "i") : null,

                returnElements = [],

                actuel ;

            pour(var i=0, il=elements.length; i
                courant = éléments[i];

                if(!nodeName || nodeName.test(current.nodeName)) {

                    returnElements.push(current);

                >

            >

            retourner returnElements;

        };

    >

    sinon si (document.evaluate) {

        getElementsByClassName = function (className, tag, elm) {

            balise = balise || "*";

            orme = orme || documenter;

            var classes = className.split(" "),

                classesToCheck = "",

                xhtmlNamespace = "http://www.w3.org/1999/xhtml",

                namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace) ? xhtmlNamespace : null,

                returnElements = [],

                éléments,

                nœud;

            pour(var j=0, jl=classes.length; j
                classesToCheck = "[contains(concat(' ', @class, ' '), ' " classes[j] " ')]";

            >

            essayez {

                elements = document.evaluate(".//" tag classesToCheck, elm, namespaceResolver, 0, null);

            >

            attraper(e) {

                elements = document.evaluate(".//" tag classesToCheck, elm, null, 0, null);

            >

            while ((node ​​= elements.iterateNext())) {

                returnElements.push(node);

            >

            retourner returnElements;

        };

    >

    sinon {
        getElementsByClassName = function (className, tag, elm) {

            balise = balise || "*";

            orme = orme || documenter;

            var classes = className.split(" "),

                classesToCheck = [],

                elements = (tag === "*" && elm.all) ? elm.all : elm.getElementsByTagName(tag),

                actuel,

                returnElements = [],

                correspond ;

            pour(var k=0, kl=classes.length; k
                classesToCheck.push(new RegExp("(^|\s)" classes[k] "(\s|$)"));

            >

            pour(var l=0, ll=elements.length; l
                actuel = éléments[l];

                correspondance = faux ;

                pour(var m=0, ml=classesToCheck.length; m
                    match = classesToCheck[m].test(current.className);

                    si (!match) {

                        pause;

                    >

                >

                si (match) {

                    returnElements.push(current);

                >

            >

            retourner returnElements;

        };

    >

    return getElementsByClassName(className, tag, elm);

};

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode de mise en œuvre de l'effet d'arrière-plan des feux d'artifice JS_compétences javascriptArticle suivant：Méthode de mise en œuvre de l'effet d'arrière-plan des feux d'artifice JS_compétences javascript

Articles Liés

Voir plus