Tot nu toe hebben we gesproken over de reden waarom domineren appellation is spannend.
Waarom zou u de zorg.
De verschillende sites die het gebruiken van de eindeloze mogelijkheden van de spellen alle spannende dingen.
Maar we hebben nog steeds niet echt gesproken over wat de DOM eigenlijk is.
Dus we gaan om dat te doen in deze video om te beginnen laten we definiëren.
Dio am.
Dom staat voor Document Object Model.
De betekenis van deze drie woorden zal een beetje meer zin te maken in de komende slides.
Maar laten we beginnen met het definiëren van het op een hoger niveau.
De Dom is de interface tussen uw javascript en uw leeftijd.
Tim Mounty SS Het is eigenlijk een heleboel speciale javascript objecten javascript methoden functies die we kunnen gebruiken om te communiceren met onze H.M.S. beoordelen we dingen kunnen veranderen we kunnen toevoegen elementen verwijderen elementen veranderen kleuren animeren dingen allerlei spannende manieren om te communiceren met hun H.M.S. evalueren.
Op deze dia praat ik een beetje over hoe de DOM is opgebouwd en waarom zij het document object model heet.
Dus toen we laden van een e-mail pagina het lijkt erop dat dit in een browser en het is gewoon een aantal eenvoudige gescherpt hem uit dus je moet een titel en een label met mijn koppeling als de tekst en een H-1 met mijn kop als de tekst en dat is het.
Dus toen ik open deze in de browser zie ik dit maar achter de schermen van de DOM wordt gemaakt.
Het is gemaakt van dit recht hier.
Dus wat ik bedoel is dat dit tijdperk Tim wordt omgezet in een bos van JavaScript-objecten.
Elk object modellen van deze elementen.
Dat is waar we het model voorwerp van document object model.
Dus weer gewoon te herhalen we laden elk team in de browser geeft de browser dingen om ons als dit.
Maar achter de schermen het eigenlijk maakt dit model van ieder afzonderlijk element met een JavaScript-object, net als we het voorbeeld van mijn hond Rusty met behulp van een javascript-object.
Hij had een eigenschap naam en een ander ras en leeftijd.
Deze objecten zijn fundamenteel hetzelfde behalve de inhoud verschilt.
Ze gaan dingen zoals het type van de tag brontekst attributen kleur achtergrondkleur tekstgrootte allemaal verschillende eigenschappen die al zijn opgenomen binnenkant van elk object.
We zijn zeker van plan om veel tijd werken met deze objecten, zodat de details zijn niet van belang door te brengen.
Alles wat ik hier wil benadrukken is dat we laden op elk tim L ..
Het wordt weergegeven in de browser en de browser neemt dat Tim L en neemt elk element en verandert het in een object.
Dus dat betrekking heeft op het model voorwerp.
Hoe zit het met het document.
Zo kunt u hier zien is dit een klein diagram van de aard van de structuur die we krijgen van de DOM het hoogste niveau object dat alles is opgenomen binnenkant van onze gehele model van de H.T. mounseers ons wordt het document genoemd.
Dus we kunnen gaan naar een webpagina op alle.
Dus ik heb Google open en ik ga gewoon te typen in de con. Het woord document.
En als ik dat doe, dat ik dit grote ding dat terugkomt deze grote object te krijgen.
Behalve dat het er niet uitziet als een javascript-object.
Het is niet echt wat we zouden verwachten.
Dat komt omdat de browser is een soort van het verbergen van mij.
Wat het eigenlijk toont me is met de HQ mail eruit ziet als tekst, maar het is niet toont me de daadwerkelijke objecten die zijn gemodelleerd naar deze Timo.
Dus om te krijgen die we nodig hebben om te gebruiken annuleren dot D I R, die is een andere methode op de console object en we gaan dat D.I.R. annuleren document alles wat dit zal doen is uit te printen het gehele document object in dit object syntaxis die we kennen.
Zodat je kunt zien is het gewoon een regelmatige object, net als degene die we op onze eigen geschreven heb net hetzelfde als Rusty de hond object behalve dat er is nog veel meer informatie vindt u hier.
Dus we hebben dingen zoals lettertypen of afbeeldingen banden maar we hebben ook dingen als lichaam en dit lichaam staat voor het hele lichaam.
Dus elk element dat je ziet hier is de binnenkant van het lichaam.
Dus als ik het lichaam open te stellen zul je zien dat we een hele hoop andere eigenschappen, waaronder een zogenaamde knooppunten van het kind.
Dus kind nodes laat ons zien dat er een div is er een script-tag en er is een andere div binnenkant van het lichaam.
En als we naar elementen die we zouden zien.
Dus hier is het lichaam binnenkant van het lichaam.
We hebben die eerste div hebben we een script-tag en we hebben de tweede div.
En wat zeggen we open te stellen dat derde div zouden we verwachten nog twee divs binnen te zien of dat tweede div.
En als we over te gaan naar de consul en we kijken naar de tweede div en dan kijken we naar kind nodes zien we OK zijn er twee meer divs Dus zoals je kunt zien dat de dom krijgt echt enorm echt snel.
Er zijn honderden en honderden verschillende eigenschappen en methoden en de verschillende knooppunten en dit hele gekke structuur van geneste objecten.
Het is gewoon zo veel spullen.
Het is een van die momenten dat ik aan het begin van deze klasse waar je naartoe gaat te hebben om comfortabel niet alles te weten genoemd.
Ik kan u nu al zeggen dat de meeste ontwikkelaars niet de helft van de woningen hier niet kennen.
Ik zou zeggen dat ze werken met ongeveer 10 procent bij de meeste.
Er is zo veel meer dingen hier dat we bijna nooit hoeven te gebruiken.
En dan ergens langs de lijn er iets gebeurt en we moeten iets wat we nog nooit eerder gedaan.
We google het en we zien oh goed dus dat is wat de niet uitgeharde verandering pand is voor.
Ik had geen idee.
En dat is echt wat het is om een ​​ontwikkelaar.
Tot nu javascript we hebben gewerkt in een klein beetje van een kleine gecontroleerde wereld waarin we leren over functies en objecten leren we over variabelen.
En er is een eindig aantal manieren om dingen te doen en er is een zeer specifieke subset van de kennis die je gewoon moet weten met de DOM.
Nu hebben we deze enorme enorme ecosysteem om in te werken zo veel eigenschappen.
Dus ik wil gewoon herhalen er zo veel hier.
We gaan concentreren op de belangrijke stukken, maar het doel is niet om te onthouden.
Het doel is ieder afzonderlijk object niet onder de knie.
Opnieuw 10 procent bij de meeste is alles wat je nodig hebt om een ​​bevoegde web ontwikkelaar.
OK dus laten we teruggaan en ik wil gewoon te gaan over dit nog een keer.
Samenvatten wat we over gesproken.
Dus de DOM staat voor Document Object Model.
Het is de interface tussen uw javascript en uw H.M.S ..
Het is hoe we onze javascript kunt gebruiken om dingen interactief te maken.
Het is hoe we dingen doen, zoals voeg een nieuw element toe aan de pagina of wijzig de ref attribuut van een link of verander de achtergrondafbeelding op ons lichaam en hoe we de waarde van een vorm kan krijgen of kunnen we op maat validaties en animaties en interactieve doen elementen waar u klikt in een code loopt al deze verschillende mogelijkheden allemaal voort uit het feit dat het document object model verbindt onze javascript met hun HMS toegang .
Dus het object model deel van document object model vertelt ons dat het een stelletje javascript objecten die het modelleren van elementen in onze H.T. bedrag.
Dus we hebben een ATAC hier hebben we eindigen met een voorwerp hier vertegenwoordigt dat ATEC.
En dan eindigen we met een ander object dat deze H1-tag die wij zien hier.
Ten slotte is het heet het document object model omdat alles leeft binnenkant van die ene object met de naam van het document.
Het is de wortel knooppunt waar alles anders leeft binnenkant van.
Dus de volgende video gaan we beginnen met het schrijven wat code.