F- Manipuler les classes en JavaScript
- La propriété className
La propriété className contient la liste des classes qui sont positionnées sur un élément
- La propriété classList
La propriété classList est un objet javaScript qui fonctionne comme un tableau.
Le tableau contient la liste des classes qui sont positionnées sur un élément.
- Tester si une classe est positionnée contains ()
- Ajouter une classe avec classList.add
- Supprimer une class classList.remove()
- Utiliser classList.toggle()
TP
console.log(window)
console.log(document)
A/ Accéder aux éléments dans un document html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Titre principale</h1>
<p id="'p1">Un paragraphe</p>
<div>
<p>un paragraphe dans la div</p>
<p id="text">Un autre paragraphe</p>
</div>
<p id="para">un paragraphe</p>
<div class="bleu">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores recusandae amet laborum culpa eaque ad quis consectetur, natus aliquam quam repudiandae, voluptates sunt ullam libero quia accusamus et dignissimos omnis?</div>
<a href="https://www.google.fr"> Google</a>
<script src="app.js"></script>
</body>
</html>querySelectorAll ()
const selecP = document.querySelectorAll('p')
console.log(selecP) On obtient tous les p dans le document
console.log(selecP)
for (elt of selecP){
console.log(elt)
}querySelector()
const selecP = document.querySelector('p')
console.log(selecP) On obtient le premier p (objet)
getElementById()
const eltId = document.getElementById('para')
console.log(eltId)
GetElementByClassName ()
const eletClass = document.getElementsByClassName('bleu')
console.log(eletClass)
B/ Accéder au contenu des éléments et le modifier
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Titre principale</h1>
<p id="'p1">Un paragraphe</p>
<div>
<p>un paragraphe dans la div</p>
<p id="text">Un autre paragraphe</p>
</div>
<p id="para">un paragraphe</p>
<div class="bleu">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores recusandae amet laborum culpa eaque ad quis consectetur, natus aliquam quam repudiandae, voluptates sunt ullam libero quia accusamus et dignissimos omnis?</div>
<script src="app.js"></script>
</body>
</html>innerHTML
const seleDiv = document.querySelector('div')
console.log(seleDiv)
seleDiv.innerHTML += `<ul><li>Element N°1 </li><ul>`
OuterHTML
const seleP = document.querySelector('p')
console.log(seleP)
seleP.outerHTML = `<h2>je suis un titre h2</h2>`
textContent
const seletext = document.getElementById('text')
console.log(seletext)
seletext.textContent = `<span>texte modifier </span>`
C/ Modifier les styles d’un élément
style
const p1 = document.querySelector('p')
let seletDiv = document.getElementById('text')
p1.style.color = 'red'
seletDiv.style.backgroundColor = "black"
D/ gestion des évènements en JS et la methode addEvenListener
const selecA = document.querySelector('a')
console.log(selecA)
selecA.addEventListener('click',function(e){
e.preventDefault()
console.log('text')
})
E/ gestion des évènements en JS et la methode addEvenListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.font-large{
font-size: 25px;
}
.color-red{
color: red;
}
.underline{
text-decoration: underline;
}
</style>
</head>
<body>
<p class="font-large color-red">un paragrphe</p>
<script src="app.js"></script>
</body>
</html>const seleP = document.querySelector('p')
console.log(seleP.classList)
Contains
const seleP = document.querySelector('p')
console.log(seleP.classList.contains('color-red'))
classList.add
const seleP = document.querySelector('p')
console.log(seleP.classList.add('underline'))classList.remove()
const seleP = document.querySelector('p')
console.log(seleP.classList.remove('underline'))classList.toggle
const seleP = document.querySelector('p')
console.log(seleP.classList.toggle('underline'))