Dus nu hebben we besproken waarom je moet de zorg over de Domm waarom het is spannend.
En we hebben ook gesproken over wat het is wat het document object model betekent.
Het feit dat het is gewoon een model van elk element op een pagina met behulp van JavaScript-objecten het hoogste niveau object wordt het document genoemd.
Dus dat is geweldig, maar we hebben niet gezien hoe je nog niets doen.
Dus in deze video ga ik het proces van het manipuleren van de dingen met behulp van de hond kort voor te stellen.
Dus ik heb door het hele proces gekookt om twee zoekwoorden te selecteren en te manipuleren.
Dus net als zien beoordelen waar we een selector schrijven om iets met de klas van bijzondere of alle h degenen of alle image-tags selecteren we elementen en dan passen we stijlen zoals achtergrondkleur paarse grens één pixel stevige zwarte met javascript en Dom en de bevolking te selecteren.
We selecteren ook elementen, hoewel we het op een heel andere manier.
We schrijven javascript code die verder gaat en selecteert elementen en keert ze terug naar ons en dan veranderen we advertenties op hen, zodat we iets te kiezen en vervolgens te manipuleren we het.
Dus in de komende paar slides Ik ga om te laten zien hoe hij dit H-1 mijn kop zou kunnen kiezen, en hoe we kunnen veranderen in roze zijn.
Ik heb gezegd dit een stuk in de laatste paar video's, maar ik wil niet dat je te concentreren op de syntax zo veel als de concepten.
De volgende paar video's zal krijgen in de Nitty Gritty van het selecteren en manipuleren.
Dit is slechts een overzicht van hoe het werkt.
Dus op deze dia Ik ga om te laten zien hoe u dat H1 zou kunnen kiezen, net als met C.
Er is een heleboel verschillende manieren van het selecteren van een bepaald element.
In dit geval is deze regel code document dot queries selector H-1 gaat naar de H-1 selecteren op deze pagina.
Dus ik heb hier gemarkeerd met dit groene doos, zodat u kunt zien wat er wordt gekozen.
Dus nogmaals var H-1 Dit is zomaar een variabele die we willen gelijk document die vraag selector 8: 1.
Dus we veel meer tijd doorbrengen met queries selector en bepalen wat het is en hoe het werkt.
Maar retourneert een object dat H1 vertegenwoordigt en het bespaart dat de H-1 variabele.
Dus dat is de selectie proces.
Het volgende deel is het zo te manipuleren om het te manipuleren kan ik allerlei dingen en alles wat ik ga doen hier doen is het veranderen van de kleur roze te zijn.
Dus we gewoon schrijven H-1 dat is onze variabele die het object dat de H-1 dot stijl heeft.
Dat is een eigenschap en die eigenschap stijl is een groot object met een heleboel andere eigenschappen en de kleur is een van hen.
Dus H-1 doet stijl, maar de kleur is gelijk aan roze.
En dan is dat alles wat we moeten doen.
En de browser ziet dat ik dat veranderen woning aan roze en het automatisch bijgewerkt wat wordt weergegeven door te draaien roze.
Dus we gekozen hier en dan gemanipuleerd we.
Dus ik heb nog een voorbeeld hier.
Het is een beetje ingewikkelder.
We zijn bezig met een zeer eenvoudige animatie waarin elke seconde veranderen we de achtergrondkleur van het lichaam tussen blauw en wit.
Dus wat moeten we eerst doen is het selecteren van het lichaam en vervolgens manipuleren om zo te selecteren.
Ik heb een andere lijn met behulp document dump vraag selector die weer gaan we om terug te komen in de volgende video document die vraag selector lichaam.
Dus dat geeft me het lichaam element waar het in feite geeft me het object representatie van het model van het dat ik op te slaan in het lichaam variabele.
Dan moet ik deze variabele is blauw dat is gewoon een boolean die ik ga gebruiken omdat ik moet weten als ik ga van blauw naar wit of wit naar blauw.
het begint zo uit als vals en ik ben met behulp van set interval die we een paar jaar geleden bedekt.
Als je niet meer weet hoe het werkt het in principe heeft twee argumenten.
De eerste is een code een functie uitgevoerd en de tweede is een nummer of een tijd in milliseconden.
Dus het duurt dit aantal milliseconden dat is duizend of een seconde en elke één seconde zal deze code noemen.
Dus wat deze code doet is het controleert of de achtergrond is op dit moment blauw als het is.
We veranderen het dan wit te zijn als de achtergrond is wit dan veranderen wij het blauw te zijn.
Dus om een ​​kijkje we nemen onze wanneer is blauw.
Dus dat is gewoon een variabele.
Het begint als vals.
Dus de allereerste keer dat de pagina laadt de achtergrond is wit is blauw is vals.
Dus deze lijn niet lopen, maar deze doet anders lichaam doet stijl donkere achtergrond is gelijk aan deze hexadecimale kleur die is blauw.
Dus dat verandert de achtergrond van blauw zijn.
Dus toen we verander gewoon onze blauw is variabel van false in true.
En dat is een mooi soort manier om het te doen met het uitroepteken of het niet operator.
Dus dan is deze code wordt uitgevoerd volgende keer weer blauw is nu al waar is.
Dus deze code wordt uitgevoerd lichaam doet stijl, maar de achtergrond is gelijk aan wit.
Dus nu zijn we weer terug naar wit te gaan.
Dit betekent niet lopen en dan veranderen we blauw terug naar vals.
En dat blijft gaan voor altijd.
Dus niet dat je ooit iets zo storend als een achtergrondkleur die elke seconde verandert zou willen.
Maar dat wil gaan om te laten zien dat we de dingen complexer is dan alleen het veranderen van een H1 van zwart tot roze kunnen doen.
Dus om dit alles tot twee woorden wrap selecteer manipuleren we selecteren We grijpen sommige objecten die elementen te vertegenwoordigen en dan is er iets voor hen doen we.
Zodat de rest van dit toestel zal worden gericht op verschillende manieren om te selecteren en vervolgens op verschillende manieren te manipuleren.
Dus de volgende video gaat diep duiken in de verschillende manieren van het selecteren van elementen met behulp van javascript.
We hebben een queery selector gezien al.