dom

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

@@ -0,0 +1,132 @@
+#### Selection d'éléments
+
+```js
+// 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
+
+```js
+var box = document.querySelector(".box")
+box.nextElementSibling
+box.previousElementSibling
+box.parentElement
+box.childNodes
+```
+
+#### Création/insertion d'éléments
+
+```js
+let p = document.createElement('p')
+p.textContent="blabla"
+document
+   .getElementById("myDiv")
+   .appendChild(p)
+
+div.replaceChildren(p)
+```
+
+
+#### Gestionnaire évènementiels
+
+```js
+document.querySelector(".button").addEventListener("click", (e) => { /* ... */ })
+document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ })
+document.addEventListener("keyup", (e) => { /* ... */ })
+```
+
+#### window/document prêt
+
+```js
+
+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
+```html
+<div id="user" data-id="1234567890" data-user="carinaanand" data-date-of-birth>
+  Carina Anand
+</div>
+```
+
+```javascript
+const el = document.querySelector("#user");
+
+// el.id === 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'carinaanand'
+// el.dataset.dateOfBirth === ''
+```
+#### Local storage
+
+```js
+
+localStorage.setItem('monChat', 'Tom')
+let cat =  localStorage.getItem('myCat')
+localStorage.clear()
+```
+
+#### Limiter les appels successifs à une fonction
+
+```js
+function debounce(f,wait)
+{
+	let timeout 
+	return function(...args){
+		clearTimeout(timeout)
+		timeout=setTimeout(()=>f(...args),wait)
+	}
+}
+```
+
+#### Gestion du css depuis le DOM
+
+```js
+// 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")
+
+```
+