Maison > interface Web > js tutoriel > Explication détaillée des exemples de méthodes permettant à Javascript de rechercher et d'accéder aux nœuds dom

Explication détaillée des exemples de méthodes permettant à Javascript de rechercher et d'accéder aux nœuds dom

伊谢尔伦
Libérer: 2017-07-20 11:42:21
original
1294 Les gens l'ont consulté

Vous pouvez retrouver l'élément sur lequel vous souhaitez opérer de plusieurs manières :

En utilisant les méthodes getElementById() et getElementsByTagName()

En utilisant les propriétés parentNode, firstChild et lastChild d'un nœud d'élément

getElementById() et getElementsByTagName()

Les deux méthodes, getElementById() et getElementsByTagName(), peuvent trouver n'importe quel élément HTML dans l'ensemble du document HTML.

Ces deux méthodes ignorent la structure du document. Si vous souhaitez rechercher tous les éléments

dans le document, getElementsByTagName() les trouvera tous, quel que soit l'emplacement de l'élément

De plus, la méthode getElementById() renvoie l'élément correct, peu importe où il est caché dans la structure du document.

Ces deux méthodes vous fourniront tous les éléments HTML dont vous avez besoin, peu importe où ils se trouvent dans le document !

getElementById() peut renvoyer des éléments par l'ID spécifié :

getElementById() Syntaxe


document.getElementById("ID");
Copier après la connexion

Remarque : getElementById() ne fonctionne pas en XML. Dans un document XML, vous devez effectuer une recherche en ayant un attribut de type id, qui doit être déclaré dans la DTD XML.

La méthode getElementsByTagName() renvoie tous les éléments (sous forme de liste de nœuds) qui sont des descendants de l'élément que vous utilisez lorsque vous utilisez cette méthode, en utilisant le nom de balise spécifié.

getElementsByTagName() peut être utilisé pour n'importe quel élément HTML :

getElementsByTagName() Syntaxe


document.getElementsByTagName("标签名称");
Copier après la connexion

ou :


document.getElementById('ID').getElementsByTagName("标签名称");
Copier après la connexion

Exemple 1

L'exemple suivant renverra tous les éléments du document

Une liste de nœuds d'éléments :


document.getElementsByTagName("p");
Copier après la connexion

Exemple 2

L'exemple suivant renverra tout< Une liste de nœuds d'éléments p>, et ces éléments

doivent être des descendants de l'élément avec l'identifiant "mainp":


document.getElementById(&#39;mainp&#39;).getElementsByTagName("p");
Copier après la connexion

Liste de nœuds (nodeList)

Lorsque nous utilisons une liste de nœuds, nous enregistrons généralement la liste dans une variable, comme ceci :


var x=document.getElementsByTagName("p");
Copier après la connexion

Maintenant, la variable x contient une liste de tous les éléments

de la page, et nous pouvons accéder à ces éléments

Remarque : les numéros d'index commencent à 0.

Vous pouvez parcourir la liste des nœuds en utilisant l'attribut length :


var x=document.getElementsByTagName("p");
for (var i=0;i
Copier après la connexion

Vous pouvez également accéder à un objet spécifique par son index éléments numériques.

Pour accéder au troisième élément

, vous écrivez :


var y=x[2];
Copier après la connexion

parentNode, firstChild et lastChild

Les trois propriétés parentNode, firstChild et lastChild peuvent suivre la structure du document et effectuer des "voyages de courte distance" dans le document.

Veuillez consulter l'extrait HTML suivant :


<table>
 <tr>
  <td>John</td>
  <td>Doe</td>
  <td>Alaska</td>
 </tr>
</table>
Copier après la connexion

Dans le code HTML ci-dessus, le premier premier élément enfant (firstChild) de l'élément, et le dernier est le dernier élément enfant (lastChild) de l'élément

De plus, est le nœud parent (parentNode) de chaque élément

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal