11496 sujets

JavaScript, DOM et API Web HTML5

Sais-tu ce qu'est le DOM ?





Question existencielle : qu'est-ce que le DOM?

Bonjour,

Trouvez-vous comme moi que l'évolution des nouvelles technologies est très rapide (parfois trop), que c'est passionnant mais qu'il ne suffit pas d'être UN pour pouvoir tout suivre et tout connaître ?

Bref, c'est grâce à cette accroche que je me permet de poster mon premier POST en tant que membre à part entière de ce forum depuis quelques minutes. Rassurez-vous, je connais alsacréations ainsi que ses beaux tutoriaux et sa riche communauté d'un oeil externe et avisé pas uniquement depuis mon inscription à ce forum mais depuis quelques années Smiley smile (non je ne me suis pas permis de passer à côté de ce luxe) .

Je voulais savoir si vous pouviez m'aider à trouver une définition du DOM accessible pour une personne qui comme moi n'a pas de prétention sur son niveau de connaissance concernant la programmation informatique de langages de hauts niveaux et qui se pose souvent des questions de ce type ?

J'ai déjà lu plusieurs définition mais aucune ne me convient dans le sens ou aucune me permet de comprendre. Faut-il voir ça comme une API qui traite un document (tout langage confondu) et en retourne un schéma de construction (modèle) ensuite traité par un langage de programmation qui peut agir sur le dit document en fonction du modèle retourné?

Comme vous pouvez le constater, je n'ai pas bien saisi cette notion.

Merci de jeter un coup d'oeil à ce TOPIC, et à bientôt sans doute.
Salut jb_gfx,

Tout d'abord, merci d'avoir pris le temps de lire ce POST et de répondre à cette question.

Ta réponse ne me permet malheureusement pas d'avancer (car je suis tombé dessus également) mais cependant elle me permet de me corriger :

a écrit :
J'ai déjà lu plusieurs définition mais aucune ne me convient
, sur notre ami Wikipédia y compris !

Je pense que le plus simple n'est pas que je cite tous les sites où j'ai pu lire une explication du DOM (souvent plus définition qu'explication d'ailleurs) mais de partir sur la synthèse que j'ai formulé dans le POST :
a écrit :
Faut-il voir ça comme une API qui traite un document (tout langage confondu) et en retourne un schéma de construction (modèle) ensuite traité par un langage de programmation qui peut agir sur le dit document en fonction du modèle retourné?


Merci encore jb_gfx, bonne journée !
Bonjour,

Le nom est explicite.

C'est la modélisation d'un document au travers d'objets classés hiérarchiquement.
bzh a écrit :

La définition d'open web me paraît assez compréhensible.

+1 pour ça.

Une autre manière d'expliquer le DOM serait de partir du code HTML.
Lorsque le navigateur reçoit le code HTML d'une page, il va décortiquer («parser») ce code, pour essayer de construire un arbre logique:
- la racine est l'élément HTML,
- cet élément a deux enfants, HEAD et BODY,
- ces éléments ont eux-mêmes des enfants,
- etc.

On a l'habitude cette structure en arbre car c'est bien sûr celle qu'il faut respecter pour écrire un code HTML correct, et parce qu'on a l'habitude d'indenter le code HTML pour illustrer cette structure. Mais dans l'absolu on peut écrire <html><head>...</head><body>...</body></html>, car le navigateur n'a pas besoin de l'indentation pour reconstruire l'arbre du document, il a juste besoin des balises. Petite subtilité: si le code HTML comporte des erreurs, par exemple une balise </div> manquante, le navigateur va essayer de les corriger pour produire un arbre du document cohérent... qui pourra être ce qu'on souhaitait, ou différent (un élément peut se retrouver sur la mauvaise branche...).

Donc le navigateur reçoit un gros morceau de texte (le code HTML), et il l'analyse pour construire un arbre du document. Cet arbre du document, on l'appelle parfois «le DOM», mais il me semble qu'il vaut mieux parler de «représentation DOM du document». Cette représentation du document, c'est une partie du DOM.

Il faut bien comprendre que lorsque le navigateur affiche une page web, il se sert de cette représentation du document, pas directement du code HTML. Donc si on veut changer des choses dans la page, on ne change pas le code HTML, on change des éléments du DOM.

Les autres parties du DOM, ce sont:
- Les méthodes (ou «fonctions», si on a plus l'habitude de ce terme) qui permettent de manipuler la représentation DOM du document. Elles permettent de rajouter un élément, d'en supprimer un, de modifier les attributs et le contenu des éléments, etc.
- Les évènements (des «signaux» qui sont envoyés suite à une action du navigateur ou de l'utilisateur, par exemple suite à un clic), que l'on peut «écouter» afin de déclencher une action ou exécuter du code à un moment précis ou suite à une action précise.
- Et d'autres choses encore, des propriétés («variables») ou méthodes qui permettent de lire ou modifier les styles d'un élément, de lancer ou stopper une vidéo, etc.

Lister toutes les parties du DOM est compliqué car il y a eu plusieurs versions successives, des spécifications «de base» (qui définissent un modèle qui peut s'appliquer à HTML, à XML, mais aussi en théorie à d'autres langages), des choses spécifiques à (X)HTML, des modules spécifiques pour l'accès aux styles ou à d'autres fonctionnalités, et enfin récemment tout un tas d'ajouts au DOM en HTML5.

Si on est un peu perdu face à tout ça, ce n'est pas grave. Ça devient beaucoup plus clair quand on commence à faire de la programmation JavaScript. Smiley smile

Dans un navigateur web, le navigateur met à disposition des scripts de la page un objet javascript nommé document. C'est cet objet qui nous permet d'accéder à l'essentiel des fonctionnalités du DOM. On peut voir ça comme un conteneur qui renferme notre page HTML (ou plutôt, la représentaton DOM du document) et tout un tas d'outils.

Par exemple, si je veux travailler sur l'élément racine (l'élément "HTML" dans une page HTML), je peux écrire en JavaScript:
document.documentElement
(à noter que ce code, tout seul, ne fait rien)

Et si je veux travailler sur le dernier enfant de l'élément racine (c'est-à-dire, normalement, BODY), je peux écrire:
document.documentElement.lastChild


L'objet document possède aussi des méthodes qui permettent de trouver un élément précis (ou une collection d'éléments) dans l'arbre du document, par exemple:
document.getElementById('test') // élément qui a l'id "test"
document.querySelectorAll('#content .news li') // liste d'éléments qui correspondent à ce sélecteur


Il y a tout un tas d'autres outils accessibles depuis l'objet document. Et aussi, pour chaque objet qui correspond à un élément de l'arbre du document, on va pouvoir réutiliser une partie de ces outils, ou des outils (méthodes...) spécifiques à ce type d'élément. Par exemple:
document.getElementById('ma-video').play(); // lance la lecture


Pas de panique, on se familiarisera avec tout ça en apprenant la programmation JavaScript!
Par contre il me semble important, quand on apprend JavaScript, de bien distinguer:
- Les fonctionnalités qui sont fournies par le langage JavaScript lui-même.
- Les fonctionnalités qui sont fournies par le DOM (ces dernières pourraient théoriquement être utilisées avec d'autres langages de programmation, par exemple du VBScript, du Python...).

Voilà, en espérant que ça aide.
Merci d'avance aux experts de corriger mes bêtises le cas échéant. Smiley cligne
Bonjour,

Tout d'abord, Merci à tous !

Pour ne retenir que l'essentiel, la définition présente sur le site donné par Bzh (http://openweb.eu.org/dom) est assez clair pour moi également.

Est-ce que quelqu'un aurait une infographie sur la main qui traiterait du rapport langage de programmation/DOM (API)? Car il ne reste plus que pour moi à lever cette ambiguïté pour parfaire ma compréhension du DOM Smiley smile .

Laurie-Anne, pour te répondre très franchement, la présence du sondage est presque entièrement dû au fait que j'ai voulu essayer l'outil en arrivant en tant que "membre" sur ce forum.
Selon moi, il sera utile que s'il est complété et en aucun cas il pourra révéler si l'utilisateur, arrivant comme moi sur ce TOPIC, c'est-à-dire avec une ambition de bien comprendre la définition du DOM, a trouvé ou non sa réponse.
Pour finir à propos de ce sondage, je le vois plutôt complété avant de lire ce TOPIC, et il pourrait pourquoi pas révéler à l'avenir pour une infime partie d'internaute si oui ou non ils pensent avoir une compréhension clair de ce qu'est le DOM (si le sujet les intéresse) ; et en tant que créateur de ce sondage j'accorde un intérêt tout particulier à ce résultat.

Bonne journée, à bientôt.
Salut fvsch,

Merci beaucoup de cette réponse !
En fait j'étais entrain d'écrire la mienne quand la tienne est apparue.
Je trouve que ce sont des éléments de réponses tout à fait abordables et pertinents. Je retiendrais l'essentiel :

a écrit :
Donc le navigateur reçoit un gros morceau de texte (le code HTML), et il l'analyse pour construire un arbre du document. Cet arbre du document, on l'appelle parfois «le DOM», mais il me semble qu'il vaut mieux parler de «représentation DOM du document». Cette représentation du document, c'est une partie du DOM.


a écrit :
Il faut bien comprendre que lorsque le navigateur affiche une page web, il se sert de cette représentation du document, pas directement du code HTML. Donc si on veut changer des choses dans la page, on ne change pas le code HTML, on change des éléments du DOM.


même si tout le reste de ta réponse est également intéressant et je jugerai même indispensable à connaître pour la compréhension.

Du coup, tu réponds également à ma question sur les interactions entre langage de programmation/browser/DOM.
Mais pour que ma compréhension soit entièrement satisfaite (elle est gourmande Smiley cligne ) :
Pouvons-nous expliquer très clairement les mécanismes du parsage du document écrit par le programmeur en <<représentation DOM du document>>?
Quel sont les outils qui interviennent?
Et par la suite après la création de ce document par le navigateur, comment interagisse utilisateur/navigateur/<<représentation DOM du document>>?
J'emploie volontairement un langage un peu plus technique, car je pense que les intéressés à cette question auront déjà mes humbles base de connaissance si ce n'est plus.

Bonne journée, merci de votre attention.
yannlc a écrit :
Pouvons-nous expliquer très clairement les mécanismes du parsage du document écrit par le programmeur en <<représentation DOM du document>>?
Quel sont les outils qui interviennent?
Et par la suite après la création de ce document par le navigateur, comment interagisse utilisateur/navigateur/<<représentation DOM du document>>?

Ah ben c'est pas des petites questions ça. Pour répondre il faudrait expliquer et synthétiser une grosse partie des spécifications sur le sujet, et ce ne sont pas des documents de trois pages ces bestiaux là. Smiley cligne

Pour les deux premières questions, tu peux faire des recherches sur «parseur HTML», «HTML parser», «HTML5 parser».
Pour la troisième, ça touche surtout à la gestion des évènements. Tu peux lire La gestion des événements en JavaScript pour une introduction, et faire des recherche sur «DOM Events» pour plus d'infos.
Merci, même si je n'arrive pas à me répondre dans l'immédiat, ce qui me rassure c'est que mes questions ont un sens Smiley smile .
Laurie-Anne a écrit :
Bonjour,

Est-ce que le sondage était réellement nécessaire ?


Du sondage ou de la question, lequel était le plus nécessaire ? Smiley smile J'ai personnellement aimé le sondage.

Merci beaucoup a tous pour vos réponses, ca m'a tres grandement éclairé !
Sujet clos
Aller à