avec l'id "myId"
console.log(myElement);
// Modifier le contenu de l'élément
myElement.innerHTML = "Nouveau contenu";
// Modifier les styles de l'élément
myElement.style.color = "red";
myElement.style.backgroundColor = "blue";
// Ajouter une classe CSS à l'élément
myElement.classList.add("maClasse");
// Récupérer la valeur d'un attribut HTML
const myAttributeValue = myElement.getAttribute("id");
console.log(myattributeValue); // Affiche "myId"
// Modifier la valeur d'un attribut HTML
myElement.setAttribute("title", "Mon élément");
```
Note:
Cet exemple montre comment utiliser la méthode document.getElementById() pour accéder à un élément HTML en spécifiant son identifiant unique. Une fois l'élément sélectionné, il est possible de modifier son contenu en utilisant la propriété innerHTML, de modifier ses styles en utilisant la propriété style, d'ajouter une classe CSS à l'aide de la propriété classList, de récupérer la valeur d'un attribut HTML à l'aide de la méthode getAttribute(), et de modifier la valeur d'un attribut HTML à l'aide de la méthode setAttribute().
---
### Séléction du DOM
```html
const paragraphs = document.querySelectorAll("div p");
console.log(paragraphs); // Affiche des éléments
// Modifier le contenu de tous les paragraphes
paragraphs.forEach(function(p) {
p.innerHTML = "Nouveau contenu";
});
// Sélectionner le premier élément
const firstParagraph = document.querySelector("p");
console.log(firstParagraph); // Affiche du premier élément
// Modifier le style de tous les paragraphes
const paragraphs = document.querySelectorAll("p");
paragraphs.forEach(function(p) {
p.style.color = "red";
});
```
Note:
Cet exemple montre comment utiliser la méthode document.querySelectorAll() pour sélectionner tous les éléments correspondant à un sélecteur CSS donné, ici tous les éléments
à l'intérieur d'une balise
. Il est également possible de sélectionner un seul élément en utilisant la méthode document.querySelector() qui va sélectionner le premier élément correspondant au sélecteur. Il est possible de parcourir les éléments sélectionnés avec une boucle forEach pour effectuer des actions sur chacun d'entre eux, comme ici, changer le contenu ou le style.
Ces méthodes sont très utiles pour sélectionner des éléments de manière efficace et précise, sans avoir à parcourir tous les éléments de la page. Il est important de noter que ces méthodes ne sélectionnent que les éléments qui existent dans le DOM au moment où elles sont appelées, il faut donc s'assurer que les éléments que l'on souhaite sélectionner sont bien présents dans le DOM avant de les manipuler.
---
### Parcours du DOM
```html [12-18|23-32|34-38]
Exemple de parcours du DOM avec des enfants
Ceci est un paragraphe.
- Élément 1
- Élément 2
- Élément 3
Ceci est un span.
```
---
## Création d'un élément
```javascript
// Création d'un élément
const newElement = document.createElement('div')
// Modification de ses attributs et contenu
newElement.innerText = 'Nouvel élément ajouté'
newElement.classList.add('nouvelle-classe')
// Ajout de l'élément au DOM
document.body.appendChild(newElement)
```
---
## Création d'un élément
```html
Paragraphe 1
Paragraphe 2
Paragraphe 3
```
```javascript [2|4-6|8-10]
// Création d'un élément
const div = document.querySelector("p")
const p4 = document.createElement('p')
p4.innerText = 'Paragraphe 4'
div.insertAdjacentElement('beforeend',p4)
const p4 = document.createElement('p')
p4.innerText = 'Paragraphe 0'
div.insertAdjacentElement('afterbegin',p0)
```
---
## Création d'un élément
```html
Paragraphe 1
Paragraphe 2
Paragraphe 3
```
```javascript [2|4-6|8-10]
// Création d'un élément
const div1 = document.querySelector("div")
const div0 = document.createElement('div')
div1.insertAdjacentElement('beforebegin',div0)
const div2 = document.createElement('div')
div1.insertAdjacentElement('afterend',div2)
```
---
## Gestion des tableaux
```html
| Header 1 | Header 2 |
| Value 1 | Value 2 |
| Value 3 | Value 4 |
```
```javascript [1-2|4-6|8-13|15-22]
const table = document.getElementById("myTable");
console.log(table); // Affiche l'objet
// Accéder aux lignes du tableau
const rows = table.rows;
console.log(rows); // Affiche un objet HTMLCollection contenant les lignes
// Accéder à une cellule spécifique en utilisant les propriétés row et cell
const cell = table.rows[1].cells[1];
console.log(cell); // Affiche l'objet représentant la cellule | "Value 2"
// Modifier le contenu d'une cellule
cell.innerHTML = "Nouvelle valeur";
//Ajouter une ligne au tableau
const newRow = table.insertRow(-1);
const newCell1 = newRow.insertCell(0);
newCell1.innerHTML = "Value 5";
const newCell2 = newRow.insertCell(1);
newCell2.innerHTML = "Value 6";
```
Note:
Cet exemple montre comment utiliser la méthode document.querySelectorAll() pour sélectionner tous les éléments correspondant à un sélecteur CSS donné, ici tous les éléments à l'intérieur d'une balise . Il est également possible de sélectionner un seul élément en utilisant la méthode document.querySelector() qui va sélectionner le premier élément correspondant au sélecteur. Il est possible de parcourir les éléments sélectionnés avec une boucle forEach pour effectuer des actions sur chacun d'entre eux, comme ici, changer le contenu ou le style.
Ces méthodes sont très utiles pour sélectionner des éléments de manière efficace et précise, sans avoir à parcourir tous les éléments de la page. Il est important de noter que ces méthodes ne sélectionnent que les éléments qui existent dans le DOM au moment où elles sont appelées, il faut donc s'assurer que les éléments que l'on souhaite sélectionner sont bien présents dans le DOM avant de les manipuler.
|