Scribd
Importer
20 vues11 pages

Navigation HTML DOM JavaScript

Transféré par

Gil
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
20 vues11 pages

Navigation HTML DOM JavaScript

Transféré par

Gil
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 11

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 .

Vous aimerez peut-être aussi