Processus Js d'exploitation des objets DOM

Permettez-moi de résumer le processus d'exploitation de Js Objet DOM J'ai jeté un œil à la vitesse des différentes méthodes de sélection d'éléments. La méthode native est près de 8 fois plus rapide que le bloc jQUERY, et IE8 l'est. le plus lent. , IE9 est trois fois plus rapide que IE8

Méthode de sélection des éléments du document :

1 Sélectionner les éléments par ID (getElementById)
1) Méthode d'utilisation : document. getElementById("domId")
Où, domId est la valeur de l'attribut id de l'élément à sélectionner
2) Compatibilité : Les navigateurs IE inférieurs à la version IE8 ne distinguent pas les implémentation de la méthode getElementById Le numéro d'identification de l'élément est sensible à la casse et les éléments correspondant à l'attribut name seront renvoyés.

2. Sélectionnez les éléments par nom (getElementsByName)
1) Méthode d'utilisation : document.getElementsByName("domName")
Où, domName est la valeur de l'attribut de nom de l'élément à sélectionner
2 ) Description : a. La valeur de retour est une collection nodeList (différente de Array)
b Contrairement à l'attribut ID, l'attribut name n'est valide que dans quelques éléments DOM (form form, form element, iframe, img. ). En effet, l'attribut name a été créé pour faciliter la soumission des données du formulaire.
C. Lorsque l'élément Form, IMG, Iframe, Applet, Embed, Object définit la propriété name, il créera automatiquement l'attribut nommé d'après la valeur de l'attribut name dans l'objet Document. Par conséquent, l'objet dom correspondant peut être référencé via document.domName
3) Compatibilité : les éléments avec les valeurs d'attribut ID correspondantes dans IE seront également renvoyés ensemble

3. Sélectionnez les éléments par nom de balise (getElementsByTagName)
1) Comment utiliser : element.getElementsByTagName("tagName")
Parmi eux, l'élément est un élément DOM valide (y compris le document)
tagName est le nom de la balise du Élément DOM
2) Description : a. La valeur de retour est une collection nodeList (différente de Array)
b. Cette méthode ne peut sélectionner que les éléments descendants de l'élément qui appelle cette méthode.
C. Le nom de la balise ne fait pas la distinction entre les minuscules et les minuscules.
D. Lorsque le nom de la balise est*, cela signifie que tous les éléments sont sélectionnés (suivre les règles b.)
E. HTMLDOCUMENT définira quelques attributs rapides pour accéder au nœud d’étiquette. Par exemple : les attributs images, formulaires et liens du document pointent vers la collection d'éléments de balise ,

, , tandis que document.body et document.head pointent toujours vers le corps et la tête. balises (lorsque la déclaration head n'est pas affichée, le navigateur créera également l'attribut document.head)

4. Sélectionnez les éléments via les classes CSS (getElementsByClassName)
1) Méthode d'utilisation : element.getElementsByClassName( "classNames")
Parmi eux, 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 et peuvent être séparés par plusieurs espaces),      " ) sélectionnera les éléments dont les descendants d'éléments ont à la fois les styles class1 et class2 appliqués (les noms de style ne sont pas dans un ordre particulier)
2) Description : a. La valeur de retour est une collection nodeList (différente de Array)
b. . Cette méthode ne peut sélectionner que les éléments descendants de l'élément qui appelle cette méthode.
3) Compatibilité : les navigateurs IE8 et inférieurs n'implémentent pas la méthode getElementsByClass
Name
5 Sélectionnez les éléments
via le sélecteur CSS 1) Comment. à utiliser : document.querySelectorAll("selector")
                                              utiliser   utiliser utiliser utiliser utiliser                 utiliser ‐ ' ' s ' ‐ ‐ ‐‐ et ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ out to ​​​ ​ ​ ​ ​ ​ ​ ​ Hors compatibilité : les navigateurs IE8 et inférieurs ne prennent en charge que la syntaxe de sélection standard CSS2

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser CSS pour masquer le contenu textuel de l'arrière-plan de l'image

Comment utiliser Vue+CSS3 pour créer des effets interactifs

Comment rendre DIV adaptatif en hauteur

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!