Votre guide dans les plaines du far-web

Formation développeur web

« Donne un poisson à un homme, tu le nourris pour un jour. Apprends-lui à pêcher, tu le nourris pour toujours. » Lao Tseu

Javascript et le navigateur : BOM et DOM

Ce cours est gratuit

Accéder au cours
  1. Présentation
  2. Le BOM : Browser Object Model
  3. Le DOM : Document Object Model
  4. Sélectionner des éléments
  5. Sélecteurs standards
  6. querySelector : sélectionner via la logique CSS
  7. Faire un helper de sélection
  8. Lire les propriétés
  9. Modifier les propriétés
  10. Créer de nouveaux éléments
  11. Ajouter des éléments dans d'autres éléments
  12. Supprimer des éléments
  13. Exercices

Présentation

Mis à jour le

go !

Le BOM : Browser Object Model

Mis à jour le

Quand 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 ~~

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 ~~

Sélectionner des éléments

Mis à jour le

Afin 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. 

Important…
~~ Fin de l'extrait ~~

Sélecteurs standards

Mis à jour le

Ces 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.


… ~~ Fin de l'extrait ~~

querySelector : sélectionner via la logique CSS

Mis à jour le

Ces 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. 

Revoir le…
~~ Fin de l'extrait ~~

Faire un helper de sélection

Mis à jour le

L'é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é. 

Ceci est à titre d'exemple, juste pour vous montrer des possibilités...


function select(selector) {
let element = document.querySelectorAll(selector);
if…
~~ Fin de l'extrait ~~

Lire les propriétés

Mis à jour le

Comme 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 ~~

Modifier les propriétés

Mis à jour le

De 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
<meta charset="UTF-8" />
<h1>Les langages que je connais :</h1>
<input…
~~ Fin de l'extrait ~~

Créer de nouveaux éléments

Mis à jour le

Vous 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…
~~ Fin de l'extrait ~~

Ajouter des éléments dans d'autres éléments

Mis à jour le

Nous 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 :

<meta charset="UTF-8" />
<body>
<h1>Les langages que je connais :</h1>
<ul id="listeDeLangages">
<!-- VIDE -->
</ul>
</body>
<script>
let languages = ['HTML',…
~~ Fin de l'extrait ~~

Supprimer des éléments

Mis à jour le

remove, removeChild(), etc...

Exercices

Mis à jour le