Comme dans les fichiers HTML externes, l’organisation du balisage est distincte de son style, de son format et de son comportement. Bien que vous puissiez certainement modifier le style des éléments ou du texte avec JavaScript, il est plus intéressant de modifier réellement l'organisation de la présentation de votre balisage.
N'oubliez pas que votre balisage ne fournit qu'une organisation, un cadre, et vous serez sur la voie du succès. Faites un petit pas de plus et vous verrez comment le navigateur prend toute cette organisation de texte et la transforme en quelque chose de super intéressant, un ensemble d'objets, dont chacun peut être modifié, ajouté ou supprimé.
Avantages du balisage de texte
Avant de parler des navigateurs Web, il convient de réfléchir aux raisons pour lesquelles le texte brut constitue le meilleur choix pour stocker du HTML (voir d'autres idées sur le balisage pour plus d'informations). Quels que soient les avantages et les inconvénients, rappelons simplement que le HTML est envoyé sur le réseau au navigateur Web à chaque fois qu'une page est consultée (par souci de brièveté, les caches, etc. ne sont pas pris en compte). Il n’existe vraiment pas de moyen plus efficace de transmettre du texte. Objets binaires, représentations graphiques de pages, blocs de balisage réorganisés, etc., tous plus difficiles à transmettre sur le réseau que les fichiers texte brut.
De plus, le navigateur ajoute également à la gloire. Les navigateurs d'aujourd'hui permettent aux utilisateurs de modifier la taille du texte, de redimensionner les images, de télécharger le CSS ou le JavaScript de la page (dans la plupart des cas), et bien plus encore, ce qui exclut complètement l'envoi de tout type de représentation graphique de la page au navigateur. Cependant, le navigateur a besoin du code HTML brut pour pouvoir appliquer n'importe quel traitement à la page dans le navigateur, plutôt que de faire confiance au navigateur pour gérer cette tâche. De même, séparer CSS de JavaScript et CSS du balisage HTML nécessite un format qui peut être facilement séparé. Encore une fois, les fichiers texte constituent la meilleure méthode pour cette tâche.
Enfin, rappelez-vous que les nouveaux standards (tels que HTML 4.01 et XHTML 1.0 et 1.1) promettent de séparer le contenu (les données de la page) de la présentation et du style (généralement appliqués par CSS). Si les programmeurs devaient séparer le HTML du CSS et forcer ensuite le navigateur à récupérer une représentation de la page qui colle les différentes parties de la page, ils perdraient la plupart des avantages de ces normes. Garder ces parties séparées lorsqu'elles arrivent au navigateur donne à celui-ci une flexibilité sans précédent pour obtenir le HTML du serveur.
Réflexions supplémentaires sur
l'édition de texte brut avec balisage : vrai ou faux ?
Le texte brut est idéal pour stocker le balisage, mais ne convient pas pour le modifier. L'utilisation d'IDE, tels que Macromedia DreamWeaver ou le plus puissant Microsoft® FrontPage®, pour manipuler le balisage des pages Web est populaire. Ces environnements fournissent souvent des raccourcis et une aide pour créer des pages Web, en particulier lors de l'utilisation de CSS et de JavaScript, qui proviennent tous deux de fichiers autres que le balisage réel de la page. Peu importe que beaucoup de gens préfèrent encore le bon vieux Notepad ou vi (j'avoue que j'en fais partie). Quoi qu’il en soit, le résultat final est un fichier texte rempli de balises.
Texte sur le Web : les bonnes choses
ont été dites : le texte est le meilleur support pour les documents, comme le HTML ou le CSS, transmis des milliers de fois sur le Web. Quand je dis qu'il est difficile pour un navigateur de représenter du texte, je fais spécifiquement référence à la conversion du texte en une page graphique visuelle que l'utilisateur peut visualiser. Cela n'a rien à voir avec la manière dont le navigateur récupère réellement la page à partir du navigateur Web ; dans ce cas, le texte reste le meilleur choix.
Inconvénients du balisage de texte
Tout comme le balisage de texte présente des avantages surprenants pour les concepteurs et les créateurs de pages, il présente également des inconvénients assez surprenants pour les navigateurs. Plus précisément, il est difficile pour les navigateurs de représenter directement le balisage du texte visuellement à l'utilisateur (voir d'autres idées sur le balisage pour plus de détails). Considérez les tâches courantes suivantes du navigateur :
· Appliquer des styles CSS (généralement à partir de plusieurs feuilles de style dans des fichiers externes) au balisage en fonction du type d'élément, de la classe, de l'ID et de sa position dans le document HTML.
·Appliquer des styles et un formatage à différentes parties du document HTML en fonction du code JavaScript (généralement situé dans un fichier externe).
·Modifiez les valeurs des champs de formulaire en fonction du code JavaScript.
· Basé sur le code JavaScript, prend en charge les effets visuels tels que le retournement et l'échange d'images.
La complexité ne réside pas dans le codage de ces tâches ; tout y est assez simple. La complexité vient du fait que le navigateur implémente réellement l'action demandée. Si le balisage est stocké sous forme de texte, par exemple, si vous souhaitez saisir du texte (text-align: center) dans l'élément p de la classe center-text, comment y parvenir ?
·Ajouter des styles en ligne au texte ?
· Appliquer des styles au texte HTML dans le navigateur et garder simplement le contenu centré ou non ?
· Appliquer du HTML sans style, puis appliquer le formatage par la suite ?
Ces problèmes très difficiles expliquent pourquoi si peu de gens écrivent des navigateurs aujourd’hui. (Celui qui a écrit le navigateur doit accepter mes plus sincères remerciements.)
Il ne fait aucun doute que le texte brut n'est pas un bon moyen de stocker le HTML du navigateur, bien que le texte soit la meilleure solution pour obtenir le balisage de la page. Ajoutez à cela la capacité de JavaScript à modifier la structure de la page et les choses deviennent un peu plus nuancées. Le navigateur doit-il réécrire la structure modifiée sur le disque ? Comment conserver la dernière version du document ?
Certes, le texte n’est pas la réponse. Il est difficile de le modifier, il est difficile de lui appliquer des styles et des comportements, et il est fondamentalement très éloigné de la nature dynamique des pages Web d'aujourd'hui.
La réponse au problème durecours aux arborescences
(du moins celle choisie par les navigateurs Web actuels) consiste à utiliser une structure arborescente pour représenter le HTML. Voir le Listing 1, une page HTML assez simple et ennuyeuse qui représente le balisage de cet article.
Listing 1. Page HTML simple<html>
dans le balisage de texte
<tête>
<title>Des arbres, des arbres, partout</title>
</tête>
<corps>
<h1>Des arbres, des arbres, partout</h1>
<p>Bienvenue sur une page <em>vraiment</em> ennuyeuse.</p>
<div>
Revenez bientôt.
<img src="come-again.gif" />
</div>
</corps>
</html>
Le navigateur accepte la page et la convertit en une arborescence, comme le montre la figure 1.
Pour que cet article continue de progresser, je l'ai un peu simplifié. Les experts en DOM ou XML seront conscients de l'impact des espaces sur la façon dont le texte d'un document est représenté et décomposé dans l'arborescence d'un navigateur Web. Une compréhension superficielle ne fait que rendre les choses ambiguës, donc si vous voulez comprendre l'impact de l'espace blanc, c'est votre meilleur pari, sinon continuez simplement à lire et n'y pensez pas. Lorsque cela devient un problème, vous saurez alors tout ce dont vous avez besoin.
Mis à part l'arrière-plan de l'arborescence, la première chose que vous remarquerez peut-être est que tout dans l'arborescence commence par l'élément HTML le plus externe, l'élément html. En utilisant la métaphore d’un arbre, c’est ce qu’on appelle l’élément racine. Ainsi, même s’il s’agit du niveau inférieur de l’arbre, lorsque vous regardez et analysez l’arbre, je commence généralement par celui-ci. Si cela fonctionne, vous pourriez renverser tout l’arbre, mais cela étire un peu la métaphore de l’arbre.
Les lignes partant de la racine représentent la relation entre les différentes parties étiquetées. Les éléments head et body sont des enfants de l'élément racine HTML ; title est un enfant de head et le texte "Des arbres, des arbres, partout" est un enfant de title. L'arborescence entière est organisée de cette manière jusqu'à ce que le navigateur obtienne une structure similaire à la figure 1.
Quelques termes supplémentaires
Pour rester fidèle à la métaphore de l'arbre, la tête et le corps sont appelés branches du HTML. On les appelle branches parce qu’elles ont leurs propres enfants. Lorsque vous atteignez la fin de l'arbre, vous arriverez au texte principal, comme « Des arbres, des arbres, partout » et « vraiment » ; celles-ci sont souvent appelées feuilles parce qu'elles n'ont pas d'enfants. Vous n'avez pas besoin de vous souvenir de tous ces termes, il est beaucoup plus facile d'imaginer simplement la structure arborescente lorsque vous essayez de comprendre ce que signifie un terme particulier.
Valeurs des objets
Maintenant que vous comprenez une terminologie de base, il est temps de se concentrer sur le petit rectangle qui contient le nom et le texte de l'élément (Figure 1). Chaque rectangle est un objet ; le navigateur résout certains problèmes de texte en son sein. En utilisant des objets pour représenter chaque partie d'un document HTML, vous pouvez facilement modifier l'organisation, appliquer des styles, autoriser JavaScript à accéder au document, et bien plus encore.
Types d'objet et
marqueurs de propriété Chaque type possible possède son propre type d'objet. Par exemple, les éléments HTML sont représentés par le type d'objet Element. Le texte du document est représenté par le type Texte, les attributs sont représentés par le type Attribut, et ainsi de suite.
Ainsi, non seulement les navigateurs Web peuvent utiliser un modèle objet pour représenter des documents (évitant ainsi d'avoir à gérer du texte statique), mais ils peuvent également utiliser des types d'objet pour indiquer immédiatement ce qu'est quelque chose. Le document HTML est analysé et converti en une collection d'objets, comme le montre la figure 1, et des éléments tels que les crochets angulaires et les séquences d'échappement (par exemple, utilisez < pour < et > pour >) ne sont plus un problème. Cela rend le travail du navigateur (au moins après avoir analysé le code HTML d'entrée) beaucoup plus facile. Il est facile de déterminer si quelque chose est un élément ou un attribut et de déterminer comment gérer les objets de ce type.
En utilisant des objets, un navigateur Web peut modifier les propriétés de ces objets. Par exemple, chaque objet élément possède un élément parent et une liste d’éléments enfants. Ainsi, l’ajout d’un nouvel élément enfant ou d’un nouveau texte ajoute simplement un nouvel élément enfant à la liste des éléments enfants de l’élément. Ces objets ont également une propriété de style, donc changer rapidement le style d'un élément ou d'un segment de texte est très simple. Par exemple, pour utiliser JavaScript pour modifier la hauteur d'un div, ressemblez à ceci :
someDiv.style.height = "300px" ;
En d'autres termes, un navigateur Web permet de modifier très facilement l'apparence et la structure d'une arborescence à l'aide d'un objet. propriétés. Comparez cela aux choses compliquées qu'un navigateur doit faire en interne pour représenter une page sous forme de texte : chaque modification apportée à une propriété ou à une structure nécessite que le navigateur réécrive le fichier statique, l'analyse et le réaffiche à l'écran. Avec les objets, tout cela est résolu.
Maintenant, prenez un moment pour développer certains documents HTML et les décrire avec une arborescence. Bien que cela puisse paraître une requête inhabituelle (surtout dans un article comme celui-ci qui contient si peu de code), si vous espérez pouvoir manipuler ces arbres, vous devez vous familiariser avec leur structure.
En chemin, vous découvrirez peut-être des choses étranges. Par exemple, considérez ce qui suit :
Qu'arrive-t-il à l'attribut ?
· Qu'en est-il du texte divisé en éléments (tels que em et b) ?
· Qu'en est-il du HTML qui n'est pas correctement structuré (par exemple, lorsque la balise p de fermeture est manquante) ?
Une fois familiarisés avec ces problématiques, vous serez en mesure de mieux comprendre les sections suivantes.
La rigueur est parfois une bonne chose
Si vous essayez l'exercice que je viens de mentionner, vous pourriez rencontrer des problèmes potentiels avec l'arborescence marquée (sinon, croyez-moi sur parole !). En fait, certains problèmes seront rencontrés dans le listing 1 et la figure 1. Tout d’abord, regardez comment l’élément p est décomposé. Si vous demandez au développeur Web moyen "Quel est le contenu textuel de l'élément p ?", la réponse la plus courante sera "Bienvenue sur une page Web vraiment ennuyeuse". Si vous comparez cela avec la figure 1, vous verrez que cette réponse (bien que logique) n’est tout simplement pas correcte.
En fait, l'élément p a trois objets enfants différents, dont aucun ne contient le texte complet « Bienvenue sur une page Web vraiment ennuyeuse ». Vous trouverez des parties du texte telles que « Bienvenue dans un » et « Page Web ennuyeuse », mais pas la totalité. Pour comprendre cela, rappelez-vous que tout ce qui se trouve dans le balisage doit être converti en un objet d'un certain type.
De plus, l'ordre n'a pas d'importance ! Pouvez-vous imaginer comment un utilisateur réagirait à un navigateur Web si celui-ci affichait les objets corrects, mais dans un ordre différent de celui que vous avez fourni dans le code HTML ? Que se passe-t-il si le paragraphe est pris en sandwich entre le titre de la page et le titre de l'article, et que ce n'est pas ainsi que vous organisez vous-même votre document ? Évidemment, le navigateur doit conserver l’ordre des éléments et du texte.
Dans cet exemple, l'élément p comporte trois parties différentes :
· Le texte avant l'élément em · L'élément em lui-même · Le texte après l'élément em
Si vous ratez cet ordre, vous risquez de vous concentrer sur la mauvaise partie du texte. Pour que tout reste en ordre, l'élément p a trois objets enfants, dans l'ordre indiqué dans le HTML du Listing 1. De plus, le texte clé "vraiment" n'est pas un élément enfant de p ; c'est un élément enfant de em, un élément enfant de p.
Il est très important de comprendre ce concept. Bien que le texte "vraiment" apparaisse probablement avec le texte d'un autre élément p, il s'agit toujours d'un enfant direct de l'élément em. Il peut avoir un format différent de celui des autres textes p et peut être déplacé indépendamment des autres textes.
Pour garder cela à l'esprit, essayez de schématiser le HTML dans les listings 2 et 3 pour vous assurer que le texte possède le bon élément parent (quelle que soit la façon dont le texte apparaîtra finalement à l'écran).
Listing 2. Balisage
<html>
avec imbrication intelligente des éléments
<tête>
<title>C'est un peu délicat</title>
</tête>
<corps>
<h1>Faites <u>très attention</u>, d'accord ?</h1>
<div>
<p>Ce p n'est vraiment pas <em>nécessaire</em>, mais il rend le
<span id="bold-text">la structure <i>et</i> l'organisation</span>
de la page plus facile à suivre.</p>
</div>
</corps>
</html>
Listing 3. Une imbrication d'éléments plus intelligente
<html>
<tête>
<title>Une imbrication plus délicate, toujours</title>
</tête>
<corps>
<div id="main-body">
<div id="contenu">
<tableau>
<tr><th>Étapes</th><th>Processus</th></tr>
<tr><td>1</td><td>Déterminez l'<em>élément racine</em>.</td></tr>
<tr><td>2</td><td>Traitez d'abord la <span id="code">tête</span>,
comme c'est généralement facile.</td></tr>
<tr><td>3</td><td>Parcourez le <span id="code">corps</span>.
<em>prenez votre temps</em>.</td></tr>
</table>
</div>
<div id="clôture">
Ce lien n'est <em>pas</em> actif, mais s'il l'était, les réponses
à cela <a href="answers.html"><img src="exercise.gif" /></a> serait
soyez là. Mais <em>faites l'exercice quand même !</em>
</div>
</div>
</corps>
</html>
Vous trouverez les réponses à ces exercices dans les fichiers GIF à la fin de cet article, tricky-solution.gif dans la Figure 2 et trickier-solution.gif dans la Figure 3. Ne regardez pas, prenez le temps d’y répondre automatiquement en premier. Cela vous aidera à comprendre à quel point les règles s'appliquent lors de l'organisation de l'arborescence et vous aidera réellement à maîtriser le HTML et sa structure arborescente.
Et les attributs ?
Rencontrez-vous des problèmes lorsque vous essayez de savoir quoi faire avec les propriétés ? Comme mentionné précédemment, l'attribut a son propre type d'objet, mais l'attribut n'est en effet pas un enfant de l'élément qui l'affiche. L'élément imbriqué et le texte ne sont pas au même "niveau" d'attribut, comme vous le remarquerez. réponses aux exercices des listings 2 et 3 Aucune propriété n'est affichée.
Les propriétés sont en fait stockées dans le modèle objet utilisé par les navigateurs, mais elles présentent des cas particuliers. Chaque élément possède une liste de propriétés disponibles, distincte de la liste des objets enfants. Ainsi, un élément div peut avoir une liste contenant un attribut « id » et un autre attribut « class ».
N'oubliez pas que les attributs d'un élément doivent avoir des noms uniques, c'est-à-dire qu'un élément ne peut pas avoir deux attributs "id" ou deux "class". Cela rend la liste facile à maintenir et à accéder. Comme vous le verrez dans le prochain article, vous pouvez simplement appeler une méthode telle que getAttribute("id") pour obtenir la valeur d'un attribut par son nom. Des appels de méthode similaires peuvent également être utilisés pour ajouter des propriétés ou définir (réinitialiser) la valeur des propriétés existantes.
Il convient de souligner que le caractère unique des noms d'attributs rend cette liste différente de la liste des sous-objets. Un élément p peut avoir plusieurs éléments em, de sorte que la liste d'objets enfants peut contenir plusieurs doublons. Bien que les listes d'enfants et les listes de propriétés fonctionnent de la même manière, l'une peut contenir des doublons (enfants d'un objet) alors que l'autre ne le peut pas (propriétés d'un objet élément). Enfin, seuls les éléments ont des attributs, donc les objets texte n'ont pas de liste supplémentaire pour stocker les attributs.
HTML désordonné
Avant de passer à la façon dont les navigateurs convertissent le balisage en une représentation arborescente, il y a un autre sujet qui mérite d'être exploré, à savoir la façon dont les navigateurs gèrent le balisage qui n'est pas bien formé. Bien formé est un terme largement utilisé en XML et a deux significations fondamentales :
· Chaque balise d'ouverture a une balise de fermeture correspondante. Ainsi, chaque <p> du document correspond à </p>, chaque <div> correspond à </div>, et ainsi de suite.
La balise de début la plus interne correspond à la balise de fin la plus interne, puis la balise de début la plus interne suivante correspond à la balise de fin la plus interne suivante, et ainsi de suite. Donc, <b><i>gras et italique</b></i> est illégal car la balise d'ouverture la plus interne <i> ne correspond pas correctement à la balise de fermeture la plus interne <b>. Pour le rendre bien formé, changez l’ordre des balises d’ouverture ou l’ordre des balises de fermeture. (Si vous changez les deux, le problème persistera).
Examinez de plus près ces deux règles. Ces deux règles simplifient non seulement l'organisation des documents, mais éliminent également l'incertitude. Faut-il appliquer le gras en premier, puis l'italique ? Ou tout simplement le contraire ? Si cet ordre et cette incertitude ne semblent pas très importants, gardez à l'esprit que CSS permet aux règles de remplacer d'autres règles, donc, par exemple, si le texte de l'élément b a une police différente de celle de l'élément i, l'ordre dans lequel le formatage est appliqué changera. C'est très important. La bonne forme du HTML joue donc un rôle crucial.
Si le navigateur reçoit un document mal formé, il fera de son mieux. La structure arborescente résultante sera, au mieux, une approximation de la page originale prévue par l'auteur, et au pire, sera méconnaissable. Si vous avez déjà chargé une page dans votre navigateur et constaté des résultats complètement inattendus, vous avez probablement regardé les résultats du navigateur et deviné à quoi devrait ressembler votre structure, et vous avez continué à travailler avec frustration. Bien sûr, résoudre ce problème est assez simple : assurez-vous que le document est bien formaté ! Si vous ne savez pas comment écrire du HTML standardisé, consultez vos ressources pour obtenir de l'aide.
Introduction au DOM
Vous savez désormais que les navigateurs convertissent les pages Web en représentations d'objets, et vous avez peut-être même deviné que les représentations d'objets sont des arborescences DOM. DOM signifie Document Object Model et est une spécification disponible auprès du World Wide Web Consortium (W3C) (vous pouvez voir certains liens liés au DOM dans les ressources).
Mais plus important encore, le DOM définit les types et les propriétés des objets, permettant au navigateur de représenter le balisage. (Le prochain article de cette série sera consacré aux spécifications d'utilisation du DOM dans le code JavaScript et Ajax.)
Document Object
Tout d'abord, vous devez accéder au modèle objet lui-même. C'est très simple ; pour utiliser la variable document intégrée dans n'importe quel code JavaScript qui s'exécute sur une page Web, vous pouvez écrire du code comme celui-ci :
var domTree = document
Bien sûr, ce code en lui-même est inutile, mais il démontre que tout site Web; Le navigateur crée un document. Les objets peuvent être utilisés dans le code JavaScript, et une arborescence complète de balisage de représentation d'objet est démontrée (Figure 1).
Chaque élément est un nœud
. Évidemment, l'objet document est important, mais ce n'est que le début. Avant d'aller plus loin, il y a un autre terme à apprendre : les nœuds. Vous savez déjà que chaque partie du balisage est représentée par un objet, mais ce n'est pas n'importe quel objet, c'est un type spécifique d'objet, un nœud DOM. Les types plus spécifiques, tels que le texte, les éléments et les attributs, héritent tous de ce type de nœud de base. Il peut donc y avoir des nœuds de texte, des nœuds d'éléments et des nœuds d'attributs.
Si vous avez déjà une grande expérience en programmation JavaScript, vous travaillez probablement déjà avec du code DOM. Si vous avez suivi cette série Ajax jusqu'à présent, vous devez travailler avec le code DOM depuis un certain temps maintenant. Par exemple, la ligne de code var number = document.getElementById("phone").value; utilise le DOM pour rechercher un élément spécifique, puis récupère la valeur de cet élément (dans ce cas, un champ de formulaire). Ainsi, même si vous ne vous en rendez pas compte, vous utilisez le DOM chaque fois que vous tapez un document dans du code JavaScript.
Pour développer les termes que vous avez déjà appris, un arbre DOM est un arbre d'objets, mais plus précisément, c'est un arbre d'objets nœuds. Dans les applications Ajax ou tout autre JavaScript, vous pouvez utiliser ces nœuds pour produire des effets tels que la suppression d'éléments et de leur contenu, la mise en évidence d'un texte spécifique ou l'ajout de nouveaux éléments d'image. Comme ils se produisent tous côté client (le code exécuté dans le navigateur Web), ces effets se produisent immédiatement sans communication avec le serveur. Le résultat final est souvent que l'application semble plus réactive car le contenu change sur la page Web sans longues pauses pendant que la requête est dirigée vers le serveur et que la réponse est interprétée.
Dans la plupart des langages de programmation, vous devez connaître le nom d'objet réel de chaque type de nœud, connaître les propriétés disponibles et déterminer les types et les conversions, mais en JavaScript, cela n'est pas nécessaire. Vous pouvez simplement créer une variable et lui attribuer l'objet que vous souhaitez (comme vous l'avez déjà vu) :
var domTree = document;
var phoneNumberElement = document.getElementById("téléphone");
var phoneNumber = phoneNumberElement.value;
Il n'y a pas de type, JavaScript crée la variable selon les besoins et lui attribue le type correct. Du coup, travailler avec le DOM depuis JavaScript devient trivial (un prochain article sera consacré au DOM par rapport à XML, qui sera encore plus ingénieux).
Enconclusion
, je veux vous laisser ici un peu de suspense. Évidemment, il ne s’agit pas d’une description complètement exhaustive du DOM ; en fait, cet article n’est qu’une introduction au DOM. Il y a bien plus dans le DOM que ce que j’ai présenté aujourd’hui !
Le prochain article de cette série développera ces idées et expliquera comment utiliser le DOM en JavaScript pour mettre à jour des pages Web, modifier rapidement le code HTML et créer une expérience plus interactive pour vos utilisateurs. Je reviendrai sur le DOM dans un article ultérieur consacré à l'utilisation de XML dans les requêtes Ajax. Familiarisez-vous donc avec le DOM, qui constitue une partie majeure des applications Ajax.
À ce stade, comprendre le DOM en profondeur serait assez simple, comme détailler comment se déplacer dans l'arborescence DOM, obtenir les valeurs des éléments et du texte, parcourir des listes de nœuds, etc., mais cela pourrait vous laisser avec le l'impression que le DOM est uniquement une question de code, ce qui n'est pas le cas.
Avant de lire l'article suivant, essayez de réfléchir à une structure arborescente et essayez-la avec votre propre HTML pour voir comment un navigateur Web convertit le HTML en une arborescence de balisage. De plus, réfléchissez à l'organisation de l'arborescence DOM et pratiquez-la avec les cas particuliers présentés dans cet article : attributs, texte avec des éléments mélangés et éléments sans contenu textuel (comme l'élément img).
Avoir une bonne maîtrise de ces concepts puis apprendre la syntaxe de JavaScript et du DOM (prochain article) permettra d'y répondre beaucoup plus facilement.
Et n'oubliez pas qu'il existe des réponses aux listings 2 et 3, accompagnées d'un exemple de code !