méthode javascript pour obtenir des éléments

Comment obtenir des éléments en JavaScript : 1. Obtenez l'objet nœud avec l'attribut id via getElementById ; 2. Obtenez le tableau d'objets via getElementsByTagName ; 3. Obtenez l'élément avec le nom de classe spécifié via getElementsByClassName ;

L'environnement d'exploitation de cet article : système Windows 7, version JavaScript 1.8.5, ordinateur Dell G3.

Il existe trois manières courantes d'obtenir des éléments, à savoir via l'ID d'élément, via le nom de la balise et via le nom de la classe.

getElementById

DOM fournit une méthode appelée getElementById, qui renverra un objet nœud correspondant à l'attribut id. Veuillez faire attention à la sensibilité à la casse lors de son utilisation.

C'est une fonction unique à l'objet document, et cette méthode ne peut être appelée que via lui. La méthode utilisée est la suivante :

Le code est le suivant :

document.getElementById('demo') //demo是元素对应的ID

Cette méthode est compatible avec les navigateurs grand public, même IE6+, et peut être utilisée en toute sécurité.

getElementsByTagName

Cette méthode renvoie un tableau d'objets (la collection HTMLCollection pour être précis, ce n'est pas un tableau au vrai sens du terme). Chaque objet correspond à l'objet). dans le document. Un élément avec la balise donnée. Semblable à getElementById, cette méthode ne fournit qu'un seul paramètre, et son paramètre est le nom de la balise spécifiée. L'exemple de code est le suivant :

Le code est le suivant :

document.getElementsByTagname('li')  //li是标签的名字

Il devrait. A noter que cette méthode a En plus d'être appelée par des objets document, elle peut également être appelée par des éléments ordinaires. Un exemple est le suivant :

Le code est le suivant :

var demo = document.getElementById('demo');
var lis = demo.getElementsByTagname('li');

De même, cette méthode est compatible avec les navigateurs grand public, même IE6+, et peut être utilisée en toute sécurité.

getElementsByClassName

En plus d'obtenir des éléments en spécifiant des balises, DOM fournit également la méthode getElementsByClassName pour obtenir des éléments avec des noms de classe spécifiés. Cependant, comme cette méthode est relativement nouvelle, les anciens navigateurs ne la prennent pas encore en charge, comme IE6. On peut cependant recourir à des hacks pour pallier les défauts des anciens navigateurs. La méthode d'appel de cette méthode est la suivante :

Le code est le suivant :

document.getElementsByClassName('demo')    //demo为元素指定的class名

Identique à getElementsByTagname, en plus d'être appelée par l'objet document, cette méthode peut également être appelé par des éléments ordinaires.

Pour les navigateurs plus anciens, comme IE6 et 7, nous pouvons utiliser la méthode de hack suivante :

Le code est le suivant :

function getElementsByClassName(node,classname){
        if(node.getElementsByClassName) {
            return node.getElementsByClassName(classname);
        }else {
            var results = [];
            var elems = node.getElementsByTagName("*");
            for(var i = 0; i < elems.length; i++){
                if(elems[i].className.indexOf(classname) != -1){
                    results[results.length] = elems[i];
                }
            }
            return results;
        }
    }

Extension

Si vous êtes non seulement satisfait des méthodes de sélection d'éléments ci-dessus, mais que vous souhaitez également obtenir des éléments via des sélecteurs comme JQuery, la méthode d'implémentation est similaire à getElementsByClassName ci-dessus. Si vous êtes intéressé, vous pouvez implémenter vous-même un ensemble de sélecteurs. Cependant, je pense que les trois méthodes ci-dessus combinées au bouillonnement d'événements sont suffisantes. Après tout, ces trois méthodes sont excellentes en termes de performances.

Étude recommandée : "Tutoriel JavaScript avancé"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!