Alors maintenant, nous avons discuté pourquoi vous devriez vous soucier du Domm pourquoi il est passionnant.
Et nous avons également parlé de ce que signifie le modèle d'objet document.
Le fait qu'il est juste un modèle de chaque élément sur une page en utilisant des objets javascript l'objet de niveau supérieur est appelé le document.
Donc, c'est bien, mais nous n'avons pas encore vu comment faire quoi que ce soit.
Donc, dans cette vidéo, je vais brièvement présenter le processus de manipulation des choses en utilisant le chien.
J'ai donc bouilli tout le processus à deux mots-clés sélectionner et manipuler.
Donc, juste comme voir évaluer où nous écrivons un sélecteur pour sélectionner quelque chose avec la classe de spécial ou tous h ou toutes les étiquettes d'image que nous sélectionnons des éléments et ensuite nous appliquons des styles comme la couleur de fond violet frontière un pixel noir solide avec javascript et Dom et la population.
Nous sélectionnons également des éléments bien que nous le fassions d'une manière très différente.
Nous écrivons du code javascript qui va et sélectionne les éléments et les retourne à nous et puis nous changeons les propriétés sur eux afin que nous sélectionnons quelque chose et ensuite nous le manipuler.
Donc, dans les prochaines diapositives je vais vous montrer comment il pourrait sélectionner ce H-1 mon en-tête et comment nous pourrions le changer pour être rose.
Je l'ai dit beaucoup dans les dernières vidéos, mais je ne veux pas que vous vous concentriez sur la syntaxe autant que les concepts.
Les prochaines vidéos vont se retrouver dans le fond de la sélection et de la manipulation.
Ceci est juste un aperçu de la façon dont il fonctionne.
Donc, sur cette diapositive je vais montrer comment vous pouvez choisir que H1 tout comme avec C.
Il ya beaucoup de façons différentes de sélectionner un élément donné.
Dans ce cas, cette ligne de code document point requêtes sélecteur H-1 va sélectionner le H-1 sur cette page.
Donc j'ai mis en évidence ici avec cette boîte verte pour que vous puissiez voir ce qui est sélectionné.
Donc à nouveau var H-1 c'est n'importe quelle variable que nous voulons document égaux que le sélecteur de requête 8: 1.
Donc, nous allons passer beaucoup plus de temps avec le sélecteur de requêtes et de définir ce qu'il est et comment il fonctionne.
Mais il retourne un objet qui représente ce H1 et il enregistre que dans la variable H-1.
C'est donc le processus de sélection.
La prochaine partie est de la manipuler afin de le manipuler je peux faire toutes sortes de choses et tout ce que je vais faire ici est de changer la couleur pour être rose.
Alors nous écrivons simplement H-1 qui est notre variable qui a l'objet représentant le style de point H-1.
C'est une propriété et que la propriété de style est un objet énorme avec un tas d'autres propriétés et la couleur est l'un d'entre eux.
Ainsi H-1 fait le style mais la couleur est égale à rose.
Et puis c'est tout ce que nous avons à faire.
Et le navigateur voit que je changer cette propriété à rose et il met automatiquement à jour ce qui est affiché en le tournant rose.
Nous avons donc choisi ici et puis nous avons manipulé.
J'ai donc un autre exemple.
C'est un peu plus compliqué.
Nous faisons une animation très simple où chaque seconde nous changeons la couleur de fond du corps entre le bleu et le blanc.
Donc, ce que nous devons faire en premier est de sélectionner le corps et puis de le manipuler afin de le sélectionner.
J'ai une autre ligne en utilisant le dump de document sélecteur de requête que nous allons revenir à nouveau dans le prochain document vidéo que le corps du sélecteur de requête.
Donc cela me donne l'élément de corps où il me donne réellement la représentation d'objet le modèle de celui que je sauve dans la variable de corps.
Ensuite, j'ai cette variable est le bleu qui est juste un booléen que je vais utiliser parce que je dois savoir si je vais du bleu au blanc ou blanc au bleu.
Donc, il commence comme faux et puis je suis en utilisant l'intervalle qui nous avons couvert il ya quelques années.
Si vous ne vous rappelez pas comment cela fonctionne, il prend essentiellement deux arguments.
Le premier est un code pour exécuter une fonction et le second est un nombre ou un temps en millisecondes.
Donc, il prend ce nombre de millisecondes qui est mille ou une seconde et chaque seconde il appellera ce code.
Donc, ce que ce code fait, il vérifie si le fond est actuellement bleu si elle est.
Nous le changeons alors pour être blanc si le fond est blanc puis nous le changeons pour être bleu.
Donc, pour regarder de plus près, nous avons notre si est bleu.
Donc c'est juste variable.
Il commence comme faux.
Ainsi, la première fois que la page charge l'arrière-plan est blanc, le bleu est faux.
Donc cette ligne ne s'exécute pas, mais celle-ci ne fait pas le même corps de fond sombre foncé égale à cette couleur hexadécimale qui est bleu.
Donc cela change l'arrière-plan pour être bleu.
Alors nous changeons simplement notre variable bleue de false à true.
Et c'est une belle façon de le faire avec le point d'exclamation ou l'opérateur non.
Donc, ce code s'exécute à nouveau la prochaine fois est bleu est déjà vrai.
Donc, ce code ne courir le corps ne style, mais l'arrière-plan est égal à blanc.
Maintenant, nous allons revenir au blanc.
Ceci ne fonctionne pas et alors nous changeons le bleu de nouveau à faux.
Et ça continue à jamais.
Donc, pas que vous voudriez quelque chose de distrayant comme une couleur de fond qui change à chaque seconde.
Mais cela va montrer que nous pouvons faire des choses plus complexes que simplement changer un H1 de noir à rose.
Donc, pour envelopper tout cela jusqu'à deux mots sélectionner manipuler nous sélectionnons Nous saisissons quelques objets qui représentent des éléments et ensuite nous leur faisons quelque chose.
Donc, le reste de cette unité va être axée sur les différentes façons de sélectionner et puis différentes manières de manipuler.
Donc, la prochaine vidéo va plonger profondément dans les différentes façons de sélectionner des éléments en utilisant javascript.
Nous avons vu un sélecteur déjà fausses.