Travailler avec le modèle DOM. Principes de base du DOM dans le modèle d'objet de document JavaScript dom

Vous pouvez considérer le HTML comme une collection de boîtes imbriquées. Les balises aiment et incluent d'autres balises, qui à leur tour incluent des balises ou du texte. Voici un exemple de document du chapitre précédent :

Ma page d'accueil

Salut, je suis Mariin et ceci est ma page d'accueil.

Et j'ai aussi écrit un livre ! Lisez-le ici.

Cette page a la structure suivante :

La structure de données utilisée par le navigateur pour représenter le document reflète sa forme. Pour chaque boîte, il y a un objet avec lequel nous pouvons interagir et apprendre différentes données à son sujet - quelle balise elle représente, quelles boîtes et quel texte elle contient. Cette vue est appelée Document Object Model, ou DOM en abrégé.

Nous pouvons accéder à ces objets via la variable globale document. Sa propriété documentElement fait référence à l'objet qui représente la balise. Il fournit également les propriétés head et body, qui contiennent des objets pour les éléments correspondants.

Des arbres

Nous appelons une structure de données un arbre lorsqu'elle bifurque, n'a pas de cycles (un nœud ne peut pas se contenir) et a une seule "racine" distincte. Dans le cas du DOM, document.documentElement est la racine.

Les arbres sont courants en informatique. En plus de représenter des structures récursives comme document HTML ou des programmes, ils sont souvent utilisés pour travailler avec des ensembles de données triés, car les éléments sont généralement plus faciles à trouver ou à insérer dans un arbre trié que dans un tableau unidimensionnel trié.

Un arbre typique a différents nœuds. L'arbre de syntaxe d'Egg avait des variables, des valeurs et des applications. Les applications ont toujours eu des branches enfants, et les variables et les valeurs étaient des « feuilles », c'est-à-dire des nœuds sans branches enfants.

C'est la même chose avec le DOM. Les nœuds des éléments ordinaires qui représentent les balises HTML définissent la structure du document. Ils peuvent avoir des nœuds enfants. Un exemple d'un tel nœud est document.body. Certains de ces nœuds enfants peuvent être des feuilles - par exemple, du texte ou des commentaires (en Commentaires HTMLécrit entre les caractères).

Chaque objet nœud DOM a une propriété nodeType qui contient un code numérique qui identifie le type du nœud. Les éléments réguliers l'ont égal à 1, qui est également défini comme la propriété constante document.ELEMENT_NODE. Les nœuds de texte représentant des extraits de texte l'ont égal à 3 (document.TEXT_NODE). Les commentaires ont 8 (document.COMMENT_NODE).

Autrement dit, voici une autre façon de représenter graphiquement l'arborescence du document :

Les feuilles sont des nœuds de texte et les flèches montrent la relation père-enfant entre les nœuds.

Standard

Cela s'avère peu pratique. Bien que les normes soient une chose très utile, dans notre cas, l'avantage de l'indépendance linguistique n'est pas si utile. Il est préférable d'avoir une interface bien adaptée à la langue que vous utilisez plutôt qu'une interface familière à toutes les langues.

Pour montrer l'intégration de langage maladroite, considérez la propriété childNodes que possèdent les nœuds DOM. Il contient un objet de type tableau avec une propriété de longueur et des propriétés numérotées pour accéder aux nœuds enfants. Mais c'est une instance de type NodeList, pas un vrai tableau, donc il n'a pas de méthodes comme forEach.

Il y a aussi des problèmes avec des systèmes mal pensés. Par exemple, vous ne pouvez pas créer un nouveau nœud et lui ajouter immédiatement des propriétés ou des nœuds enfants. Vous devez d'abord le créer, puis ajouter les enfants un par un, et enfin attribuer les propriétés une par une, en utilisant les effets secondaires. Le code strict du DOM est long, laid et répétitif.

Mais ces problèmes ne sont pas fatals. JavaScript vous permet de créer des abstractions. Il est facile d'écrire des fonctions d'assistance pour exprimer les opérations de manière plus claire et concise. En général, ces types d'outils fournissent de nombreuses bibliothèques destinées à la programmation pour le navigateur.

Traversée d'arbres

Bien qu'une seule référence de chaque type soit affichée ici, chaque nœud possède une propriété parentNode qui pointe vers son nœud parent. De plus, chaque nœud d'élément (type 1) a une propriété childNodes qui pointe vers un objet de type tableau contenant ses nœuds enfants.

En théorie, vous pouvez accéder à n'importe quelle partie de l'arbre en utilisant uniquement ces liens. Mais JavaScript nous fournit de nombreux liens d'aide supplémentaires. Les propriétés firstChild et lastChild pointent vers les premier et dernier enfants, ou sont nulles pour les nœuds qui n'ont pas d'enfants. previousSibling et nextSibling pointent vers des nœuds voisins - des nœuds du même parent que le nœud actuel, mais situés immédiatement avant ou après le nœud actuel dans la liste. Le premier nœud aura la propriété previousSibling null et le dernier nextSibling aura null.

Lorsqu'il s'agit de telles structures imbriquées, les fonctions récursives sont utiles. Ce qui suit recherche dans le document les nœuds de texte contenant la chaîne donnée et renvoie true lorsqu'il trouve :

Fonction talksAbout (node, string) (if (node.nodeType == document.ELEMENT_NODE) ​​​​(for (var i = 0; i< node.childNodes.length; i++) { if (talksAbout(node.childNodes[i], string)) return true; } return false; } else if (node.nodeType == document.TEXT_NODE) { return node.nodeValue.indexOf(string) >-1; )) console.log (talksAbout (document.body, "livres")); // → vrai

Propriétés du nœud de texte nodeValue contient une ligne de texte.

Trouver des articles

Var link = document.body.getElementsByTagName ("a"); console.log (link.href);

Tous les nœuds d'élément ont une méthode getElementsByTagName qui collecte tous les éléments avec une balise donnée qui dérivent (descendants directs ou indirects) de ce nœud et le renvoie sous forme d'objet de type tableau.

Pour trouver un nœud spécifique, vous pouvez définir son attribut id et utiliser la méthode document.getElementById.

Mon autruche Gertrude :

La troisième méthode est getElementsByClassName, qui, comme getElementsByTagName, recherche le contenu du nœud d'élément et renvoie tous les éléments contenant la chaîne spécifiée dans leur classe.

Modifier le document

Un nœud ne peut exister qu'à un seul endroit dans un document. Ainsi, en insérant le paragraphe « Trois » avant le paragraphe « Un », nous le supprimons effectivement de la fin de la liste et l'insérant au début, et nous obtenons « Trois / Un / Deux ». Toutes les opérations d'insertion d'un nœud entraîneront sa disparition de la position courante (s'il en avait un).

La méthode replaceChild est utilisée pour remplacer un nœud enfant par un autre. Il accepte deux nœuds : un nouveau et un qui doit être remplacé. Le nœud à remplacer doit être un enfant de l'élément dont nous appelons la méthode. Les deux replaceChild et insertBefore s'attendent à recevoir un nouveau nœud comme premier argument.

Création de nœuds

Pour ce faire, vous devez non seulement supprimer des images, mais également ajouter de nouveaux nœuds de texte pour les remplacer. Pour cela, nous utilisons la méthode document.createTextNode.

ce v .

Remplacer

Étant donné une chaîne, createTextNode nous donne un nœud DOM de type 3 (texte) que nous pouvons insérer dans le document pour l'afficher à l'écran.

La boucle d'image commence à la fin de la liste des nœuds. En effet, la liste des nœuds renvoyés par la méthode getElementsByTagName (ou la propriété childNodes) est constamment mise à jour lorsque le document change. Si on avait recommencé depuis le début, supprimer la première image aurait fait perdre à la liste le premier élément, et lors du deuxième passage de la boucle, quand i vaut 1, elle se serait arrêtée, car la longueur de la liste aurait deviennent également 1.

Si vous devez travailler avec une liste fixe de nœuds au lieu d'une liste en direct, vous pouvez la convertir en un tableau réel à l'aide de la méthode slice.

Var arrayish = (0 : "un", 1 : "deux", longueur : 2) ; var real = Array.prototype.slice.call (arrayish, 0); real.forEach (fonction (elt) (console.log (elt);)); // → un // deux

Vous pouvez utiliser document.createElement pour créer des nœuds d'élément (type 1). La méthode prend un nom de balise et renvoie un nouveau nœud vide du type donné. L'exemple suivant définit un outil elt qui crée un nœud d'élément et utilise le reste des arguments comme ses enfants. Cette fonction est ensuite utilisée pour ajouter des informations supplémentaires au devis.

Aucun livre ne peut être terminé. En travaillant dessus, nous apprenons suffisamment pour le trouver immature immédiatement après en avoir été distrait.

Les attributs

Mais HTML vous permet d'attribuer n'importe quel attribut aux nœuds. Ceci est utile car vous permet de stocker des informations supplémentaires dans un document. Si vous créez vos propres noms d'attributs, ils ne feront pas partie des propriétés du nœud d'élément. Au lieu de cela, vous devrez utiliser les méthodes getAttribute et setAttribute pour les utiliser.

Code de lancement 00000000.

Le chat a quatre pattes.

Je recommande de mettre « data- » devant les noms des attributs inventés pour être sûr qu'ils n'entrent pas en conflit avec d'autres. Comme exemple simple nous écrirons une coloration syntaxique qui recherche les balises

("Préformaté", préformaté - utilisé pour le code et le texte brut) avec un attribut de langage de données (langue) et est plutôt grossier en essayant de mettre en évidence des mots-clés dans la langue.
Fonction HighlightCode (nœud, mots-clés) (var text = node.textContent; node.textContent = ""; // Efface le nœud var match, pos = 0; while (match = keywords.exec (text)) (var before = text . slice (pos, match.index); node.appendChild (document.createTextNode (avant)); var strong = document.createElement ("strong"); strong.appendChild (document.createTextNode (match)); node.appendChild ( strong ); pos = keywords.lastIndex;) var after = text.slice (pos); node.appendChild (document.createTextNode (after));)
La fonction HighlightCode prend un nœud 
Et un normal (avec le paramètre global activé) qui correspond au mot-clé du langage de programmation qui contient l'élément.
La propriété textContent est utilisée pour obtenir tout le texte du nœud, puis définie sur une chaîne vide, ce qui efface le nœud.  Nous parcourons toutes les occurrences de l'expression de mot-clé, ajoutons du texte entre elles sous la forme de nœuds de texte simples et ajoutons le texte correspondant (mots-clés), en les enfermant dans des éléments (caractère gras).
Nous pouvons mettre en évidence automatiquement l'intégralité du code de la page en parcourant tous les éléments 
Qui ont un attribut de langage de données et appellent chaque HighlightCode avec la bonne expression rationnelle.
Var language = (javascript: / \ b (function | return | var) \ b / g / *… etc * /);  fonction HighlightAllCode () (var pres = document.body.getElementsByTagName ("pre"); for (var i = 0; i< pres.length; i++) {
 var pre = pres[i];
 var lang = pre.getAttribute("data-language");
 if (languages.hasOwnProperty(lang))
 highlightCode(pre, languages);
 }
}
 
Voici un exemple :
 
Et voilà, la fonction d'identification :
ID de fonction (x) (retourner x ;)

 
Il existe un attribut couramment utilisé, la classe, dont le nom est un mot-clé en JavaScript.  Pour des raisons historiques, lorsque les anciennes implémentations JavaScript ne savaient pas comment gérer les noms de propriété qui correspondaient mots clés, cet attribut est disponible via une propriété appelée className.  Vous pouvez également y accéder par son vrai nom "class" via les méthodes getAttribute et setAttribute.
Disposition
Vous avez peut-être remarqué que différents types d'éléments sont positionnés différemment.  Certains, comme les paragraphes 
Et en-têtes 
s'étirent sur toute la largeur du document et apparaissent sur des lignes séparées.  De tels éléments sont appelés éléments de bloc.  D'autres aiment les liens ou texte en gras apparaissent sur la même ligne avec le texte environnant.  Ils sont appelés en ligne. 
Pour n'importe quel document, les navigateurs peuvent construire un agencement d'éléments, une mise en page dans laquelle chacun aura une taille et une position en fonction de son type et de son contenu.  Cette mise en page est ensuite utilisée pour créer l'apparence du document.
La taille et la position d'un élément peuvent être trouvées via JavaScript.  Les propriétés offsetWidth et offsetHeight donnent la taille, en pixels, que l'élément occupera.  Le pixel est l'unité de mesure de base dans les navigateurs, et correspond généralement à la taille du point minimum de l'écran.  De même, clientWidth et clientHeight donnent la taille de l'intérieur d'un élément, à l'exclusion de la bordure (ou, comme certains le disent, de la bordure).
 
je suis dans une boite

 
Le moyen le plus efficace de connaître la position exacte d'un élément à l'écran est d'utiliser la méthode getBoundingClientRect.  Il renvoie un objet avec les propriétés top, bottom, left et right qui contiennent la position de l'élément par rapport au coin supérieur gauche de l'écran en pixels.  Si vous devez obtenir ces données pour l'ensemble du document, vous devez ajouter la position de défilement actuelle, qui est contenue dans les variables globales pageXOffset et pageYOffset.
L'analyse d'un document est une tâche délicate.  Pour des raisons de performances, les moteurs de navigateur ne reconstruisent pas le document à chaque modification, mais attendent tellement longtemps.  que possible.  Lorsque le programme JavaScript qui a modifié le document se termine, le navigateur devra afficher la nouvelle mise en page afin d'afficher le document modifié à l'écran.  Lorsqu'un programme demande la position ou la taille de quelque chose en lisant des propriétés de type offsetHeight ou en appelant getBoundingClientRect, la disposition doit également être calculée pour fournir des informations correctes.
Un programme qui lit périodiquement la mise en page DOM et modifie le DOM force le navigateur à recalculer la mise en page plusieurs fois, et s'exécutera donc lentement.  Dans l'exemple suivant, il existe deux programmes différents qui dessinent une ligne de caractères X de 2 000 pixels de large et mesurent le temps d'exécution.
 



 
modes
Nous avons vu que différents éléments HTML se comportent différemment.  Certains sont affichés sous forme de blocs, d'autres sont en ligne.  Certains ajoutent un style visuel - par exemple, mettent le texte en gras et le soulignent en bleu. 
L'apparition de l'image dans la balise, ou le fait que le lien dans la balise ouvre une nouvelle page lorsqu'on clique dessus, est associé au type d'élément.  Mais les styles de base associés à un élément, tels que la couleur du texte ou le soulignement, peuvent être modifiés par nos soins.  Voici un exemple utilisant la propriété style :
Lien vert
 
L'attribut style peut contenir une ou plusieurs déclarations de propriété (couleur), suivies de deux-points et d'une valeur.  Dans le cas de déclarations multiples, elles sont séparées par des points-virgules : « color : red ;  frontière : aucune ».
Beaucoup de choses peuvent être modifiées avec les styles.  Par exemple, la propriété display contrôle si un élément est affiché sous forme de bloc ou en ligne.
Texte affiché intégré,
en bloc, et pas visible du tout.
 
Un élément de bloc est affiché dans un bloc séparé, et le dernier n'est pas visible du tout - affichage : aucun désactive l'affichage des éléments.  De cette façon, vous pouvez masquer les éléments.  Il est généralement préférable de les supprimer complètement du document, car ils sont plus faciles à réafficher ultérieurement si nécessaire.
Le code JavaScript peut agir directement sur le style d'un élément via la propriété style du nœud.  Il contient un objet qui possède des propriétés pour toutes les propriétés de style.  Leurs valeurs sont des chaînes sur lesquelles nous pouvons écrire pour modifier certains aspects du style de l'élément.
 
Beauté

 
Certains noms de propriétés de style contiennent des tirets, comme font-family.  Comme il serait gênant de travailler avec eux en JavaScript (vous devriez écrire le style ["font-family"]), les noms des propriétés dans l'objet style sont écrits sans tiret, et à la place ils apparaissent majuscules: style.fontFamily
Styles en cascade
Le système de style en HTML s'appelle CSS (Cascading Style Sheets).  Une feuille de style est un ensemble de styles dans un document.  Il peut être écrit à l'intérieur d'une balise : 


Maintenant texte de balise fort oblique et gris.
 
La cascade signifie que plusieurs règles sont combinées pour produire le style final du document.  Dans l'exemple, le style par défaut pour, qui met le texte en gras, est superposé à la règle de la balise par laquelle le style de police et la couleur sont ajoutés.
Lorsque la valeur d'une propriété est déterminée par plusieurs règles, les dernières règles sont prioritaires.  Si le style de texte incluait la règle font-weight: normal, qui entre en conflit avec le style par défaut, alors le texte serait normal, pas en gras.  Les styles appliqués à un nœud via l'attribut style ont la priorité la plus élevée.
En CSS, il est possible de spécifier plus que le nom des balises.  La règle pour .abc s'applique à tous les éléments dont la classe « abc » est spécifiée.  La règle pour #xyz s'applique à un élément avec un identifiant égal à « xyz » (les attributs d'identifiant doivent être rendus uniques au document).
Subtil (couleur : gris ; taille de la police : 80 % ;) #header (arrière-plan : bleu ; couleur : blanc ;) / * éléments p avec les classes a et b spécifiées et l'identifiant spécifié comme main * / pab # main ( margin-bottom : 20px ;)
La priorité des dernières règles fonctionne lorsque les règles ont la même granularité.  C'est une mesure de la précision avec laquelle il décrit les éléments appropriés, déterminé par le nombre et le type d'aspects requis des éléments.  Par exemple, la règle pour p.a est plus détaillée que les règles pour p ou simplement .a, et prévaudra.
L'entrée p> a (…) s'applique à toutes les balises qui sont à l'intérieur d'une balise et sont ses descendants directs. 
p a (…) s'applique également à toutes les balises à l'intérieur, qu'il s'agisse d'un descendant direct ou non.
Sélecteurs de requêtes
Nous n'utiliserons pas beaucoup de feuilles de style dans ce livre.  Comprendre comment ils fonctionnent est essentiel pour la programmation d'un navigateur, mais il faudrait 2-3 livres pour expliquer pleinement toutes leurs propriétés.  La principale raison pour se familiariser avec eux et avec la syntaxe des sélecteurs (enregistrements qui déterminent à quels éléments les règles s'appliquent) est que nous pouvons utiliser le même minilangage efficace pour trouver des éléments DOM. 
La méthode querySelectorAll, qui existe à la fois sur l'objet document et les éléments de nœud, prend une chaîne de sélection et renvoie un objet de type tableau contenant tous les éléments qui lui correspondent.

J'aime l'orage au début Peut
Quand le premier tonnerre du printemps
Comme si gambader et jouer
Tonnerre dans le ciel bleu.

 
Contrairement aux méthodes telles que getElementsByTagName, l'objet renvoyé par querySelectorAll n'est pas interactif.  Cela ne changera pas si vous modifiez le document.
La méthode querySelector (sans All) fonctionne de manière similaire.  Il est nécessaire si vous avez besoin d'un article spécifique.  Il ne retournera que la première correspondance, ou null s'il n'y a pas de correspondance.
Lieu et animation
La propriété position des styles affecte grandement la position des éléments.  Par défaut, il est statique, ce qui signifie que l'élément est à sa position normale dans le document.  Lorsqu'il est relatif, l'élément prend toujours de la place, mais maintenant les propriétés top et left peuvent être utilisées pour décaler par rapport à sa position normale.  Lorsqu'il est absolu, l'élément est retiré du "flux" normal du document, c'est-à-dire qu'il ne prend pas de place et peut se chevaucher.  De plus, ses propriétés left et top peuvent être utilisées pour se positionner de manière absolue par rapport au coin supérieur gauche de l'élément englobant le plus proche dont la position n'est pas statique.  Et s'il n'y a pas un tel élément, alors il est positionné par rapport au document. 
Nous pouvons l'utiliser pour créer des animations.  Le document suivant montre une image d'un chat se déplaçant dans une ellipse.
 

 


 
L'image est centrée sur la page et mise en position : relative.  Nous mettons constamment à jour les propriétés en haut et à gauche de l'image pour la faire bouger.
Le script utilise requestAnimationFrame pour appeler la fonction d'animation chaque fois que le navigateur est prêt à redessiner l'écran.  La fonction d'animation elle-même appelle à nouveau requestAnimationFrame pour planifier la prochaine mise à jour.  Lorsque la fenêtre du navigateur (ou le signet) est active, cela entraînera des mises à jour à un rythme d'environ 60 fois par seconde, ce qui donnera une belle animation.
Si nous ne faisions que mettre à jour le DOM en boucle, la page se figerait et rien ne serait visible.  Les navigateurs n'actualisent pas la page pendant l'exécution de JavaScript et ne permettent pas de travailler avec la page pour le moment.  Par conséquent, nous avons besoin de requestAnimationFrame - il indique au navigateur que nous avons terminé pour le moment et qu'il peut effectuer ses propres opérations de navigateur, par exemple, mettre à jour l'écran et répondre aux demandes des utilisateurs.
Notre fonction d'animation est passée heure actuelle via les arguments, qu'il compare avec le précédent (variable lastTime) afin que le mouvement du chat soit uniforme et que l'animation se déroule sans à-coups.  Si nous nous contentions de le déplacer d'un intervalle donné à chaque étape, le mouvement trébucherait si, par exemple, une autre tâche chargeait l'ordinateur.
Le mouvement circulaire est effectué à l'aide des fonctions trigonométriques Math.cos et Math.sin.  Je vais les décrire brièvement pour ceux qui ne les connaissent pas, car nous en aurons besoin plus tard.
Math.cos et Math.sin sont utiles lorsque vous avez besoin de trouver des points sur un cercle centré à (0, 0) et avec un rayon de un.  Les deux fonctions interprètent leur argument comme une position sur le cercle, où 0 désigne un point sur le bord droit du cercle, puis dans le sens inverse des aiguilles d'une montre jusqu'à ce qu'un chemin de 2π (environ 6,28) nous fasse faire le tour du cercle.  Math.cos calcule la coordonnée x du point qui est notre position actuelle sur le cercle, et Math.sin donne la coordonnée y.  Les positions (ou angles) supérieures à 2π ou inférieures à 0 sont également autorisées - les virages sont répétés de sorte que a + 2π signifie le même angle que a.
Utiliser le sinus et le cosinus pour calculer les coordonnées
L'animation d'un chat stocke un compteur d'angle pour l'angle de rotation actuel de l'animation et l'incrémente proportionnellement au temps écoulé à chaque fois que la fonction d'animation est appelée.  Cet angle est utilisé pour calculer la position actuelle de l'élément d'image.  Le style supérieur est calculé à l'aide de Math.sin et multiplié par 20, qui est le rayon vertical de notre ellipse.  Le style de gauche est calculé via Math.cos et multiplié par 200, de sorte que la largeur de l'ellipse est beaucoup plus grande que la hauteur. 
Les styles nécessitent généralement des unités.  Dans notre cas, nous devons ajouter px au nombre pour expliquer au navigateur ce que nous comptons en pixels (et non en centimètres, ems ou autres unités).  C'est facile à oublier.  L'utilisation de nombres sans unités entraînera l'ignorance du style - à moins que le nombre ne soit 0, ce qui ne dépend pas des unités.
Résultat
Les programmes JavaScript peuvent examiner et modifier le document actuellement affiché par le navigateur via une structure appelée le DOM.  Cette structure de données représente le modèle de document du navigateur, et un programme JavaScript peut la modifier pour modifier le document visible.  Le DOM est organisé sous forme d'arborescence, avec des éléments hiérarchisés selon la structure du document.  Les objets élément ont des propriétés telles que parentNode et childNodes, qui sont utilisées pour parcourir l'arborescence. 
L'apparence du document peut être modifiée par le biais des styles, soit en ajoutant directement des styles aux nœuds, soit en définissant des règles pour n'importe quel nœud.  Les styles ont beaucoup de propriétés comme la couleur ou l'affichage.  JavaScript peut influencer le style d'un élément directement via sa propriété style.
Des exercices
Construire une table
Nous avons construit des tableaux à partir de texte brut au chapitre 6. HTML facilite la construction de tableaux.  Un tableau en HTML est construit à l'aide des balises suivantes : 
 

 

 
Nom
 
la taille
 
pays
 
 

 
Kilimandjaro
 
5895
 
Tanzanie
 

 
La balise contient une balise pour chaque ligne.  À l'intérieur, nous pouvons placer des cellules : soit des cellules d'en-tête, soit des cellules régulières.
Les mêmes données que nous avons utilisées au chapitre 6 sont à nouveau disponibles dans la variable MONTAGNES.
Écrivez une fonction buildTable qui, en prenant un tableau d'objets avec les mêmes propriétés, construit une structure DOM qui représente une table.  Le tableau doit avoir une ligne avec des en-têtes, où les noms de propriétés sont encapsulés dans des éléments, et il doit y avoir une ligne par objet du tableau, où ses propriétés sont encapsulées dans des éléments.  C'est là que la fonction Object.keys est utile, qui renvoie un tableau contenant les noms de propriété de l'objet.
Lorsque vous êtes familiarisé avec les bases, alignez à droite les cellules numériques en modifiant leur propriété style.textAlign en « right ».



 
Éléments par nom de balise
La méthode getElementsByTagName renvoie tous les éléments enfants avec le nom de balise donné.  Faites de votre version de cette méthode une fonction régulière qui prend un nœud et une chaîne (nom de balise) et renvoie un tableau contenant tous les nœuds descendants avec le nom de balise donné. 
Pour connaître le nom de balise d'un élément, utilisez la propriété tagName.  Notez que cela renverra le nom de la balise dans majuscule...  Utilisez les méthodes de chaîne toLowerCase ou toUpperCase.
 
Un en-tête avec un élément span à l'intérieur.
Un paragraphe avec un, deux éléments spans.

 
Chapeau de chat
Prolongez l'animation du chat de sorte que le chat et son chapeau volent sur les côtés opposés de l'ellipse. 
Ou laissez le chapeau voler autour du chat.  Ou trouver autre chose d'intéressant.
Pour simplifier le positionnement de nombreux objets, il est judicieux de passer en positionnement absolu.  Ensuite, le haut et la gauche seront considérés par rapport au coin supérieur gauche du document.  Pour éviter d'utiliser des coordonnées négatives, vous pouvez ajouter un nombre spécifié de pixels aux valeurs de position.
 


Cette section fournit une introduction rapide au Document Object Model (DOM) - ce qu'est le DOM, comment les structures HTML sont exposées et Documents XML et comment interagir avec eux.  Cette rubrique contient Informations d'arrière-plan et exemples.
Qu'est-ce que le modèle objet de document (DOM) ?
Le Document Object Model (DOM) est une interface de programmation (API) pour les documents HTML et XML.  Le DOM fournit une représentation structurée d'un document et définit comment cette structure est accessible à partir de programmes qui peuvent modifier le contenu, le style et la structure du document.  La vue DOM se compose d'un groupe structuré de nœuds et d'objets qui ont des propriétés et des méthodes.  Essentiellement, le DOM connecte une page Web à des langages de script ou de programmation.
Une page Web est un document.  Le document peut être présenté à la fois dans la fenêtre du navigateur et dans le code HTML lui-même.  Dans tous les cas, il s'agit d'un seul et même document.  Le DOM fournit une autre façon de représenter, stocker et manipuler ce document.  Le DOM prend entièrement en charge la représentation orientée objet d'une page Web, ce qui permet de la modifier à l'aide d'un langage de script comme JavaScript.
Comment le DOM est-il accessible ?
Vous n'avez rien à faire de spécial pour travailler avec le DOM.  Différents navigateurs ont des implémentations DOM différentes, ces implémentations montrent des degrés variables de conformité avec la norme DOM actuelle (qui est un sujet que nous avons essayé de ne pas couvrir dans cette documentation), mais chaque navigateur utilise son propre DOM pour rendre les pages Web accessibles aux langages de script .
Lors de la création d'un script à l'aide de l'élément