# Le DOM
## Document Object Model
---
## Recheche par id
```html []
Contenu de mon élément
```
---
## Recheche par class
```html []
```
---
## Recheche par class
```html []
Contenu de mon élément
```
---
## Recheche comme en css
```html []
Contenu de mon élément
```
---
## Manipulation des éléments
```javascript [1-15|1-2|4-5|7-8|10-11|13-16]
// Modifier le contenu textuel
element.textContent = "Nouveau contenu"; // Remplace le texte de l'élément
// Modifier un attribut (par exemple, une classe CSS)
element.setAttribute("required", true); // Ajoute l'attribut 'required' et le définit à true
// Ajouter du style en ligne
element.style.color = "red"; // Applique une couleur rouge au texte de l'élément
// Remplace tout le contenu de l'élément par HTML
element.innerHTML = "Ceci est du texte avec des balises HTML."
// Modifier la classe de l'élément
element.classList.add("nouvelleClasse"); // Ajoute une nouvelle classe à l'élément
element.classList.remove("ancienneClasse"); // Supprime une classe de l'élément
element.classList.toggle("toggleClasse"); // Bascule entre l'ajout et la suppression de la classe
```
---
## Création et ajout des éléments a la fin
```javascript
// Crée un nouvel élément
const newElement = document.createElement("p");
// Ajoute du texte à cet élément
newElement.textContent = "Ceci est un paragraphe.";
// Ajoute cet élément à la fin du body de la page
document.body.appendChild(newElement);
```
---
## Création et ajout des éléments au début
```javascript
// Crée un nouvel élément
const anotherElement = document.createElement("p");
// Ajoute du texte à cet élément
anotherElement.textContent = "Ceci est un paragraphe au début.";
// Ajoute cet élément au début du body
document.body.prepend(anotherElement);
```
---
## Création et ajout des éléments avant un autre
```javascript
// Sélectionner un élément existant
const referenceElement = document.getElementById("someId");
// Crée un nouvel élément
const newElementBefore = document.createElement("p");
// Ajoute du texte à cet élément
newElementBefore.textContent = "Ceci est un paragraphe avant un autre élément.";
// Ajoute cet élément avant le référencé
document.body.insertBefore(newElementBefore, referenceElement);
```
---
##