DOUG LLOYD: Dans cette vidéo, nous avons voulu d'appeler l'attention séparée à un très particulière élément de JavaScript que vous pourriez trouver à portée de main quand vous commencez de travailler sur la manipulation de pages web et de modifier le contenu de votre page web à la volée. Et voilà la notion de le Document Object Model. Donc, comme nous l'avons vu dans notre vidéo JavaScript, les objets sont très flexibles. Et ils peuvent contenir divers domaines. Et si nous ne sommes pas allés dans un grand nombre de détail, ces champs ou propriétés, que nous serions probablement plus les appeler de manière appropriée dans le contexte d'un objet, même ces propriétés peuvent être d'autres objets. Et à l'intérieur de ces objets peut-être d'autres objets. 

Vous avez cette objet très grand avec beaucoup d'autres objets à l'intérieur de celui-ci, qui sorte de crée cette idée d'un grand arbre. Maintenant, l'objet document est un objet très spécial en JavaScript qui organise l'ensemble de votre web page sous cette sorte de parapluie d'un objet. Et si l'intérieur du document objet sont des objets présentant la tête et le corps de votre page Web. 

A l'intérieur de ceux autre sont objets, et cetera, et cetera, jusqu'à ce que votre page Web entière a été organisée dans ce gros objet. Quelle est la tête ici, non? Eh bien, nous savons comment travailler avec des objets en JavaScript. 

Donc, si nous avons un objet qui se réfère à notre page Web entière, que signifie en appelant la bonne méthodes pour manipuler cet objet ou de modifier certaines de ses propriétés, nous peut changer les éléments de notre page programmation l'utilisation de JavaScript au lieu d'avoir pour coder des choses avec, disons, HTML. Alors, voici un exemple de très simple page web, non? Il est obtenu balises HTML, une tête. 

À l'intérieur de là est un titre, bonjour monde. Je dois ensuite un corps. À l'intérieur de cela, je dois trois choses différentes. Je dois une balise d'en-tête h2, un paragraphe, et un lien. Ceci est une page web très simple. 

Eh bien, ce qui pourrait le document l'objet de cette ressemble? Eh bien, il est un peu effrayant peut-être au premier abord. Mais il est vraiment juste un grand arbre. Et à la racine même de celui-ci est le document. 

A l'intérieur du document est un autre se référant à l'objet de ma page HTML. Et le code HTML de ma page est tout cela. Et puis à l'intérieur de l'HTML objet, je dois un objet de la tête, qui se réfère à tout ce qu'il ya. 

Et à l'intérieur de là, Je dois un objet de titre. Et à l'intérieur de là, je dois autre objet qui est juste bonjour monde. Je pourrais avoir mon corps représenté comme ça. 

A l'intérieur de mon corps, je dois un h2 objet et un objet de p pour le paragraphe et une un objet pour un lien. Et si toute cette hiérarchie peut être représenté comme un grand arbre avec beaucoup de petit peu des choses sortant de lui. Maintenant, bien sûr, quand nous programmation, nous ne pas penser à des choses comme un grand arbre. Nous voulons voir réelle Les codes choses liées. 

Et heureusement, nous pouvons utiliser nos outils de développement de prendre effectivement un oeil à document de l'objet de ce site. Et nous allons le faire. Donc, je l'ai ouvert un onglet de navigateur. 

Et je ai ouvert Developer Tools. Et dans ma vidéo sur JavaScript, je a mentionné que la console est pas seulement un endroit où nous imprimons informations, il est aussi un lieu où nous pouvons informations d'entrée. Dans ce contexte, ce que Je vais dire est Je voudrais revenir les objets de document, afin que je puisse commencer à avoir un regard sur elle. Alors, comment pourrais-je faire cela? Eh bien, si je veux organiser vraiment bien, Je vais dire console.dir, D-I-R. Maintenant, je me sers console.log juste impression quelque chose de très simple. Mais si je veux organiser cette hiérarchiquement comme un objet, Je veux que ce genre de structure comme une structure de répertoire. 

Je tiens donc à console.dir document. Je vais appuyez sur Entrée. Et juste en dessous de maintenant, et je zoome ici, Je dois ce document de réponse avec une petite flèche à côté de lui. Maintenant, quand je l'ouvre cette flèche, il va y avoir beaucoup de choses. 

Mais nous allons ignorer beaucoup de celui-ci et juste sorte de mise au point sur la partie la plus importante, donc nous peut commencer à naviguer dans ce document. Il ya beaucoup plus à l'DOM que nœuds et nœuds enfants tout parent. Il ya beaucoup de choses accessoire. 

Donc, je vais ouvrir cette place. Et il ya tout un tas de trucs qui surgit. Mais tout ce que je me soucie est ici, les nœuds enfants. Ouvrons cela. 

À l'intérieur de là je vois quelque chose de familier, HTML. Donc, à l'intérieur de notre document un niveau plus bas, HTML. Je ouvre cela. Qu'attendons-nous? 

Si vous vous souvenez de notre schéma, que devons-nous trouver à l'intérieur du HTML? Quelles sont les deux nœuds ci-dessous dans l'arborescence? Allons le découvrir. Nous ouvrons HTML. Nous descendons à ses nœuds enfants. 

Pop That ouverte. Il ya la tête et le corps. Et nous pouvons ouvrir la tête. Allez à ses nœuds enfants. Eh bien, il ya le titre. 

Et nous pourrions continuer comme ça pour toujours. Nous pourrions le faire avec le corps ainsi. Mais il est une façon pour nous de regarder le document organisé comme un gros objet. Et si nous regardons est un grand objet qui ressemble beaucoup comme le code, ce qui signifie que nous pouvons commencer pour manipuler ce grand objet en utilisant code pour changer ce que notre site ressemble et se sent. 

Voilà donc un outil très puissant nous avons à notre disposition aujourd'hui. Donc, comme nous venons de le voir, la le document objet lui-même et tous les objets à l'intérieur de celui-ci avoir des propriétés et méthodes, juste comme tout autre objet que nous avons travaille avec JavaScript. Mais nous pouvons utiliser ces propriétés et utiliser ces méthodes pour sorte de forer vers le bas du gros document et obtenir inférieur et plus bas, plus en plus fines grains de détail, jusqu'à ce que nous arriver à un morceau très spécifique de notre page web que nous voulons changer. 

Et quand nous mettons à jour les propriétés de la Document Object ou appelez ces méthodes, les choses pourraient se produire sur notre page web. Et nous ne devons faire tout rafraîchissante d'avoir ces modifications prennent effet. 

Et cela est une possibilité assez cool à avoir quand nous travaillons avec le code. Alors, quelles sont certaines de ces propriétés qui font partie d'un objet de document? Eh bien, vous avez probablement vu un deux d'entre eux très rapidement comme nous étions Zipping à travers le document géant objet nous venons de voir dans le navigateur Web. 

Mais un couple de ces propriétés pourraient être des choses comme HTML intérieure. Et vous pourriez même me rappeler utiliser ce dans la vidéo JavaScript à la fin quand je a été de parler des événements. Quelle était cette HTML intérieure? Eh bien, il est juste ce qui est entre les balises. 

Et si le code HTML intérieure, par exemple, le titre de tag, si nous avions continué à aller dans cet exemple il ya un instant, aurait été Bonjour tout le monde. Ce fut le titre de notre page. Autres propriétés inclure le nom de noeud, qui est le nom d'un fichier HTML élément tel titre. ID, qui correspond à l'ID attribut d'un élément HTML. 

Rappelons que nous pouvons spécialement indiquer éléments spécifiques de notre HTML avec un attribut ID, qui habituellement est très pratique dans le contexte de CSS, spécifiquement. Nœud parent, qui est une référence à ce qui est juste au-dessus de moi dans les DOM. Et nœuds enfants, qui est un référence à ce qui est en dessous de moi. Et nous avons vu beaucoup de cette juste en regardant à travers. Les noeuds enfants, voilà comment nous sommes arrivés plus en plus bas dans l'arbre. 

Attributs, qui est juste un tableau des attributs de l'élément HTML. Donc, un exemple d'attributs pourrait être si vous avez une balise d'image, il a généralement un attribut de source, peut-être d'une hauteur et une largeur attribut. Et pour que serait juste un tableau de tous les attributs associés avec cet élément HTML. 

Le style est un autre qui ne représenter le CSS style d'un élément particulier. Et plus tard dans ce vidéo, nous allons spécifiquement le style de levier pour faire un couple des modifications de notre site web. Donc, ce sont certaines propriétés. 

Et il ya aussi certains méthodes que nous pouvons utiliser pour aussi plus rapidement peut-être isoler éléments de l'objet document. Peut-être, le plus polyvalent d'entre eux étant getElementById. Donc je pourrais dire quelque chose comme, parce rappelez-vous qu'il est une méthode du Document Objet, document.getElementById. 

Et à l'intérieur de ces parenthèses, spécifiez un élément HTML avec un ID particulier attribue que je l'ai déjà fixer, et je vais immédiatement aller à droite à cet élément du site Web en général. Donc, je ne dois peut-être percer à travers tous les simple couche. Je peux juste utiliser cette méthode pour trouver, comme une sorte de recherche de chaleur missiles, droit? Il va juste et trouve exactement ce qu'il cherche. 

GetElementsByTagName est très similaire dans l'esprit. Peut-être que ce serait trouver tous les les balises gras ou toutes les balises p et me donner un tableau de tout que je pouvais ensuite travailler avec. appendChild ajoute quelque chose un niveau plus bas dans l'arbre. 

Donc, je peux ajouter une toute nouvelle élément inférieur d'un niveau. Ou je peux supprimer un élément qui est un niveau inférieur ainsi si je veux pour supprimer quelque chose de ma page web. Maintenant, une note de codage rapide et un rapide maux de tête Sauvegarde de la remarque, je l'espère. 

getElementById-- D est en minuscules. Je ne peux pas vous dire combien de fois je dois utilisé getElementById et capitalisés la d il. Parce qu'il est vraiment commun. Si nous écrivons le mot ID, il est habituellement I majuscule capitale D. Et mon code ne fonctionne tout simplement pas. Et je ne peux pas comprendre pourquoi. Ceci est vraiment, vraiment, vraiment bug commun que tout le monde fait, même les experts qui ont fait cela pour toujours. Donc juste être conscient, getElementById, que d est minuscule. Et nous espérons, qui vous fait gagner plusieurs minutes à moins de chagrin. 

Alors qu'est-ce que tout cela nous dit? Nous avons ces méthodes. Nous avons ces propriétés. Maintenant, si nous partons de document document. que ce soit, nous pouvons maintenant obtenir à tout seule pièce de notre page Web que nous voulons l'aide de JavaScript tout en appelant ces méthodes et en tirant parti des propriétés que l'on retrouve à divers endroits. 

Cela peut devenir verbeux, ce document.getElementById, peut-être avoir un nom de tag de long, peut-être vous faire plus d'appels plus tard. Les choses peuvent devenir un peu verbeux. Et en tant que programmeurs, comme vous l'avez probablement vu dans beaucoup de ces vidéos, nous ne aimons les choses verbeuses. 

Nous aimons être en mesure de faire les choses rapidement. Donc, nous aimerions une plus de manière concise pour dire quelque chose. Donc, ce genre de conduit à la notion de quelque chose appelé jQuery. Maintenant jQuery est pas JavaScript. Il ne fait pas partie de JavaScript. 

Il est une bibliothèque qui a été écrit par certains programmeurs JavaScript Il ya environ 10 ans. Et son objectif est de simplifier ce ce qui est appelé script côté client, qui est essentiellement ce que nous étions juste parler avec des manipulations DOM. Et si je voulais modifier le couleur de ma page web de fond, peut-être a Div spécifique. 

Ici, je suis apparemment obtenir ElementById colorDiv. Et je tiens à mettre sa couleur de fond. Si je suis juste en utilisant JavaScript pur utilisant le Document Object Model, ça fait beaucoup de choses, non? document.getElementById colorDiv.style.backgroundColor = vert. 

Ouf. Ce fut beaucoup à dire. Il ya beaucoup à saisir, aussi. Et donc dans jQuery, nous pouvons peut-être dire ce un peu plus concise. Le compromis étant il est peut-être un peu peu plus cryptique tout d'un coup, droit? 

Au moins long est un peu plus explicatifs à ce que nous faisons. Ce signe de dollar, entre parenthèses, apostrophe, hachage, colorDiv, non? Qu'est-ce que cela veut dire? Eh bien, voilà fondamentalement juste document.getElementById colorDiv. 

Mais il est ce genre de raccourci façon de le faire en utilisant jQuery. Prenons juste un coup d'oeil maintenant à un couple de différentes façons que je pourrait en fait utiliser ce Document Object Modèle de manipuler des morceaux de mon site. En particulier, nous allons de travailler sur la manipulation la couleur d'un particulier Div, colorDiv, sur une page Web. Donc, nous allons jeter un coup d'oeil. Bien. Donc, je suis sur une page. Il a appelé test.html lorsque vous téléchargez si vous voulez bricoler avec cela. Et je ai un tas de boutons sur cette page. Et je dis fonctions individuelles pour la couleur de fond, violet, vert, orange, rouge, bleu, une seule fonction pour la couleur de fond, gestionnaire d'événements pour la couleur de fond, et l'utilisation de jQuery. Qu'est-ce que je parle quand je fais cela? Donc, nous avons vu les boutons. Maintenant, nous allons jeter un oeil à une partie du code source ici. Nous allons commencer avec test.html. Donc fonctions individuelles pour le fond la couleur est ce que je l'ai tapé ici. Permettez-moi de faire défiler un peu. 

Et vous remarquerez que je ont défini ces boutons à-dire lorsque ce bouton est cliqué, appeler la fonction devient mauve. Lorsque ce bouton est cliquez plutôt, appeler la fonction devient vert, virer à l'orange, au rouge, virer au bleu. Vous pouvez probablement le deviner que cette est peut-être pas le meilleur design logique, non? 

Ce serait bien si je pouvais avoir une approche plus générale. Eh bien, d'abord, nous allons jeter un oeil à ce que ces cinq fonctions sont document.getElementById colorDiv.style.background = violet, vert, orange, rouge, et bleu, respectivement. Donc, pas particulièrement la meilleure conception. 

La prochaine série de boutons Je l'ai est que je l'ai écrite une fonction unique appelée changer de couleur qui, apparemment, accepte une chaîne comme argument. Donc, cela est un peu mieux. Violet, vert, orange, rouge, bleu est à présent un argument. Donc, je l'ai écrit plus générale cas fonction JavaScript, ce qui pourrait ressembler à ceci. Je suis de passage à. Cette couleur de changement de fonction est attend un argument appelé couleur. Et je dis régler la couleur de fond à la couleur. Alors, voici ce que je représente ai ici. Voilà donc un peu mieux. 

Mais je pourrais être capable de faire mieux que cela. Si nous descendons de prendre un coup d'oeil à la situation de gestionnaire d'événement, maintenant tous ces appels se ressemblent. Si vous vous souvenez de notre discussion sur les gestionnaires d'événements, Je peux obtenir des informations sur lequel des ces boutons a été cliqué et l'utiliser. 

Et donc dans event.JavaScript, je l'ai écrite événement changement de couleur, qui devinera quel bouton a été cliqué. Voilà la ligne d'objet de déclenchement. Et puis ici, ça devient vraiment verbeuse. Mais ce que je fais est que je suis la mise en arrière-plan couleur à triggerObject inner.HTML. Voilà le texte entre les balises de bouton. 

Et puis je dois apparemment de mettre en minuscules. Et voilà comment je peux convertir un ensemble chaîne en minuscules en utilisant JavaScript cette méthode en minuscules. Parce que quand je mets une couleur, comme je suis en train de faire ici, la couleur doit être en minuscules. 

Mais sur le bouton que je devais, si nous prenons un autre regard, Notez que le texte il ya écrit avec un P majuscule pour le pourpre. Et puis à la très en bas ici, je apparemment essayer de le faire en utilisant jQuery ainsi. Et dans ce cas, je ne suis pas fait appel d'une fonction à tous. Je viens de dire la classe que je suis en utilisant pour ce bouton est un bouton jQ. C'est tout. 

Alors, comment ne jQuery sais ce que je fais? Eh bien, cela est l'un des avantages réduire les inconvénients de jQuery. Il peut me permettre de faire les choses de façon très concise, mais peut-être pas intuitivement. Peut-être que ceux des trois autres font une peu plus de sens ce que je fais. Ici, cependant, ce qui se passe? 

Apparemment, créant une fonction anonyme chaque fois que les charges mon document est prête, document.ready, une fonction qui va se passer. En gros, quand un document est prêt? Il est quand ma page est chargée. 

Donc, dès que ma page est chargé, la la fonction suivante est toujours prêt. Il dit, si un objet de type jQButton, ou si jQButton de classe a été cliqué, exécuter cette fonction. Alors, voici deux des fonctions anonymes, une défini à l'intérieur de l'autre. 

Donc toute ma contexte ici est si loin ma page quand il le charge appelle cette fonction. Et cette fonction est en attente pour un bouton à cliquer. Et quand un bouton est cliqué, jQ touche spécifiquement est cliqué, il appelle cette autre fonction, qui va pour définir l'arrière-plan couleur de colorDiv être quel que soit le texte est entre les balises. 

Ceci est la notion de quel bouton a été cliqué. Mais sinon, ce est une sorte de comportement semblable à un événement. Il est juste la même manière que je exprimerait cela dans jQuery. Encore une fois, il est probablement une beaucoup plus intimidant. Il est pas aussi clair que quelque chose comme event.js, ce qui est peut-être un peu plus bavard, mais un peu moins intimidant. 

Mais si nous sautons en arrière sur mon navigateur fenêtre, si je commence clicking-- bien, cela a changé au violet. Ceci est vert en utilisant la méthode de la chaîne. Ceci est d'orange en utilisant le gestionnaire d'événement. 

Ceci est rouge en utilisant jQuery, non? Ils comportent tous exactement la même. Ils font simplement à l'aide de différents approches pour résoudre le problème. Il ya beaucoup plus à jQuery alors nous sommes certainement allons parler dans cette vidéo. Mais si vous voulez en savoir plus, vous pouvez aller à la sorte de la documentation jQuery et apprendre un peu plus sur cette bibliothèque très flexible, ce qui est idéal pour faire côté client script tel que ce que nous faisions pour manipuler le look et se sentir de notre page Web avec le Document Object Model. Je suis Doug Lloyd. Ceci est CS50.