Résumé des méthodes courantes d'obtention d'éléments dans les compétences JavaScript_javascript

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 d'utilisation est la suivante :

Copier le code Le code est le suivant :

document.getElementById('demo') //demo est l'ID correspondant à l'élément

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 (HTMLCollection pour être précis, ce n'est pas un tableau au sens propre du terme), chaque objet correspondant à un élément avec une balise donnée dans le document. 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 :

.

Copier le code Le code est le suivant :

document.getElementsByTagname('li') //li est le nom de la balise

Il est à noter qu'en plus d'être appelée par l'objet document, cette méthode peut également être appelée par des éléments ordinaires. Un exemple est le suivant :

Copier le code Le code est le suivant :

var démo = 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 avec audace.

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 s'appelle comme suit :

Copier le code Le code est le suivant :

document.getElementsByClassName('demo') //demo est le nom de classe spécifié pour l'élément

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

Pour les navigateurs plus anciens, comme IE6 et 7, nous pouvons utiliser le hack suivant :

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 je = 0; je < elems.length; je ){
Si(elems[i].className.indexOf(classname) != -1){
résultats[results.length] = elems[i];
                }
            }
             renvoyer les résultats ;
>
}  

Agrandir

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 considérées comme excellentes en termes de performances.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il pourra être utile à tout le monde.