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 e388a4556c0f65e1904146cc1a846bee dans le document, getElementsByTagName() les trouvera tous, quel que soit l'emplacement de l'élément e388a4556c0f65e1904146cc1a846bee 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 e388a4556c0f65e1904146cc1a846bee Une liste de nœuds d'éléments :

document.getElementsByTagName("p");

Exemple 2

L'exemple suivant renverra tout4003e577ac1d4aecb4fabfafd1671131, et ces éléments e388a4556c0f65e1904146cc1a846bee 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 e388a4556c0f65e1904146cc1a846bee de la page, et nous pouvons accéder à ces éléments e388a4556c0f65e1904146cc1a846bee

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
Vous pouvez également accéder à un objet spécifique par son index éléments numériques. 
Pour accéder au troisième élément e388a4556c0f65e1904146cc1a846bee, 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 b6c5a531a458a2e790c1fd6421739d1c premier élément enfant (firstChild) de l'élément, et le dernier b6c5a531a458a2e790c1fd6421739d1c est le dernier élément enfant (lastChild) de l'élément a34de1251f0d9fe1e645927f19a896e8 
De plus, a34de1251f0d9fe1e645927f19a896e8 est le nœud parent (parentNode) de chaque élément b6c5a531a458a2e790c1fd6421739d1c 
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!