H T M L C S S J A V A S C R I P T S Q L P Y T H O N J A V A P H P C O M M E N T W 3 . C S S C C + + C # A M O R C E R R É A G I R M Y S Q L J Q U E R Y E X C E L L E R X M L D J A N G O N U M P Y P A N D A S N O D E J S R .
M A N U S C R I T A N G U L A I R E G I T P o s t g r e S Q L M O N G O D B A S P I C I A A L L E R K O T L I N T O U P E T V U E D S A G É N É R A T I O N I A S C I P Y A W S L A C Y B E R - S É C U R I T É S C I E N C E S D E S D O N N É E S
Navigation HTML DOM JavaScript
❮ PrécédentSuivant ❯
Avec le DOM HTML, vous pouvez parcourir l'arborescence des nœuds à
l'aide des relations entre les nœuds.
Nœuds DOM
Selon la norme HTML DOM du W3C, tout ce qui se trouve dans un document
HTML est un nœud :
Le document entier est un nœud de document
Chaque élément HTML est un nœud d'élément
Le texte à l'intérieur des éléments HTML est des nœuds de texte
Chaque attribut HTML est un nœud d'attribut (obsolète)
Tous les commentaires sont des nœuds de commentaires
Avec le DOM HTML, tous les nœuds de l'arborescence des nœuds sont
accessibles par JavaScript.
De nouveaux nœuds peuvent être créés et tous les nœuds peuvent être
modifiés ou supprimés.
Relations entre nœuds
Les nœuds de l'arborescence des nœuds ont une relation hiérarchique les uns
par rapport aux autres.
Les termes parent, enfant et frère ou sœur sont utilisés pour décrire les
relations.
Dans une arborescence de nœuds, le nœud supérieur est appelé racine
(ou nœud racine).
Chaque nœud a exactement un parent, sauf la racine (qui n'a pas de
parent)
Un nœud peut avoir plusieurs enfants
Les frères et sœurs (frères ou sœurs) sont des nœuds avec le même
parent
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
À partir du HTML ci-dessus, vous pouvez lire :
<html>est le nœud racine
<html>n'a pas de parents
<html>est le parent de <head>et<body>
<head>est le premier enfant de<html>
<body>est le dernier enfant de<html>
et:
<head>a un enfant :<title>
<title>a un enfant (un nœud de texte) : "Tutoriel DOM"
<body>a deux enfants : <h1>et<p>
<h1>a un enfant : "DOM Leçon 1"
<p>a un enfant : "Bonjour tout le monde !"
<h1>et <p>sont frères et sœurs
ADVERTISEMENT
Navigation entre les nœuds
Vous pouvez utiliser les propriétés de nœud suivantes pour naviguer entre
les nœuds avec JavaScript :
parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling
Nœuds enfants et valeurs de nœud
Une erreur courante dans le traitement DOM est de s'attendre à ce qu'un
nœud d'élément contienne du texte.
Exemple:
<title id="demo">DOM Tutorial</title>
Le nœud d'élément <title>(dans l'exemple ci-dessus) ne contient pas de texte.
Il contient un nœud de texte avec la valeur "DOM Tutorial".
La valeur du nœud texte est accessible par la innerHTMLpropriété du nœud :
myTitle = document.getElementById("demo").innerHTML;
Accéder à la propriété innerHTML revient à accéder à celle nodeValue du
premier enfant :
myTitle = document.getElementById("demo").firstChild.nodeValue;
Accéder au premier enfant peut également se faire comme ceci :
myTitle = document.getElementById("demo").childNodes[0].nodeValue;
Tous les (3) exemples suivants récupèrent le texte d'un <h1>élément et le
copient dans un <p>élément :
Exemple
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").innerHTML;
</script>
</body>
</html>
Essayez-le vous-même »
Exemple
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
Essayez-le vous-même »
Exemple
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
Essayez-le vous-même »
HTML intérieur
Dans ce tutoriel, nous utilisons la propriété innerHTML pour récupérer le
contenu d'un élément HTML.
Cependant, l’apprentissage des autres méthodes ci-dessus est utile pour
comprendre l’arborescence et la navigation du DOM.
Nœuds racine DOM
Il existe deux propriétés spéciales qui permettent d'accéder au document
complet :
document.body- Le corps du document
document.documentElement- Le document complet
Exemple
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>
</body>
</html>
Essayez-le vous-même »
Exemple
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>
</body>
</html>
Essayez-le vous-même »
La propriété nodeName
La nodeNamepropriété spécifie le nom d'un nœud.
nodeName est en lecture seule
nodeName d'un nœud d'élément est le même que le nom de la balise
nodeName d'un nœud d'attribut est le nom de l'attribut
nodeName d'un nœud de texte est toujours #text
nodeName du nœud de document est toujours #document
Exemple
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
Essayez-le vous-même »
Remarque : nodeName contient toujours le nom de la balise en majuscule d'un
élément HTML.
La propriété nodeValue
La nodeValuepropriété spécifie la valeur d'un nœud.
nodeValue pour les nœuds d'élément estnull
nodeValue pour les nœuds de texte est le texte lui-même
nodeValue pour les nœuds d'attribut est la valeur de l'attribut
La propriété nodeType
La nodeTypepropriété est en lecture seule. Il renvoie le type d'un nœud.
Exemple
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
Essayez-le vous-même »
Les propriétés nodeType les plus importantes sont :
Node Type Example
ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE 2 class = "heading" (deprecated)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!-- This is a comment -->
DOCUMENT_NODE 9 The HTML document itself (the parent of
<html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>
Le type 2 est obsolète dans le DOM HTML (mais fonctionne). Il n'est pas
obsolète dans le DOM XML.
❮ PrécédentSuivant ❯
PUBLICITÉ
PIPETTE À COULEURS
PUBLICITÉ
LES ESPACES
MISE À NIVEAU
SANS PUBLICITÉ
BULLETIN
OBTENIR UNE CERTIFICATION
CONTACTEZ-NOUS
Meilleurs tutoriels
Tutoriel HTML Tutoriel
CSS Tutoriel
JavaScript Tutoriel
Comment faire Tutoriel
SQL Tutoriel
Python Tutoriel
W3.CSS Tutoriel
Bootstrap Tutoriel
PHP Tutoriel
Java Tutoriel
C++ Tutoriel
jQuery
Principales références
Référence HTML
Référence CSS Référence
JavaScript Référence
SQL Référence
Python Référence
W3.CSS Référence
Bootstrap Référence
PHP
Couleurs HTML
Référence Java Référence
Angular Référence
jQuery
Meilleurs exemples
Exemples HTML Exemples
CSS Exemples
JavaScript Exemples
pratiques Exemples
SQL
Exemples Python Exemples
W3.CSS Exemples
d'amorçage Exemples
PHP Exemples
Java Exemples
XML Exemples
jQuery
Obtenir une certification
Certificat HTML Certificat
CSS Certificat
JavaScript Certificat
Front End Certificat
SQL Certificat
Python Certificat
PHP Certificat
jQuery Certificat
Java Certificat
C++ Certificat
C# Certificat
XML
FORUM SUR LA SALLE DE CLASSE
W3Schools est optimisé pour l'apprentissage et la formation. Les exemples pourraient être
simplifiés pour améliorer la lecture et l’apprentissage. Les didacticiels, références et exemples sont
constamment révisés pour éviter les erreurs, mais nous ne pouvons garantir l'exactitude totale de
tout le contenu. En utilisant W3Schools, vous acceptez d'avoir lu et accepté nos conditions
d'utilisation , nos cookies et notre politique de confidentialité .
Copyright 1999-2024 par Refsnes Data. Tous droits réservés. W3Schools est propulsé par
W3.CSS .
