Il existe trois façons courantes d'obtenir des éléments, à savoir, à savoir, à savoir le nom via l'élément ID, le nom via la balise et le nom via la classe.
getElementbyid
Dom fournit une méthode appelée GetElementById, qui renverra un objet de nœud avec l'attribut ID correspondant. Veuillez faire attention à être sensible à la casse lorsque vous l'utilisez.
Il s'agit d'une fonction unique à l'objet de document et ne peut être appelée que par le biais. Les méthodes utilisées sont les suivantes:
La copie de code est la suivante:
document.getElementById ('Demo') // Demo est l'ID correspondant à l'élément
Cette méthode est compatible avec les navigateurs grand public, même en incluant IE6 +, et peut être utilisé avec audace.
getElementsbytagname
Cette méthode renvoie un tableau d'objets (pour être précis, collection htmlcollection, ce n'est pas un vrai tableau), chaque objet correspond à 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:
La copie de code est la suivante:
document.getElementsByTagName ('li') // li est le nom de la balise
Il convient de noter qu'en plus d'être appelé par des objets de document, cette méthode peut également être appelée par des éléments ordinaires. Les exemples sont les suivants:
La copie de code est la suivante:
var démo = document.getElementById («démo»);
var lis = demo.getElementsByTagName ('li');
De même, cette méthode est compatible avec les navigateurs grand public, même en incluant IE6 +, et peut être utilisé avec audace.
getElementsByClassName
En plus d'obtenir des éléments en spécifiant des balises, le DOM fournit également la méthode GetElementsByClassName pour obtenir l'élément avec le nom de classe spécifié. Cependant, comme cette méthode est relativement nouvelle, les navigateurs plus anciens ne le soutiennent pas, comme IE6. Cependant, nous pouvons compenser les lacunes des anciens navigateurs via Hack. La méthode est appelée comme suit:
La copie de code est la suivante:
document.getElementsByClassName ('Demo') // Le nom de classe spécifié par la démo est
Comme GetElementsByTagname, cette méthode peut être appelée par des éléments ordinaires en plus d'être appelé par des objets de document.
Pour les navigateurs plus âgés, tels que IE6 et 7, nous pouvons les implémenter via le piratage suivant:
La copie de code est la suivante:
fonction getElementsByClassName (node, className) {
if (node.getElementsByClassName) {
return node.getElementsByClassName (className);
}autre {
var résultats = [];
var elems = node.getElementsByTagName ("*");
pour (var i = 0; i <elems.length; i ++) {
if (elems [i] .classname.indexof (className)! = -1) {
Résultats [result.Length] = elems [i];
}
}
Résultats de retour;
}
}
développer
Si vous n'êtes pas seulement satisfait des méthodes de sélection des éléments ci-dessus, vous souhaitez obtenir des éléments via des sélecteurs comme JQuery, et la méthode d'implémentation est similaire à celle de GetElementsByClassName ci-dessus. Si vous êtes intéressé, vous pouvez implémenter un ensemble de sélecteurs. Cependant, je pense que les trois méthodes ci-dessus combinées avec des bulles d'événements sont suffisantes, après tout, ces trois performances sont excellentes.
Ce qui précède est l'intégralité du contenu de cet article, et j'espère que cela sera utile à tout le monde.