Tutoriel détaillé sur la façon d'obtenir des éléments HTML DOM à l'aide de JS

Cet article présente principalement les 8 méthodes d'obtention d'éléments HTML DOM en JS. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour jeter un œil

Qu'est-ce que HTML DOM

Le modèle objet de document (Document Modèle objet) est recommandé par l'organisation W3C Interface de programmation standard pour gérer les langages de balisage extensibles. Une compréhension simple est que HTML DOM est une norme sur la façon d'obtenir, de modifier, d'ajouter ou de supprimer des éléments HTML. Toutes les opérations que nous effectuons sur les pages Web en utilisant JavaScript sont effectuées via le DOM.

Cet article ne fait pas de recherche approfondie, mais résume seulement divers usages et pièges.

Méthodes JS pour obtenir des éléments DOM (8 façons)

1. Obtenir par ID (getElementById)

2. Par attribut de nom (getElementsByName)

3. Par nom de balise (getElementsByTagName)

4. Par nom de classe (getElementsByClassName)

5. Méthode pour obtenir du HTML (document.documentElement)

6. Méthode pour obtenir le corps (document.body)

7. Obtenir un élément via le sélecteur (querySelector)

8. Obtenir un ensemble d'éléments via le sélecteur (querySelectorAll)
   

Commençons par expliquer un par un.

1. Obtenir par ID (getElementById)

document.getElementById('id')

Utilisation :

1. Le contexte doit être documenté.

2. Les paramètres doivent être passés. Les paramètres sont de type chaîne et servent à obtenir l'identifiant de l'élément.

3. La valeur de retour n'obtient qu'un seul élément et renvoie null si elle n'est pas trouvée.

pit~~pit pit~pit pit~pit pit~ :

1 S'il y a plusieurs identifiants, n'obtenez que le premier, c'est-à-dire celui qui apparaît en premier . Généralement, le même identifiant n’apparaîtra pas deux fois sur la page.

2. Dans IE6 et 7, le nom de l'élément de formulaire sera obtenu comme valeur d'ID. Chacun doit donc y prêter attention lors de leur définition.

3. Ce n'est pas sensible à la casse dans IE6 et 7.

4. Vous pouvez utiliser directement l'ID de l'élément pour représenter cet élément. (Non recommandé dans les projets)

5. Le contexte d'un élément obtenu par ID ne peut être qu'un document. Pourquoi le contexte doit-il être document ? Parce que la méthode getElementById est sur le prototype de la classe Document. Peut-être que vous ne comprenez pas, alors continuez à lire.

2. Via l'attribut name (getElementsByName)

document.getElementsByName('name')

Utilisation :

1. Le contexte doit être documenté.

2. Les paramètres doivent être passés, et les paramètres doivent obtenir l'attribut name de l'élément.

3. La valeur de retour est un tableau de type tableau. Si elle n'est pas trouvée, un tableau vide est renvoyé.

pit~~pit pit~pit pit~pit pit~ :

1 Le résultat obtenu est un tableau, pas un tableau.

2. Seuls les éléments de formulaire peuvent être obtenus dans le navigateur IE Bien sûr, nous ne l'utilisons généralement que pour obtenir des éléments de formulaire. À partir d'IE10, cela peut être plus que simplement. éléments de forme.

3. Le contexte ne peut être qu'un document, pour la même raison que getElementById.

3. Par nom de balise (getElementsByTagName)

document.getElementsByTagName('p');
var op = document.getElementById('pId');
op.getElementsByTagName('p');

Utilisation :

1. Le contexte peut être un document ou un élément. Notez que cet élément doit exister.

2. Le paramètre consiste à obtenir l'attribut de nom de balise de l'élément, qui n'est pas sensible à la casse.

3. La valeur de retour est un tableau de type tableau. Si elle n'est pas trouvée, un tableau vide est renvoyé.

Keng~~Kengkeng~Kengkeng~Kengkeng~ :

1 Le résultat obtenu est de type tableau.

2. Le contexte ne doit pas nécessairement être un document, car la méthode getElementsByTagName n'est pas seulement sur le prototype de la classe Document mais aussi sur le prototype de l'Element. classe, donc le document et l'élément peuvent être Utilisez cette méthode. Si vous ne comprenez toujours pas, je vous l’expliquerai à la fin de l’article.

4. Par nom de classe (getElementsByClassName)

Utilisation (similaire à getElementsByTagName) :

1. être un document, peut aussi être un élément.

2. Le paramètre est le nom de classe de l'élément.

3. La valeur de retour est un tableau de type tableau. Si elle n'est pas trouvée, un tableau vide est renvoyé.

Keng~~Kengkeng~Kengkeng~Kengkeng~ :

1 Le résultat obtenu est de type tableau.

2.IE8 et les versions précédentes ne sont pas compatibles. C'est dommage qu'une méthode aussi utile ne soit pas compatible.

5. Méthode d'obtention du html (document.documentElement)

document.documentElement est spécifiquement utilisé pour obtenir la balise html.

6. Méthode pour obtenir le corps (document.body)

document.body est spécifiquement utilisé pour obtenir la balise body.

7. Récupérer un élément via le sélecteur (querySelector)

Utilisation :

1. , Peut aussi être un élément.

2. Le paramètre est un sélecteur, tel que : "p .className".

3. La valeur de retour n'obtient qu'un seul élément.

Kengkeng~~kengkeng~kengkeng~kengkeng~ :

Cette méthode n'est pas compatible avec IE7 et les versions précédentes, et il semble que les entreprises compatibles avec IE7 ne soient plus prises en compte.

8. Obtenez un ensemble d'éléments via le sélecteur (querySelectorAll)

L'utilisation est similaire à querySelector :

1 . Contexte Il peut s'agir d'un document ou d'un élément.

2. Le paramètre est un sélecteur, tel que : "p .className".

3. La valeur de retour est de type tableau.

Keng~~Kengkeng~Kengkeng~Kengkeng~ :

Identique à querySelector, non compatible avec IE7.

Maintenant que nous avons parlé des 8 méthodes pour obtenir des éléments DOM à l'aide de JS natif, parlons des raisons pour lesquelles certaines méthodes ne peuvent être utilisées que sur des documents.

Prenons p comme exemple. p est une instance de la classe HTMLpElement et document est une instance de HTMLDocument.

Leur relation d'héritage :

HTMLpElement > HTMLElement > Node > EventTarget

Nous savons tous que les sous-classes héritent de la classe parent et que la sous-classe peut utiliser les
propriétés et méthodes

Leur même relation d'héritage est Node et EventTarget, ce qui signifie qu'ils peuvent tous utiliser les méthodes sur Node et EventTarget.

Tels que nodeName, parentNode, etc. sur Node, et addEventListener sur EventTarget, etc.

getElementById est uniquement sur le prototype de la classe Document. HTMLpElement n'hérite pas de la classe Document, donc p ne peut pas utiliser la méthode getElementById.
getElementsByTagName se trouve sur le prototype de la classe Document et également sur le prototype de la classe Element, donc p et document peuvent utiliser la méthode getElementsByTagName.

Les autres sont pareils.

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!