Java Script

< DOM >

Sommaire :

1. intro

2. sélectionner un élément

3. modifier un élément

Avant de parler du DOM, parlons d'abord du navigateur

Anatomie de Chrome

moteur de rendu

Blink

moteur de rendu

V8 - (interpréteur)

Comment Chrome affiche une page web ?

DOM

Document Object Model

Le document ici est notre index.html.

Le DOM est une API (Application Programming Interfaces) qui est fourni par le navigateur.

Le DOM est une représentation des éléments HTML qui composent notre page web sous la forme d'un objet JS.

Comment Chrome affiche une page web ?

DOM

CSSOM

Le CSSOM signifie :

CSS Object Model

Le CSSOM est la représentation du contenu de la feuille de style sous la forme d'un objet JS.

Comment Chrome affiche une page web ?

DOM

CSSOM

Comment Chrome affiche une page web ?

DOM

CSSOM

Comment Chrome affiche une page web ?

DOM

CSSOM

Pour afficher graphiquement notre site internet, ces deux éléments vont être combinés dans un arbre d'affichage.

Ce dernier va nous permettre de créer le rendu du site internet et de venir "peindre" les pixels.

arbre

d'affichage

Que contient le DOM ?

Du statique au dynamique !

Nous allons nous servir de notre script afin de modifier le DOM et CSSDOM via le moteur JS, qui lui a accès à ces deux éléments.

DOM

CSSOM

Comment modifier le DOM ?

DOM

//variable globale
document

Démo

document.querySelector('h1').innerHTML = 'Mon nouveau titre';

Sélectionner un élément

Les méthodes

querySelector()

et

querySelectorAll()

Ces méthodes vont nous permettre d’accéder à des éléments HTML correspondant à un certain sélecteur CSS, que ce soit un id, une class, un type d’élément, un attribut ou autre.

Ces deux méthodes vont donc prendre un sélecteur CSS en argument. On peut évidemment préciser une suite de sélecteurs pour cibler un élément précis.

querySelector() va renvoyer des informations relatives au premier élément trouvé correspondant au sélecteur CSS sélectionné.

<body>
  
    <h1>Le titre</h1>
    
</body>

console.log(document.querySelector('h1'));

sélectionner dans la console la list-item "salade" sans changer le HTML.

<body>
  
 <ol class="courses">
        <li class="produit">salade</li>
        <li class="produit">tomates</li>
        <li class="produit">oignons</li>
 </ol>
  
</body>

Exo

résultat

var produit = document.querySelector('.courses li:nth-child(2)');

console.log(produit);

Pour la lisibilité, nous pouvons stocker notre élément dans une variable.

querySelectorAll() va renvoyer des informations sur tous les éléments correspondants.

<body>
  
    <p class="para">Lorem ipsum dolor sit amet.</p>
    <p class="para">Lorem ipsum dolor sit amet.</p> 
    <p class="para">Lorem ipsum dolor sit amet.</p>    
  
</body>

console.log(document.querySelectorAll('.para'));

sélectionner dans la console les list-item contenants la classe "produit".

<body>
  
 <ol class="courses">
        <li class="produit">salade</li>
        <li class="produit">tomates</li>
        <li class="produit">oignons</li>
        <li>chef</li>
 </ol>
  
</body>

Exo

résultat

var item = document.querySelectorAll('.produit');

console.log(item);

Pour la lisibilité, nous pouvons stocker notre élément dans une variable.

Modifier un élément

Nous allons pouvoir modifier les éléments HTML via des propriétés JS ou bien en appelant des sélecteurs CSS.

La propriété textContent va nous permettre de modifier le contenu d'un texte.

La première étape est de sélectionner un élément et de le stocker dans une variable.

var titre = document.querySelector('#titre');

La deuxième étape est de lui assigner la propriété textContent et de changer le contenu de notre élément.

titre.textContent = 'Mon nouveau titre';

Nous allons pouvoir modifier le style des éléments en leur ajoutant des classes CSS ou via des propriétés JS.

<p class="para">Lorem ipsum dolor sit amet.</p>

.vert {
	background: lightgreen;
}

var p = document.querySelector('.para');

p.classList.add('vert');

Nous avons ajouter la méthode add à la propriété classList afin d'ajouter cette classe.

Pas de (.) avant la classe car on l'écrit comme si on l'ajoutait dans le HTML.

var p = document.querySelector('.para');

p.style.fontSize = '40px';

Nous pouvons modifier nos éléments via la propriété style à laquelle, nous allons pouvoir assigner toutes les propriétés CSS existantes.

Ici, nous assignons la propriété fontSize à notre paragraphe.

Dans ton drive ;)