Est-ce qu'il existe des outils (librairies, fonctions déjà faites ou autres) pour parcourir le DOM ?

**Beginner.** · 17/05/2015, 00h59

Salut,

Est-ce qu'il existe des outils (librairies, fonctions déjà faites...) pour parcourir le DOM ?

Merci.

**sekaijin** · 17/05/2015, 13h21

L'API DOM de javascript est là pour ça
http://www.w3.org/TR/DOM-Level-2-Cor...t-binding.html
http://www.w3.org/TR/DOM-Level-2-Cor....html#contents
http://www.w3schools.com/jsref/
http://www.w3schools.com/js/js_htmldom.asp

ensuite TOUS les framework propose une surcouche
C'est le B.A.BA. du DEV javascript côté client.

A+JYT

**ABCIWEB** · 17/05/2015, 19h10

Salut,

La librairie la plus utilisée actuellement est jquery.

**Beginner.** · 18/05/2015, 00h14

Merci et + 1 à vous deux.

Je viens de voir ça aussi : http://www.w3.org/TR/DOM-Level-2-Tra...ange/traversal

Et aussi qu'on a une librairie pour Java : http://www.w3.org/TR/DOM-Level-2-Core/java-binding.html... Justement je voulais le faire en Java à la base...

Mais il y a une chose que je n'ai pas encore bien comprise :

Si je veux afficher le DOM d'une page html sous la forme d'un arbre, en JavaScript j'aurais un résultat différent selon le navigateur utilisé ? J'ai du mal à comprendre ça car à la base on a le même source code de la page html. Par contre si j'utilise Jquery j'aurais la même chose quelque soit le navigateur ou pas ?

Si je prend le source code d'une page html et que j'affiche en Java son DOM sous la forme d'un arbre, j'aurais encore un résultat différent ?

Merci en espérant avoir été clair...

Sujet en relation avec ce fil :
Comment afficher l'arbre du Dom d'une page html ?

**sekaijin** · 18/05/2015, 16h36

le résultat de l'affichage d'un arbre ne dépend que de l'implémentation que tu à choisis pour afficher l'arbre

et cela quelle que soit la technique utilisée.

si tu l'affiche dans un navigateur tu va devoir utiliser des images des DIV et autres éléments HTML.
La norme te garantie que ces élément seront correctement rendu par le navigateur. elle ne garantie pas comment.

Si tu utilise un navigateur sur un écran texte (genre shell ou dos) tu n'as pas de fenêtre pas d'image pas de dessin juste du texte.
il est évident que le rendu sera différent de celui de chrome firefox safari ou IE.
de même si tu utilise un navigateur purement vocal pour aveugle.

Il est donc normal que chaque navigateur interprète à sa façon le source HTML. la norme garantie certaines choses l reste est à la discrétion de ceux qui font les navigateur.

en java tu as plusieurs API graphique et suivant celle que tu utilise l'affichage d'un simple bouton diffère.
C'est pareil pour le HTML.

A+JYT

**Beginner.** · 19/05/2015, 23h17

Merci.

Mais quelque chose doit encore m’échapper...

Si le chemin d'un élément est différent d'un navigateur à l'autre alors on ne peut pas utiliser ce chemin pour y accéder, on est alors obligé de lui donné un identifiant ?

Supposons que j'ai ce source code

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
 
<head>...</head>
 
<body>
    <p>Un premier paragraphe...</p>
    <p>Un second paragraphe...</p>
    <h1>Un h1...</h1>
    <p>Un troisième paragraphe...</p>
    <h2>Un h2...</h2>
    <h3>Un h3...</h3>
</body>
</html>

On ne peut pas par exemple accéder au troisième paragraphe avec un chemin du genre : ...html\body\ChildNode[3] où ChildNode[3] désignerait le quatrième enfant de l’élément body ? Bon c'est vrai que j'ai remarqué que certains navigateurs tiennent compte des sauts de lignes, espaces... qu'il y a entre chaque élément ce qui fausse tout !

Mais est-ce qu'au moins l'ordre des éléments (balises) est respecté par tous les navigateurs ? C'est-à-dire qu'on n'aura pas par exemple le second paragraphe avant le premier... ?

- Je me demande aussi si des chemins du type ...html\body\P[2] où P[2] désignerait le troisième paragraphe existaient ? Mais même là pour que ça marche il faudrait qu'au moins l'ordre des éléments (balises) soit respecté par tous les navigateurs...

Je ne dois pas être le premier à m'être posé la question quand même ?

Enfin ce n'est pas grave je vais continuer à chercher...

**Beginner.** · 20/05/2015, 01h07

Ah mais je viens de voir une possible solution, sous firefox j'obtiens :

Nom : DOM Propriètés.PNG
Affichages : 141
Taille : 17,7 Ko

Donc plutôt que d'utiliser childNodes on peut utiliser children :

document.body.children[3].style.backgroundColor = 'red';

Ce qui est équivalent à :

document.body.childNodes[7].style.backgroundColor = 'red';

Bon reste à savoir si ça marche avec tous les navigateurs...

**SpaceFrog** · 20/05/2015, 08h51

L'interprétation des noeuds du DOM peut en effet varier selon le navigateur ...

voir:
http://javascript.developpez.com/faq...M#DOMIEFirefox
http://javascript.developpez.com/tut...n/?page=page_5

**Bovino** · 20/05/2015, 09h53

Envoyé par ABCIWEB

La librairie la plus utilisée actuellement est jquery.

En fait, jQuery (ainsi que d'autres) utilise la librairie Sizzle pour parcourir le DOM.

**Beginner.** · 21/05/2015, 01h22

Envoyé par SpaceFrog

L'interprétation des noeuds du DOM peut en effet varier selon le navigateur ...

voir:
http://javascript.developpez.com/faq...M#DOMIEFirefox
http://javascript.developpez.com/tut...n/?page=page_5

Ah merci ! J'ai regardé le premier lien pour l'instant... Et il pointe justement le problème des espaces et des blancs dans le DOM et justement ce problème semble concerner childNodes mais pas children (qui ignore les blancs). Ça nous évite de devoir nettoyer le code et c'est tant mieux car les "blancs" sont utiles pour la lisibilité...

Donc ce serait une solution facile mais la question est : est-ce le seul problème ?

Dans tous les cas cette solution suppose qu'au moins l'ordre des éléments (balises) soit respecté par tous les navigateurs, pour moi ce serait complètement illogique que ce ne soit pas le cas mais j'aurais bien voulu une confirmation...

Envoyé par Bovino

En fait, jQuery (ainsi que d'autres) utilise la librairie Sizzle pour parcourir le DOM.

Merci. J'ai jeté un œil et il semble que ce soit pour le CSS, non ?

**sekaijin** · 21/05/2015, 11h44

Le principal problème vient de l'interprétation du code HTML

l'exemple typique c'est le tbody
logiquement la spec dit que le code html d'un tableau doit être

Code html :

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

<table><tbody><tr><td>

Mais la spec indique que l'absence du tbody n'est pas une erreur.
(mais elle ne précise pas si c'est l'absence du tbody dans le code html ou l'absence de l’élément tbody dans le dom qui n'est pas une erreur)

l'interprétation courante de cette spec donne les implémentations comme celle de FF ou de chrome qui créent le DOMElements correspondants au code html
et donc si le TBody n'est pas dans le code HTML ces navigateur ne créent pas de TBODYElement.

une autre interprétation est que le code html TBody n'est pas obligatoire c'est l'interprétation de IE par exemple
Donc ce navigateur va crée un TBODYElement même s'il n'y a pas le code HTML correspondant.

Enfin aucun navigateur ne respecte l'ordre des éléments.

je sais en disant ça je vais faire bondir certains.
Dans la réalité tous les navigateurs essaient de respecter l'ordre.

Mais les développeurs web ne sont pas tous très rigoureux. tous les moteurs HTML sont donc confronté à un problème.
Que faire si le code source html est incorrect ?
La réponse est unanime
Faire au mieux que l'on peut.

Mais là le mieux diffère grandement d'un navigateur à l'autre.
un petit exemple simple

Code html :

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

1
2
3
4
5
6
7
8
9
10
<table>
  <div>toto</div>
  <tr>
    <h1>test</h1>
    <td>truc</td>
  </tr>
  <tr>
    <td>cela
  </tr>
<table>

On a déjà vu que IE ajoutait un Tbody
mais ni une table ni un tbody ni un tr ne peuvent contenir de div ou de h1
les navigateurs vont donc essayer d'arranger la sauce.
le td qui n'est pas fermé n'est pas un problème la solution consiste à le fermer automatiquement à l’interprétation du </tr>
mais pour le reste ....
on peu obtenir quelque chose qui s'approche de ça

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div>toto</div>
<h1>test</h1>
<table>
  <tr>
    <td>truc</td>
  </tr>
  <tr>
    <td>cela</td>
  </tr>
<table>

ou ça

Code html :

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

1
2
3
4
5
6
7
8
9
10
<table>
  <tr>
    <td>truc</td>
  </tr>
  <tr>
    <td>cela</td>
  </tr>
<table>
<div>toto</div>
<h1>test</h1>

ou autre chose encore.

dans ces cas là aucun navigateur ne respecte l'ordre.

A+JYT

**NoSmoking** · 21/05/2015, 19h59

Bonjour,

Envoyé par sekaijin

Mais les développeurs web ne sont pas tous très rigoureux. tous les moteurs HTML sont donc confronté à un problème.
Que faire si le code source html est incorrect ?
La réponse est unanime
Faire au mieux que l'on peut.

Concernant le TBODY, tous les navigateurs modernes ajoutent le TBODY, entre autres, même si omis.

Code html :

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

1
2
3
4
<table>
  <tr>
    <td>cellule
</table>

donne

Code html :

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

1
2
3
4
5
6
7
<table>
  <tbody>
    <tr>
      <td>cellule</td>
    </tr>
  </tbody>
</table>

au plus grand bonheur de ce qui écrivent du code crade

**Beginner.** · 22/05/2015, 04h14

Merci bien pour l'explication détaillée !

Est-ce qu'il existe des outils (librairies, fonctions déjà faites ou autres) pour parcourir le DOM ?

JavaScript

Discussions similaires

Partager

Partager