Extrait du guide JavaScript faisant autorité (la manière ultime de jQuery pour trouver des éléments basés sur le sélecteur de style est d'utiliser d'abord GetElementsByTagname (*) pour obtenir tous les éléments DOM, puis filtrer tous les éléments DOM selon le sélecteur de style)
Aujourd'hui, j'ai essayé la vitesse de diverses méthodes de sélection d'éléments. La méthode native est environ 8 fois plus rapide que jQuery. IE8 est le plus lent, IE9 est environ 3 fois plus rapide que IE8, Chrome fait le meilleur, suivi de Firefox)
Méthodes pour sélectionner des éléments de documentation:
1. Sélectionnez l'élément par id (GetElementByid)
1) Méthode d'utilisation: document.getElementById ("Domid")
où Domid est la valeur d'attribut ID de l'élément à sélectionner
2) Compatibilité: les navigateurs IE avec des versions inférieurs à IE8 ne distinguent pas le cas du numéro d'identification de l'élément et renverront les éléments correspondant à l'attribut de nom.
2. Sélectionnez des éléments par nom (GetElementsByName)
1) Méthode d'utilisation: document.getElementsByName ("DomName")
où DomName est la valeur d'attribut de nom de l'élément à sélectionner
2) Description: a. La valeur de retour est une collection nodelist (différente de la table)
né Contrairement à l'attribut ID, l'attribut de nom n'est valide que dans quelques éléments DOM (formulaire de formulaire, élément de formulaire, iframe, img). En effet, l'attribut de nom est créé pour faciliter la soumission des données de formulaire.
c. Lorsque vous définissez des attributs de noms pour formulaire, img, iframe, applet, intégration, éléments d'objet, les attributs nommés d'après la valeur d'attribut de nom seront automatiquement créés dans l'objet de document. Par conséquent, l'objet DOM correspondant peut être référencé via Document.Domname
3) Compatibilité: les éléments qui correspondent aux valeurs d'attribut ID dans IE reviendront également ensemble
3. Sélectionnez les éléments par nom de balise (GetElementsByTagName)
1) Méthode d'utilisation: élément.getElementsByTagName ("TagName")
Où, l'élément est un élément DOM valide (y compris le document)
TagName est le nom de balise de l'élément DOM
2) Description: a. La valeur de retour est une collection nodelist (différente de la table)
né Cette méthode ne peut sélectionner que des éléments descendants de l'élément qui appelle la méthode.
c. TagName est insensible à la casse
d. Lorsque Tagname est *, cela signifie que tous les éléments sont sélectionnés (responsables de la règle b.)
e. HTMLDocument définit certaines propriétés de raccourci pour accéder au nœud de balise. Par exemple: les attributs d'images, de formulaires et de liens du document pointent vers la collection <img>, <form> et <a> élément de balise, tandis que document.body et document.head pointent toujours vers le corps et les balises de tête (lorsque la balise de tête déclarée ne s'affiche pas, le navigateur créera également le document.
4. Sélectionnez des éléments via la classe CSS (GetElementsByClassName)
1) Méthode d'utilisation: élément.getElementsByClassName ("ClassNames")
Où, l'élément est un élément DOM valide (y compris le document)
ClassNames est une combinaison de noms de classe CSS (plusieurs noms de classe sont séparés par des espaces, qui peuvent être séparés par plusieurs espaces).
Par exemple, element.getElementsByClassName ("Class2 Class1") sélectionnera les éléments des éléments descendants des éléments qui ont des styles de classe1 et de classe2 appliqués (les noms de style ne font pas de distinction entre l'ordre)
2) Description: a. La valeur de retour est une collection nodelist (différente de la table)
né Cette méthode ne peut sélectionner que des éléments descendants de l'élément qui appelle la méthode.
3) Compatibilité: IE8 et ci-dessous Les navigateurs n'implémentent pas la méthode GetElementsByClassName
5. sélectionner les éléments via le sélecteur CSS
1) Méthode d'utilisation: document.QuerySelectorall ("sélecteur")
Où, le sélecteur est un sélecteur CSS légal
2) Description: a. La valeur de retour est une collection nodelist (différente de la table)
3) Compatibilité: IE8 et inférieur aux navigateurs ne prennent en charge que la syntaxe du sélecteur standard CSS2
La méthode simple de sélection des éléments DOM dans JS est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.