Document Object Model

 C'est quoi ?

Le DOM est une interface entre JS et

notre page HTML.

Le DOM représente sous forme

d'arbre notre page HTML et les
différents éléments qui la
composent !

 À quoi ça sert ?

Grâce au DOM, nous allons pouvoir interagir avec notre page HTML
depuis JS !

Plus précisément, nous allons pouvoir :

 récupérer le contenu d'un élément
 modifier le contenu d'un élément
 ajouter ou supprimer des éléments
 ajouter ou supprimer des attributs à nos éléments
  Accéder au DOM depuis JS

Pour accéder à nos éléments du DOM depuis JS, nous allons avoir
besoin de découvrir de nouveaux outils.

 getElementById

document.getElementById() nous permet d'accéder à un élément

HTML en utilisant son ID.

1 < h1 id = "pageTitle" > Mon super site ! < / h1 >

1 let h1 = document .getElementById( 'pageTitle' );

 getElementsByClassName

document.getElementsByClassName() nous permet d'accéder à

tous les éléments qui ont une certaine classe (et je ne parle pas de
leur style vestimentaire).

1 < p class = " maClasse "> Lorem ipsum dolor < / p>
2 < p class = " maClasse "> sit amet consectetur < / p>

1 let p_array = document .getElementsByClassName( 'maClasse' );

  queryselector

document.querySelector() nous permet d'accéder au premier

élément qui correspond au sélecteur CSS utilisé.

1 < p class = " maClasse "> Lorem ipsum dolor < / p>
2 < p class = " maClasse " id = " p2 "> sit amet consectetur < / p>

1 let p1 = document . querySelector ( '.maClasse' );

2 let p2 = document . querySelector ( '#p2' ) ;

 queryselectorall

document.querySelectorAll() nous permet d'accéder à tous les

1 < p class = " maClasse "> Lorem ipsum dolor < / p>
2 < p class = " maClasse " id = " p2 "> sit amet consectetur < / p>

1 let p_array = document . querySelectorAll ( '.maClasse' );

éléments qui correspondent au sélecteur CSS utilisé.

Lequel utiliser ?

querySelector et querySelectorAll sont plus récents, donc ne sont

pas supportés par les plus anciens navigateurs. Ils offrent plus de
flexibilité que getElementById ou getElementsByClassName, mais
sont un peu moins performants (comparaison performance).
Dans le reste de cette saison on utilisera surtout querySelector !
  Accéder au contenu d'une balise

1 < p id = "para" > Lorem ipsum dolor < / p>

1 const paragraphe = document . querySelector ( '#para' );

2 console.log(paragraphe.textContent);
3 // affiche 'Lorem ipsum dolor'

On peut accéder au contenu d'une balise avec .textContent :

 Accéder au contenu HTML

Mais aussi à tout le contenu HTML à l'intérieur d'une balise avec

.innerHTML :

1 < p id = "para" >< span > Lorem ipsum dolor < / span >< / p>

1 const paragraphe = document . querySelector ( '#para' );

2 console.log(paragraphe.innerHTML);
3 // affiche '<span>Lorem ipsum dolor</span>'
  Modifier ce contenu ?

On peut aussi modifier le contenu de ces balises avec .textContent

et .innerHTML !

1 < p id = "para" >< span > Lorem ipsum dolor < / span >< / p>

1 const paragraphe = document.querySelector( '#para' );

2
3 paragraphe.innerHTML = "<h1>Lorem ipsum dolor</h1>" ;
4 // le paragraphe contient maintenant un h1 !
5
6 paragraphe.textContent = "Lorem ipsum dolor" ;
7 // le paragraphe contient uniquement 'Lorem ipsum dolor'
8 // et plus de span ou h1.

Lequel utiliser ?

Vous pouvez utiliser les deux !

En règle générale, on préfère utiliser .textContent, et utiliser
.innerHTML que vraiment si on doit ajouter des balises HTML.
  Classlist

On peut aussi accéder aux classes que possède un élément HTML,

avec .classList :

1 < p class = " class1 class2 ">< span > Lorem ipsum dolor < / span >< / p>

1 const paragraphe = document.querySelector( 'p' ) ;

2 console. log ( paragraphe.classList );
3 // affiche [ 'class1' , 'class2' ]

 Ajouter/supprimer une classe

On peut ajouter des classes ou en supprimer à la volée avec
classList.add() et classList.remove() :

1 < p class = " class1 class2 ">< span > Lorem ipsum dolor < / span >< / p>

1 const paragraphe = document.querySelector( 'p' ) ;

2
3 paragraphe.classList.remove( 'class2' );
4 console.log(paragraphe.classList);
5 // affiche [ 'class1' ]
6
7 paragraphe.classList.add( 'class3' );
8 console.log(paragraphe.classList);
9 // affiche [ 'class1' , 'class3' ]
  attributs HTML

On peut aussi accéder aux attributs d'un élément HTML, avec

1 < p class = " class1 " attribute2 = " bla bla "> Lorem ipsum dolor < / p>

1 const paragraphe = document.querySelector( 'p' ) ;

2 console.log(paragraphe.attributes);
3 // affiche [class= 'class1' , attribute2= 'bla bla' ]
4 console.log(paragraphe.attributes[ 0 ]) ;
5 // affiche class= 'class1'

.attributes :

 récupérer un attribut spécifique

Souvent, on va surtout vouloir récupérer un attribut spécifique, or

on ne connait pas forcément sa position dans le tableau retourné
par .attributes !

On va donc plutôt utiliser .element.getAttribute('nom_attribut') :

1 < p class = " class1 " attribute2 = " bla bla "> Lorem ipsum dolor < / p>

1 const paragraphe = document . querySelector ( 'p' ) ;

2 console.log(paragraphe.getAttribute( 'attribute2' )) ;
3 // affiche 'bla bla'
  définir un attribut spécifique

Pour définir la valeur d'un attribut spécifique, on va utiliser

.element.setAttribute('nom_attribut', 'valeur_attribut') :

1 < p class = " class1 "> Lorem ipsum dolor < / p>

1 const paragraphe = document . querySelector ( 'p' ) ;

2 console.log(paragraphe.setAttribute( 'attribute2' , 'bla
bla' )) ;

1 < p class = " class1 " attribute2 = " bla bla "> Lorem ipsum dolor < / p>