Développement web

Cours 16

• site : https://bruno-simon.com/esin/e1-p2026/
• contact : bruno.simon1@exterieur.groupe-igs.fr

JavaScript

Manipuler le DOM

En JS, il est possible de manipuler le DOM.
Celui-ci se compose d'éléments appelés DOM Element ou Node

Récupérer ces éléments

Nous allons voir dans un premier temps comment récupérer ces éléments pour les stocker dans des variables afin de les manipuler par la suite

La page entière est considérée comme un DOM Element. On y accède en JS avec la variable document

getElementById

const foo = document.getElementById('hey')

console.log(foo)
                        

• Renvoie un élément ayant l'ID hey

getElementsByClassName

const foo = document.getElementsByClassName('hey')

console.log(foo)
                        

• Renvoie un tableau d'éléments ayant la classe hey

getElementsByTagName

const foo = document.getElementsByTagName('section')

console.log(foo)
                        

• Renvoie un tableau d'éléments dont le tag est section

querySelector

const foo = document.querySelector('.toto')

console.log(foo)
                        

• Renvoie le premier élément ayant la classe toto
• Fonctionne avec un sélecteur comme en CSS
• IE8+

querySelectorAll

const foo = document.querySelectorAll('.toto')

console.log(foo)
                        

• Similaire à querySelector
• Renvoie un genre de tableau de tous les éléments ayant la classe toto

☝️ le tableau renvoyé n'est pas tout à fait un tableau

Si on tente par exemple un for ... in ... dessus, on va se retrouver avec des clées non désirées

const foo = document.querySelectorAll('.toto')

for(const key in foo)
{
    console.log(key)
}
                        

Alors qu'un for ... of ... va fonctionner

const foo = document.querySelectorAll('.toto')

for(const element of foo)
{
    console.log(element)
}
                        

Une bonne astuce consiste à transformer ce "genre de tableau" en un vrai tableau

Pour cela, deux façons de faire

Avec Array.from()

const foo = document.querySelectorAll('p')
const bar = Array.from(foo)
                        

Avec le spread operator

const foo = document.querySelectorAll('p')
const bar = [...foo]
                        

querySelector et querySelectorAll ont rendu obsolète les autres méthodes

⚠️ N'utilisez que ces deux là dans un souci de simplicité

Manipuler l'élément

Une fois l'élément récupéré, il est possible de le modifier

Attributs

// Modifie l'attribut test (le créé s'il n'existe pas)
foo.setAttribute('test', 'coucou')

// Récupère l'attribut "test"
console.log(foo.getAttribute('test'))

// Supprime l'attribut "class"
foo.removeAttribute('class')
                        

Style

// Modifie le style
foo.style.backgroundColor = 'green'
foo.style.width = '200px'
foo.style.height = '200px'
foo.style.height = '200px'
foo.style.webkitBorderRadius = '100px'
foo.style.mozBorderRadius = '100px'
foo.style.borderRadius = '100px'
                        

• Les propriétés sont en camelCase
• Bien préciser les unités
• Spécifier les préfixes si nécessaire

Classes

// Rajoute une classe
foo.classList.add('toto')

// Rajoute plusieurs classes
foo.classList.add('lorem', 'ipsum')

// Supprime une classe
foo.classList.remove('lorem')

// Demande si contient la classe
console.log(foo.classList.contains('ipsum'))
                        

textContent

// Remplace le contenu par "hey"
foo.textContent = 'hey'
                        

innerHTML

// Remplace le contenu par du HTML
foo.innerHTML = '<span>hey</span>'
                        

La différence avec textContent est la possibilité d'écrire du HTML qui sera interprété comme tel

remove

// Supprime du DOM
foo.remove()
                        

append

// Place bar à la fin de l'élément foo
foo.append(bar)
                        

⚠️ append est le successeur de appendChild et n'est pas supporté sur certains vieux navigateurs

prepend

// Place bar au début de l'élément foo
foo.prepend(bar)
                        

⚠️ prepend n'est pas supporté sur certains vieux navigateurs

Créer un élément

// Créé un span et stock dans la variable "toto"
const toto = document.createElement('span')

// Lui ajoute la class "toto"
toto.classList.add('toto')

// Lui ajoute du texte
toto.textContent = 'Coucou, je suis toto'

// Le rajoute au DOM dans l'élément foo
foo.append(toto)
                        

Input value

Il est possible de récupérer la valeur d'un input que ce soit un input text, un select, un textarea, etc.

<input value="test" type="text" class="my-awesome-input">
                        

const input = document.querySelector('.my-awesome-input')
console.log(input.value)
                        

⚠️

Récupérer un élément dans la page demande pas mal de ressources pour le navigateur

Il faut minimiser cette pratique autant que possible