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

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");

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("标签名称");

ou :

document.getElementById('ID').getElementsByTagName("标签名称");

Exemple 1

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

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

document.getElementsByTagName("p");

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('mainp').getElementsByTagName("p");

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");

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];

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>

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!