Python Tutorial

Navigation JavaScript dans le DOM

Bernard Drouin24 de avril de 2023

3 minutes de lecture

Avec le DOM HTML, vous pouvez naviguer dans l’arborescence des nœuds à l’aide des relations entre les nœuds.

Nœuds DOM

Selon la norme W3C HTML DOM, tout 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 sont 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 de nœud

Les nœuds de l’arborescence des nœuds ont une relation hiérarchique les uns avec les autres.

Les termes parent, enfant et frère sont utilisés pour décrire les relations.

Dans une arborescence de nœuds, le nœud supérieur est appelé la 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 fils
Les frères et sœurs (frères ou sœurs) sont des nœuds avec le même parent

Tutoriel DOM

Leçon 1 sur DOM

Bonjour le monde !

À 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 Lesson one »
<p> a un enfant: « Hello world! »
<h1> et <p> sont frères et sœurs

Naviguer 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:

Tutoriel DOM

Le nœud d’élément
<title> (dans l’exemple ci-dessus) fait pas contenir du texte.

Il contient un nœud de texte avec la valeur « Tutoriel DOM ».

La valeur du nœud de texte est accessible par le nœud
innerHTML propriété:

monTitre = document.getElementById(« démo »).innerHTML ;

L’accès à la propriété innerHTML est identique à l’accès à la propriété nodeValue
du premier enfant :

myTitle = document.getElementById(« demo »).firstChild.nodeValue ;

L’accès au premier enfant peut aussi se faire comme ceci :

monTitre = document.getElementById(« demo »).childNodes[0].nodeValue ;

Tous les (3) exemples suivants récupèrent le texte d’un <h1> élément et le copie dans un <p> élément:

Exemple

Ma première page

Essayez-le vous-même »

Exemple

Ma première page

Essayez-le vous-même »

Exemple

Ma première page

Bonjour !

Essayez-le vous-même »

InnerHTML

Dans ce tutoriel, nous utilisons la propriété innerHTML pour récupérer le contenu d’un élément HTML.

Cependant, apprendre les autres méthodes ci-dessus est utile pour comprendre l’arborescence et la navigation du DOM.

Nœuds racine DOM

Deux propriétés spéciales permettent d’accéder au document complet :

document.body – Le corps du document
document.documentElement – Le dossier complet

Exemple

HTMLDOM JavaScript

Affichage de document.body

Essayez-le vous-même »

Exemple

HTMLDOM JavaScript

Affichage de document.documentElement

Essayez-le vous-même »

La propriété nodeName

Le nodeName La proprié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

Ma première page

Essayez-le vous-même »

Note: nodeName contient toujours le nom de balise en majuscule d’un élément HTML.

La propriété nodeValue

Le nodeValue La propriété spécifie la valeur d’un nœud.

nodeValue pour les nœuds d’élément est null
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

Le nodeType propriété est en lecture seule. Il renvoie le type d’un nœud.

Exemple

Ma première page

Essayez-le vous-même »

Les propriétés nodeType les plus importantes sont :

Nœud	Taper	Exemple
ELEMENT_NODE	1	Infodewi
ATTRIBUT_NODE	2	class = « titre » (obsolète)
TEXT_NODE	3	Infodewi
COMMENT_NODE	8
DOCUMENT_NODE	9	Le document HTML lui-même (le parent de )
DOCUMENT_TYPE_NODE	dix

Le type 2 est obsolète dans le DOM HTML (mais fonctionne). Il n’est pas obsolète dans le DOM XML.

#Navigation #JavaScript #dans #DOM

Nœuds DOM

Relations de nœud

Leçon 1 sur DOM

Naviguer entre les nœuds

Nœuds enfants et valeurs de nœud

Exemple:

Exemple

Ma première page

Exemple

Ma première page

Exemple

Ma première page

InnerHTML

Nœuds racine DOM

Exemple

HTMLDOM JavaScript

Exemple

HTMLDOM JavaScript

La propriété nodeName

Exemple

La propriété nodeValue

La propriété nodeType

Exemple

Infodewi

Bernard Drouin

Articles similaires

JavaScript sinon sinon si

Python MongoDB Créer une collection

Centiles d’apprentissage automatique Python

Fermetures de fonctions JavaScript