Jusqu'à présent, nous avons parlé de pourquoi dominer l'appellation est excitant.
Pourquoi vous devriez vous soucier.
Les différents sites qui l'utilisent les possibilités infinies les jeux toutes les choses passionnantes.
Mais nous n'avons toujours pas vraiment parlé de ce que les DOM est réellement.
Donc, nous allons le faire dans cette vidéo pour commencer, définissons-le.
Dio am.
Dom signifie Document object model.
La signification de ces trois mots fera un peu plus de sens dans les diapositives à venir.
Mais commençons par la définir à un niveau supérieur.
Le Dom est l'interface entre votre javascript et votre âge.
Tim Mounty SS C'est essentiellement un tas d'objets javascript spéciaux javascript méthodes fonctions que nous pouvons utiliser pour interagir avec notre H.M.S. Évaluer que nous pouvons changer des choses que nous pouvons ajouter des éléments enlever les éléments changer les couleurs animer les choses toutes sortes de moyens intéressants d'interagir avec leur H.M.S. évaluer.
Sur cette diapositive, je parle un peu de la façon dont le DOM est construit et pourquoi il est appelé le modèle d'objet de document.
Donc, quand nous chargeons une page de courrier électronique, il ressemble à ceci dans un navigateur et c'est juste un peu de bordure simple, donc vous avez un titre et une étiquette avec mon lien comme le texte et un H-1 avec mon en-tête comme texte et c'est il.
Donc quand je l'ouvre dans le navigateur je vois cela, mais derrière les scènes, le DOM est créé.
Il est construit à partir de ce droit ici.
Donc, ce que je veux dire, c'est que cet âge Tim est transformé en un tas d'objets javascript.
Chaque objet modélise l'un de ces éléments.
C'est là que nous obtenons la partie du modèle d'objet du modèle d'objet de document.
Donc encore une fois pour réitérer que nous chargeons chaque équipe dans le navigateur, le navigateur nous affiche des choses comme ça.
Mais derrière les scènes, il fait en fait ce modèle de chaque élément unique avec un objet javascript tout comme nous avons modélisé mon chien Rusty en utilisant un objet javascript.
Il avait un nom de propriété et une autre race et âge.
Ces objets sont fondamentalement la même chose sauf le contenu est différent.
Ils vont avoir des choses comme type d'étiquette source de texte attributs couleur couleur d'arrière-plan taille du texte toutes les différentes propriétés qui sont toutes contenues à l'intérieur de chaque objet.
Nous allons certainement passer beaucoup de temps à travailler avec ces objets afin que les détails ne sont pas importants.
Tout ce que je veux souligner ici, c'est que nous chargeons chaque tim L ..
Il est affiché dans le navigateur et le navigateur prend que Tim L et prend chaque élément et le transforme en un objet.
Cela couvre la partie du modèle objet.
Et le document?
Donc vous pouvez voir ici c'est un petit diagramme du type de structure que nous obtenons du DOM l'objet de niveau supérieur que tout est contenu à l'intérieur de notre modèle entier du H.T. Mounseers nous est appelé le document.
Nous pouvons donc accéder à n'importe quelle page Web du tout.
Donc j'ai ouvert Google et je vais juste taper dans la con. Le mot document.
Et quand je fais que je reçois cette grande chose qui revient à ce grand objet.
Sauf qu'il ne ressemble pas à un objet javascript.
Ce n'est pas vraiment ce à quoi nous nous attendrions.
C'est parce que le navigateur me cache quelque chose.
Ce qu'il est en fait me montrer est avec le courrier HQ ressemble comme du texte, mais il ne me montre pas les objets réels qui sont modélisés sur ce Timo.
Donc, pour obtenir que nous avons besoin d'utiliser annuler point D I R qui est une autre méthode sur l'objet console et nous allons annuler que D.I.R. Documenter tout ce que cela va faire est d'imprimer l'objet document entier dans cette syntaxe d'objet que nous connaissons.
Donc, vous pouvez voir que c'est juste un objet régulier tout comme ceux que nous avons écrit sur notre propre tout comme Rusty l'objet chien, sauf qu'il ya beaucoup plus d'informations ici.
Donc, nous avons des choses comme des polices ou des liens images, mais nous avons aussi des choses comme le corps et ce corps représente le corps tout entier.
Donc chaque élément que vous voyez ici est à l'intérieur du corps.
Donc, si je ouvre le corps, vous verrez que nous avons un tas d'autres propriétés, y compris un enfant appelé noeuds.
Donc, les noeuds enfants nous montre qu'il ya un div, il ya une balise de script et il ya un autre div à l'intérieur du corps.
Et si nous allions aux éléments, nous le verrions.
Alors voici le corps à l'intérieur du corps.
Nous avons cette première div, nous avons une balise de script et nous avons la seconde div.
Et alors que dire que nous ouvrons ce troisième div, nous nous attendons à voir deux divs plus à l'intérieur si ce deuxième div.
Et si nous passons au consul et nous regardons la deuxième div et puis nous regardons les noeuds enfants, nous voyons OK, il ya deux divs supplémentaires Ainsi que vous pouvez voir le dom devient vraiment énorme très rapide.
Il ya des centaines et des centaines de propriétés et de méthodes différentes et différents nœuds et cette structure complètement fou d'objets imbriqués.
C'est tellement de choses.
C'est l'un de ces moments que j'ai mentionné au début de cette classe où vous allez devoir être à l'aise de ne pas tout savoir.
Je peux vous dire maintenant que la plupart des développeurs ne connaissent pas la moitié des propriétés ici.
Je dirais qu'ils travaillent avec environ 10 pour cent au plus.
Il ya tellement plus de choses ici que nous avons presque jamais besoin d'utiliser.
Et puis quelque temps en bas de la ligne quelque chose se présente et nous devons faire quelque chose que nous n'avons jamais fait auparavant.
Nous google il et nous découvrons oh bien alors c'est ce que la propriété de changement non durci est pour.
Je n'en avais aucune idée.
Et c'est vraiment ce que c'est que d'être un développeur.
Jusqu'à présent, avec javascript, nous avons travaillé dans un petit petit monde contrôlé où nous apprenons des fonctions et des objets que nous apprenons sur les variables.
Et il ya un nombre fini de façons de faire les choses et il ya un sous-ensemble très spécifique de la connaissance que vous avez juste besoin de savoir avec le DOM.
Maintenant, nous avons cet immense énorme écosystème à travailler dans de nombreuses propriétés.
Je tiens donc à répéter qu'il ya tellement de choses ici.
Nous allons nous concentrer sur les pièces importantes, mais le but n'est pas de mémoriser.
L'objectif n'est pas de maîtriser chaque propriété.
Encore une fois 10 pour cent au plus est tout ce que vous devez être un développeur Web compétent.
OK, alors revenons en arrière et je veux juste revenir sur cette dernière fois.
Résumez ce dont nous avons parlé.
Donc, le DOM représente le modèle d'objet de document.
C'est l'interface entre votre javascript et votre H.M.S ..
C'est comment nous pouvons utiliser notre javascript pour rendre les choses interactives.
C'est comment nous faisons des choses comme ajouter un nouvel élément à la page ou modifier l'attribut ref d'un lien ou modifier l'image d'arrière-plan sur notre corps ou comment nous pouvons obtenir la valeur d'un formulaire ou nous pouvons faire des validations personnalisées et des animations interactives Éléments où vous cliquez dans un code s'exécute toutes ces différentes possibilités proviennent tous du fait que le modèle d'objet document connecte notre javascript avec leur HMS accès .
Ainsi, la partie modèle d'objet du modèle d'objet de document nous dit que c'est un tas d'objets javascript qui sont des éléments de modélisation dans notre H.T. montant.
Donc, nous avons un ATAC ici, nous nous retrouvons avec un objet ici représentant que atec.
Et puis nous finissons avec un autre objet représentant cette balise H1 que nous voyons ici.
Enfin, il est appelé le modèle d'objet de document parce que tout vit à l'intérieur de cet objet appelé le document.
C'est le nœud racine où tout le reste vit à l'intérieur.
Alors la prochaine vidéo, nous allons commencer à écrire du code.