web_2025/R4.01_R4.A.10/td_tp/tp2/aide.md

Selection d'éléments

// le premier 
document.querySelector(".box")

// ou tous
document.querySelectorAll(".box")

// avec l'id

document.getElementById("toto")

// selection d'un élément dans un autre

let container = document.querySeletor('.container')
container.querySelector('.box')

Traverser le dom

var box = document.querySelector(".box")
box.nextElementSibling
box.previousElementSibling
box.parentElement
box.childNodes

Création/insertion d'éléments

let p = document.createElement('p')
p.textContent="blabla"
document
   .getElementById("myDiv")
   .appendChild(p)

div.replaceChildren(p)

Gestionnaire évènementiels

document.querySelector(".button").addEventListener("click", (e) => { /* ... */ })
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ })
document.addEventListener("keyup", (e) => { /* ... */ })

window/document prêt

document.addEventListener("DOMContentLoaded",() = > { .....})
// le dom a été construit (on n'attend pas le chargement du css, images, etc.

windon.addEventListener('load',()=>{...})
// le dom est prêt et toutes les ressources ont été chargées.

dataset

<div id="user" data-id="1234567890" data-user="carinaanand" data-date-of-birth>
  Carina Anand
</div>

const el = document.querySelector("#user");

// el.id === 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'carinaanand'
// el.dataset.dateOfBirth === ''

Local storage

localStorage.setItem('monChat', 'Tom')
let cat =  localStorage.getItem('myCat')
localStorage.clear()

Limiter les appels successifs à une fonction

function debounce(f,wait)
{
	let timeout 
	return function(...args){
		clearTimeout(timeout)
		timeout=setTimeout(()=>f(...args),wait)
	}
}

Gestion du css depuis le DOM

// Select the first .box and change its text color to #000
document.querySelector(".box").style.color = "#000";

// Set color to #000 and background to red
var box = document.querySelector(".box")
box.style.color = "#000"
box.style.backgroundColor = "red"

// Set all styles at once (and override any existing styles)
box.style.cssText = "color: #000; background-color: red"


// Hide and show an element by changing "display" to block and none
document.querySelector(".box").style.display = "none"
document.querySelector(".box").style.display = "block"

// Add, remove, and the toggle the "focus" class
var box = document.querySelector(".box")
box.classList.add("focus")
box.classList.remove("focus")
box.classList.toggle("focus")


box.classList.add("focus", "highlighted")
box.classList.remove("focus", "highlighted")

box.classList.add("focus", "highlighted")
box.classList.remove("focus", "highlighted")