Exemples détaillés de trois méthodes pour obtenir des éléments en 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 utilisée est la suivante :

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 :

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

Il devrait l'être. a noté que this En plus d'être appelées par des objets document, les méthodes peuvent également être appelées par des éléments ordinaires. Un exemple est le suivant :

Pour le DOM natif, obtenez d'abord l'objet tag, l'identifiant ou le nom ou autre

Exemple :

<p id="targetp" >2333333</p>
<script>
  var element = document.getElementById("targetp");
  var tagname = element.tagName;
  alert(tagname);
</script>

jQuery obtient

$("#content-header").get(0).tagName

Si l'objet a été obtenu, vous pouvez directement récupérer le nom de la balise

<p onclick="alert(&#39;您单击的是：&#39;+this.tagName);">中华人民共和国</p>

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é 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 d'appel de cette méthode est la suivante :

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

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

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

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;
    }
  }

Si vous ne le faites pas seulement satisfait aux méthodes de sélection d'éléments ci-dessus, mais souhaite également pouvoir 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 un ensemble de sélecteurs par vous-même. 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 est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!