Accès au DOM HTML


Accéder au HTML DOM - Rechercher des éléments HTML.

Accéder aux éléments HTML (nœuds)

Accéder aux éléments HTML équivaut à accéder aux nœuds

Vous pouvez accéder aux éléments HTML de différentes manières :

  • En utilisant la méthode getElementById()

  • En utilisant la méthode getElementsByTagName()

  • En utilisant la méthode getElementsByClassName()

Méthode getElementById()

La méthode getElementById() renvoie l'élément avec l'ID spécifié :

Syntaxe

node.getElementById("id");

L'exemple suivant obtient l'élément avec id="intro":

Instance

<html><!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementById</b> method!</p>

<script>
x=document.getElementById("intro");
document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>");
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Méthode getElementsByTagName()

getElementsByTagName() renvoie tous les éléments avec le nom de balise spécifié.

Syntaxe

node.getElementsByTagName("tagname");

L'exemple suivant renvoie Contient une liste de tous les éléments <p> du document :

Instance

<html><!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

<script>
x=document.getElementsByTagName("p");
document.write("Text of first paragraph: " + x[0].innerHTML);
</script>

</body>
</html>

Exécuter l'instance»

Cliquez Bouton "Exécuter l'exemple" pour afficher des exemples en ligne

L'exemple suivant renvoie une liste contenant tous les éléments <p> du document, et ces éléments <p> doivent être des descendants de l'élément avec id="main" ( Enfants, petits-enfants, etc.) :

Instance

<html><!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>

<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method</p>
</div>

<script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("First paragraph inside the div: " + x[0].innerHTML);
</script>

</body>
</html>

Exécuter l'instance»

Cliquez le bouton "Exécuter l'instance" pour afficher l'exemple en ligne

La méthode getElementsByClassName()

Si vous souhaitez rechercher tous les éléments HTML avec le même nom de classe, utilisez cette méthode :

document.getElementsByClassName("intro");

L'exemple ci-dessus renvoie une liste de tous les éléments contenant class="intro":

Remarque : getElementsByClassName() ne fonctionne pas dans Internet Explorer 5,6,7,8.