Parcourir l'élément document.body

**lockmanz** · 20/10/2018, 08h38

Bonjour,

Voilà après plusieurs tentative il m'est impossible de parcourir mon document.body en utilisant seulement les fonctions firstChild et nextSibling.
J'obtient des valeurs null.
Dans mon cas je veux accéder à h1 via ces deux fonctions pour passer le titre en majuscule.

Voici mes codes et un schéma :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//3
 
function nodeMajuscule(noeud) { 
	noeud.innerHTML=noeud.innerHTML.toUpperCase();
}
 
function passer_en_majuscule_h1() {
	var body = document.body;
	var n=body.firstChild.firstChild;
	nodeMajuscule(noeud);
}
 
 
window.onload=function() { affiche_titre(); modfier_titre(); passer_en_majuscule_h1(); } 
//window.onload=lancement(); ceci ne fonctionne pas

le code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Document Object Model</title>
	<script src="scripts.js"></script>
</head>
<body>
    <div>
        <h1 id="titre1">Document Object Model</h1>
        <p>Le Document Object Model (ou DOM1,2) est un standard du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents HTML3 et XML4. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu'il sera présenté.</p>
        <hr>
        <h2>Sommaire</h2>
        <h3><a href="#1">1 Évolution du DOM au sein des navigateurs web</a></h3>
        <ul>
            <li><a href="#2">1.1 DOM 1</a></li>
            <li><a href="#3">1.2 DOM 2</a></li>
            <li><a href="#4">1.3 DOM 3 et 4</a></li>
        </ul>
        <h3><a href="#5">2 Aspects techniques</a></h3>
        <h3>3 Événements</h3>
        <h3>4 Notes et Références</h3>
        <h3>5 Liens externes</h3>
        <hr>
        <h2 id="1">Évolution du DOM au sein des navigateurs web</h2>
        <p>Avant sa standardisation par le W3C, chaque navigateur web disposait de son propre Document Object Model. Si le langage de base destiné à manipuler les documents web a vite été standardisé autour de JavaScript, il n'en a pas été de même pour la série précise de fonctions à utiliser et la manière de parcourir le document. Par exemple, lorsque Netscape Navigator préconisait de parcourir un tableau indexé nommé document.layers[], Internet Explorer l'appelait plutôt document.all[], et ainsi de suite. En pratique, cela obligeait à écrire (au moins) deux versions de chaque morceau de script si l'on voulait rendre son site accessible au plus grand nombre.</p>
        <p></p>
        <p>La standardisation de ces techniques s'est faite en plusieurs étapes, lesquelles étendent chaque fois les possibilités précédentes sans jamais les remettre en cause.</p>
        <p id="2"><b>DOM 1</b></p>
        <p>La première est le DOM Level 1 publié en 1998 (le niveau 0 étant considéré comme l'implémentation de base figurant dans Netscape Navigator 2.0), où le W3C a défini une manière précise de représenter un document (en particulier un document XML) sous la forme d'un arbre. Chaque élément généré à partir du balisage comme, dans le cas de HTML, un paragraphe, un titre ou un bouton de formulaire, y forme un nœud. Est également définie une série de fonctions permettant de se déplacer dans cet arbre, d'y ajouter, modifier ou supprimer des éléments. En plus des fonctions génériques applicables à tout document structuré, des fonctions particulières ont été définies pour les documents HTML, permettant par exemple la gestion des formulaires. Le DOM Level 1 a été disponible dans sa plus grande partie dès les premières versions d'Internet Explorer 5 et de Netscape 6.</p>
        <p></p>
        <p id="3"><b>DOM 2</b></p>
        <p>La seconde étape est le DOM Level 2 (publié en 2000), à présent constitué de six parties (en plus de Core et HTML, on trouvera Events, Style, View et Traversal and Range). Dans les évolutions de la brique de base (Core), on notera la possibilité d'identifier plus rapidement un nœud ou un groupe de nœuds au sein du document. Ainsi, pour obtenir un élément particulier on ne le recherchera plus dans un tableau comme dans les DOM propriétaires précédents, mais on appellera la fonction getElementById().</p>
        <p></p>
        <p id="4"><b>DOM 3 et 4</b></p>
        <p>Le troisième niveau, publié au printemps 20045, a ajouté le support de XPath, la gestion d'événements clavier, et une interface de sérialisation de documents XML. Le quatrième niveau est en cours de développement, le Last Call Working Draft ayant été diffusé en février 20146.</p>
        <p></p>
        <p></p>
        <p id="5"><b>Aspects techniques</b></p>
        <p>DOM permet de construire une arborescence de la structure d'un document et de ses éléments. Il est donc préférable de parcourir et de mémoriser l'intégralité du document avant de pouvoir effectuer les traitements voulus. Pour cette raison, les programmes utilisant DOM ont souvent une empreinte mémoire volumineuse en cours de traitement. À l'inverse, à partir d'un arbre DOM donné, il est possible de générer des documents dans le langage de balisage voulu, qui pourront à leur tour être manipulés par l'interface DOM.</p>
        <p></p>
        <p>DOM est utilisé pour pouvoir modifier facilement des documents XML ou accéder au contenu des pages web. Dans les cas ne nécessitant pas de manipuler les documents XML, mais juste de les lire, la méthode SAX peut également être choisie car elle traite les éléments de façon successive sans charger le document en mémoire. Elle s'impose quand la taille du document excède la capacité de la mémoire.</p>
        <p></p>
        <p>Source du texte :</p>
        <p></p>
        <p><a href="https://fr.wikipedia.org/wiki/Document_Object_Model">https://fr.wikipedia.org/wiki/Document_Object_Model</a></p>
    </div>
</body>
</html>

et un schéma :

Nom : ARBRE_TP5.png
Affichages : 994
Taille : 23,0 Ko

Merci.

**NoSmoking** · 20/10/2018, 09h28

Bonjour,
tu devrais t'intéresser à l'objet TreeWalker ou pour cibler plus précisément des éléments aux méthodes document.querySelector, document.querySelectorAll().

**tsuji** · 20/10/2018, 14h01

... en utilisant seulement les fonctions firstChild et nextSibling

Ce peut servir à bien apprendre la structure au sens de DOM, mais le code dans ces cas devient bien fragile et ne résiste aucunement des petits changements qui touche précisément la structure DOM. Voilà, vous êtes bien prévu.

Ceci est comment lire la structure à partir de body.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function passer_en_majuscule_h1() {
	var body = document.body;
	//var n=body.firstChild.firstChild;
	var n=body.firstChild.nextSibling.firstChild.nextSibling;
	//nodeMajuscule(noeud);    //qu'est nooed sinon n
	nodeMajuscule(n);
}

Le premier firstChild est pointé à un noeud de type #TEXT (même si il ne contient que des espace blancs. Le premier nextSibling est pointé par conséquence l'élement div... ainsi de suite.

**javatwister** · 22/10/2018, 09h53

Bonjour lockmanz,

revois ta gestion des noeuds...

(objet Node + props et méthodes)

**SpaceFrog** · 22/10/2018, 11h22

Attention au nextSibling selon les navigateurs qui interprètent parfois le retour ligne comme un sibling ...

Compresse ton html en supprimant tous les retours lignes après les balises fermantes et teste à nouveau ...

**tsuji** · 22/10/2018, 14h25

Attention au nextSibling selon les navigateurs qui interprètent parfois le retour ligne comme un sibling ...

Aussi aberrant que ça ? Pour moi, jamais entendu parler.

**Showie** · 22/10/2018, 15h41

Si l'idée que tu as est de parcourir le DOM à la recherche d'une balise h1 voici une proposition :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function passer_en_majuscule_h1() {
  var body = document.body;
  var el = body.firstChild; // on prend le premier element
  big_loop:
  while (el) {
    if (Node.ELEMENT_NODE == el.nodeType){ //si l'element courant est un container on cherche dedans
    	var sub_el = el.firstChild; // premier sous element
      while(sub_el){
      	if ('H1' == sub_el.nodeName){ // si H1 on le stock et on sort de la grosse boucle
        	var n = sub_el;
                break big_loop;
        }
        sub_el = sub_el.nextSibling; //on passe au suivant sous enfant
      }
    }
    el = el.nextSibling; //on passe au suivant element
  }
 
nodeMajuscule(n);
}

Pour répondre à toutes les structures/profondeur de DOM, il faudrait construire un appel récursif.

**SpaceFrog** · 22/10/2018, 16h41

aberrant mais teste ça ...

https://jsfiddle.net/5w6zg9mv/3/

**tsuji** · 22/10/2018, 17h08

Le demo mentionné (https://jsfiddle.net/5w6zg9mv/3/) est ceci:

code body

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="div1">
<ul>
 <li>one</li>
 <li>two</li>
</ul>
</div>
 
<div id="div2"><ul><li>one</li><li>two</li></ul></div>

code javascript

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
for(i=1; i<3; i++){
parentObj=document.getElementById('div'+i);
ObjFirst= parentObj.firstChild;
console.log ( "premier enfant de div"+i+": "+ ObjFirst.nodeName+ "\n de type "+ObjFirst.nodeType);
 
}

Le console montre

Code text :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
premier enfant de div1: #text
 de type 3  show:33:1
premier enfant de div2: UL
 de type 1

Ce qui est tout à fait ce qu'on attend, non ?

**javatwister** · 22/10/2018, 18h16

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function search(it){
	for(var i=0;i<it.length;i++){
		if(it[i].nodeType==1){
			if(it[i].firstChild==it[i].lastChild){
				it[i].innerHTML=it[i].innerHTML.toUpperCase();
			};
			search(it[i].childNodes);
			break
		}
	}
}
 
search(document.body.childNodes)

**NoSmoking** · 22/10/2018, 18h24

Envoyé par tsuji

Ce qui est tout à fait ce qu'on attend, non ?

pas forcément, c'est ce que l'on obtient mais cela montre que cela dépend de la façon dont le code est écrit comme tu l'as d'ailleurs approché dans un de tes messages.

Cela tire dans tous les sens,

, mais on attend que lockmanz nous précise ce qu'il souhaite réellement mettre en oeuvre si c'est pour un exercice ou non !

On peut également le faire en CSS.

**tsuji** · 22/10/2018, 18h42

Citation Envoyé par tsuji

Ce qui est tout à fait ce qu'on attend, non ?

pas forcément, c'est ce que l'on obtient mais cela montre que cela dépend de la façon dont le code est écrit comme tu l'as d'ailleurs approché dans un de tes messages.

Pas vraiment. Je suis cohérent. Mais bon, je passe pour ne pas embarrasser personne.

**NoSmoking** · 22/10/2018, 18h54

Non non tu es cohérent si j'ai bien lu

Tu as écrit :

mais le code dans ces cas devient bien fragile et ne résiste aucunement des petits changements ...

et cela dépend effectivement bien de la façon d'écrire le code.

Je pense que SpaceFrog n'apportait simplement qu'un argument de plus.

D'ailleurs, dans le cas présent, comme on cherche une élément balisé, je dirais qu'il est préférable d'utiliser firstElementChild et nextElementSibling.

**tsuji** · 22/10/2018, 19h07

...mais le code dans ces cas devient bien fragile et ne résiste aucunement des petits changements qui touche précisément la structure DOM.

L'important c'est des petits changements qui touche précisément la structure DOM.

Si comme l'exemple utilisé par l'op et modifié la façon suivante

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<body>
    <div>
 
 
 
        <h1 id="titre1">Document Object Model</h1>

C'est que le petit changement ne touche pas las structure DOM.

Si c'est comme ça

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<body><div>
        <h1 id="titre1">Document Object Model</h1>

c'est que le petit changement touche précisément les structure DOM.

C'est dans ce sens que je parle. Et d'ailleurs, firstChild et nextSibling sont toujours bien réalisés d'après les w3c recommendations, pas toujours nextElementSibling ou d'autres.

**lockmanz** · 22/10/2018, 20h33

Envoyé par NoSmoking

pas forcément, c'est ce que l'on obtient mais cela montre que cela dépend de la façon dont le code est écrit comme tu l'as d'ailleurs approché dans un de tes messages.

Cela tire dans tous les sens,

, mais on attend que lockmanz nous précise ce qu'il souhaite réellement mettre en oeuvre si c'est pour un exercice ou non !

On peut également le faire en CSS.

Dans mon cas il s'agit de parcourir le DOM du document html via les différentes fonctions parentNode, childNode, firstChild, nextSilbing afin d'accéder au noeud du titre h1 pour modifier le contenu.

Je vous remercie tous pour votre aide.

**SpaceFrog** · 23/10/2018, 08h14

Il suffit alors de boucler sur le nextSibling et vérifier le nodeName.

**lockmanz** · 23/10/2018, 08h38

Merci pour votre réponse après test j'obtient ceci :

Nom : Capture.PNG
Affichages : 857
Taille : 49,6 Ko

Je ne comprend pas ? il me renvoi null alors que le nextSibling de body est head.

Voici le lien pour tester le code : http://playcode.io/testloc

Merci.

**SpaceFrog** · 23/10/2018, 08h56

alors que le nextSibling de body est head.

tu es sûr ???

nextSibling veut dire membre suivant de même niveau

la balise body n'a pas de balise de même niveau suivante ...
le head précède le body ...

**javatwister** · 23/10/2018, 09h38

typeof renseigne sur des objets JS pas sur des balises HTML;

depuis le début, je me demande tout de même ce que tu veux...

**lockmanz** · 23/10/2018, 10h02

Effectivement, je viens de m'en rendre compte j'ai oublié de remplacer typeof par nodeName.
Mon but est de parcourir le DOM javascript via les fonctions firstChild et nextSibling ce que je ne comprend pas c'est qu'il renvoie null avec cette exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="fr">
<head>	
    <script src="scripts.js"></script>
    <title>Document Object Model</title>
</head>
<body>
	<div>
		<h1 id="titre1">Document Object Model</h1>
		<p>Le Document Object Model (ou DOM1,2) est un standard du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents HTML3 et XML4. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu'il sera présenté.</p>
		<hr>
		<h2>Sommaire</h2>
		<h3><a href="#1">1 Évolution du DOM au sein des navigateurs web</a></h3>
		<ul>
			<li><a href="#2">1.1 DOM 1</a></li>
			<li><a href="#3">1.2 DOM 2</a></li>
			<li><a href="#4">1.3 DOM 3 et 4</a></li>
		</ul>
		<h3><a href="#5">2 Aspects techniques</a></h3>
		<h3>3 Événements</h3>
		<h3>4 Notes et Références</h3>
		<h3>5 Liens externes</h3>
		<hr>
		<h2 id="1">Évolution du DOM au sein des navigateurs web</h2>
		<p>Avant sa standardisation par le W3C, chaque navigateur web disposait de son propre Document Object Model. Si le langage de base destiné à manipuler les documents web a vite été standardisé autour de JavaScript, il n'en a pas été de même pour la série précise de fonctions à utiliser et la manière de parcourir le document. Par exemple, lorsque Netscape Navigator préconisait de parcourir un tableau indexé nommé document.layers[], Internet Explorer l'appelait plutôt document.all[], et ainsi de suite. En pratique, cela obligeait à écrire (au moins) deux versions de chaque morceau de script si l'on voulait rendre son site accessible au plus grand nombre.</p>
		<p></p>
		<p>La standardisation de ces techniques s'est faite en plusieurs étapes, lesquelles étendent chaque fois les possibilités précédentes sans jamais les remettre en cause.</p>
		<p id="2"><b>DOM 1</b></p>
		<p>La première est le DOM Level 1 publié en 1998 (le niveau 0 étant considéré comme l'implémentation de base figurant dans Netscape Navigator 2.0), où le W3C a défini une manière précise de représenter un document (en particulier un document XML) sous la forme d'un arbre. Chaque élément généré à partir du balisage comme, dans le cas de HTML, un paragraphe, un titre ou un bouton de formulaire, y forme un nœud. Est également définie une série de fonctions permettant de se déplacer dans cet arbre, d'y ajouter, modifier ou supprimer des éléments. En plus des fonctions génériques applicables à tout document structuré, des fonctions particulières ont été définies pour les documents HTML, permettant par exemple la gestion des formulaires. Le DOM Level 1 a été disponible dans sa plus grande partie dès les premières versions d'Internet Explorer 5 et de Netscape 6.</p>
		<p></p>
		<p id="3"><b>DOM 2</b></p>
		<p>La seconde étape est le DOM Level 2 (publié en 2000), à présent constitué de six parties (en plus de Core et HTML, on trouvera Events, Style, View et Traversal and Range). Dans les évolutions de la brique de base (Core), on notera la possibilité d'identifier plus rapidement un nœud ou un groupe de nœuds au sein du document. Ainsi, pour obtenir un élément particulier on ne le recherchera plus dans un tableau comme dans les DOM propriétaires précédents, mais on appellera la fonction getElementById().</p>
		<p></p>
		<p id="4"><b>DOM 3 et 4</b></p>
		<p>Le troisième niveau, publié au printemps 20045, a ajouté le support de XPath, la gestion d'événements clavier, et une interface de sérialisation de documents XML. Le quatrième niveau est en cours de développement, le Last Call Working Draft ayant été diffusé en février 20146.</p>
		<p></p>
		<p></p>
		<p id="5"><b>Aspects techniques</b></p>
		<p>DOM permet de construire une arborescence de la structure d'un document et de ses éléments. Il est donc préférable de parcourir et de mémoriser l'intégralité du document avant de pouvoir effectuer les traitements voulus. Pour cette raison, les programmes utilisant DOM ont souvent une empreinte mémoire volumineuse en cours de traitement. À l'inverse, à partir d'un arbre DOM donné, il est possible de générer des documents dans le langage de balisage voulu, qui pourront à leur tour être manipulés par l'interface DOM.</p>
		<p></p>
		<p>DOM est utilisé pour pouvoir modifier facilement des documents XML ou accéder au contenu des pages web. Dans les cas ne nécessitant pas de manipuler les documents XML, mais juste de les lire, la méthode SAX peut également être choisie car elle traite les éléments de façon successive sans charger le document en mémoire. Elle s'impose quand la taille du document excède la capacité de la mémoire.</p>
		<p></p>
		<p>Source du texte :</p>
		<p></p>
		<p><a href="https://fr.wikipedia.org/wiki/Document_Object_Model">https://fr.wikipedia.org/wiki/Document_Object_Model</a></p>
	</div>
</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function affiche_sibling() {
	var body = document.body;
	console.log(body.nextSibling.nodeName);
}
 
window.onload=function() { affiche_sibling();  }

pour tester ma fonction voici le lien complet d'un compilateur en ligne : https://playcode.io/138589?tabs=cons...ex.html&output

Parcourir l'élément document.body

JavaScript

Discussions similaires

Partager

Partager