Javascript et le navigateur : BOM et DOM
Ce cours est payant
S'inscrire- Présentation
- Le BOM : Browser Object Model
- Le DOM : Document Object Model
- Sélectionner des éléments
- Sélecteurs standards
- querySelector : sélectionner via la logique CSS
- Faire un helper de sélection
- Lire les propriétés
- Modifier les propriétés
- Créer de nouveaux éléments
- Ajouter des éléments dans d'autres éléments
- Supprimer des éléments
- Exercices
Présentation
Mis à jour lego !
Vous devez être inscris pour voir le contenu complet de cette section (-10 mots supplémentaires ).
Le BOM : Browser Object Model
Mis à jour leQuand vous programmez en JavaScript, vous avez accès à de nombreuses données contenues dans votre navigateur. Il y a évidemment les éléments de votre page web (texte, image, etc...), mais avant, il y a quelques éléments qui sont plutôt rattachés au navigateur qu'a la page elle même.
(image visible sur la plateforme de formation)
~~ Fin de l'extrait ~~Vous devez être inscris pour voir le contenu complet de cette section (745 mots supplémentaires ).
Le DOM : Document Object Model
Mis à jour le(image visible sur la plateforme de formation)
Comme nous l'avons vu sur les cours précédents, quand un navigateur reçoit une page HTML - qui est reçue sous forme de simple chaîne de caractère, pour que les choses soient claires - il ne l'affiche pas "telle quelle". Il décortique…
~~ Fin de l'extrait ~~Vous devez être inscris pour voir le contenu complet de cette section (484 mots supplémentaires ).
Sélectionner des éléments
Mis à jour leAfin de pouvoir manipuler les éléments du DOM, il faut d'abord pouvoir les sélectionner. Un peu comme en CSS, on va écrire des règles de sélections pour cibler des éléments par classe, id, etc... puis on va pouvoir les traiter dans notre programme Javascript.
Vous devez être inscris pour voir le contenu complet de cette section (122 mots supplémentaires ).
Sélecteurs standards
Mis à jour leCes trois méthodes
sont les plus optimisées pour accéder au DOM. En revanche elles ne
sont pas très pratiques car elles manquent de souplesse en ce qui
concerne la méthode de sélection. Nous verrons d'autres méthodes,
plus pratiques, juste après.
Vous devez être inscris pour voir le contenu complet de cette section (637 mots supplémentaires ).
querySelector : sélectionner via la logique CSS
Mis à jour leCes deux méthodes sont bien pratiques, car vous n'avez plus à dire si vous souhaitez sélectionner un élément par son id, sa classe, ou son type de balise. Vous allez utiliser les règles de sélection CSS pour cela.
Vous devez être inscris pour voir le contenu complet de cette section (662 mots supplémentaires ).
Faire un helper de sélection
Mis à jour leL'écriture des méthodes de sélection peut parfois être fastidieuse et répétitives, vous pouvez donc écrire vos propres fonctions utilitaires pour rendre l'usage de ces fonctionnalités plus aisé.
Vous devez être inscris pour voir le contenu complet de cette section (127 mots supplémentaires ).
Lire les propriétés
Mis à jour leComme nous l'avons vu dans les exemples précédents, on peut accéder aux différentes propriétés d'une balise. Et il y en a de nombreuses... Par exemple, sur une balise simple, la propriété .innerHTML permet de lire le contenu "brut" d'un élément. Ce sera soit…
~~ Fin de l'extrait ~~Vous devez être inscris pour voir le contenu complet de cette section (298 mots supplémentaires ).
Modifier les propriétés
Mis à jour leDe la même manière on peut modifier les propriétés des éléments. Dans l'exemple ci-dessous, on va modifier la couleur du texte via la propriété style et la sous-propriété color, comme en CSS.
Modifier les propriétés CSS inline
Vous devez être inscris pour voir le contenu complet de cette section (894 mots supplémentaires ).
Créer de nouveaux éléments
Mis à jour leVous pouvez créer des balises HTML de toute pièces à l'aide de JavaScript. En utilisant les méthodes adaptées, vous allez pouvoir ajouter des éléments à votre DOM, qui ne sont initialement pas présents dans le HTML.
Voici quelques méthodes :
- .createElement(x) : retourne un nouvel élément de…
Vous devez être inscris pour voir le contenu complet de cette section (422 mots supplémentaires ).
Ajouter des éléments dans d'autres éléments
Mis à jour leNous venons de voir comment ajouter des éléments au <body>, mais vous pouvez ajouter des éléments à n'importe quel autre élément en réalité.
Exemple sur une liste non-oronnée :
Vous devez être inscris pour voir le contenu complet de cette section (116 mots supplémentaires ).
Supprimer des éléments
Mis à jour leremove, removeChild(), etc...
Vous devez être inscris pour voir le contenu complet de cette section (-10 mots supplémentaires ).
Exercices
Mis à jour leVous devez être inscris pour voir le contenu complet de cette section (-10 mots supplémentaires + 7 exercices ).