### Chapitre 3 : Manipulation Avancée du DOM

#### 3.1 Travail avec les classes et les styles

1. **Ajout, suppression et vérification des classes**

- **Ajouter une classe :**

```javascript

$('#element').addClass('nouvelle-classe');

```

- **Supprimer une classe :**

```javascript

$('#element').removeClass('ancienne-classe');

```

- **Alterner une classe :**

```javascript

$('#element').toggleClass('classe');

```

- **Vérifier la présence d'une classe :**

```javascript

if ($('#element').hasClass('classe')) {

console.log('L\'élément a la classe');

```

2. **Manipulation des styles CSS**

- **Lire une propriété CSS :**

```javascript

var color = $('#element').css('color');

console.log(color); // Affiche la couleur de l'élément

 ```

- **Modifier une propriété CSS :**

```javascript

$('#element').css('color', 'blue');

```

- **Modifier plusieurs propriétés CSS :**

```javascript

$('#element').css({

'color': 'blue',

'background-color': 'yellow',

'font-size': '16px'

});

```

#### 3.2 Dimensions et positions

1. **Récupérer et définir les dimensions**

- **Récupérer les dimensions :**

```javascript

var width = $('#element').width(); // Largeur intérieure sans bordure

var height = $('#element').height(); // Hauteur intérieure sans bordure

var innerWidth = $('#element').innerWidth(); // Largeur intérieure avec padding

var outerWidth = $('#element').outerWidth(); // Largeur extérieure avec padding et bordure

var outerWidthWithMargin = $('#element').outerWidth(true); // Largeur extérieure avec padding,

bordure et marge

```

- **Définir les dimensions :**

```javascript

$('#element').width(200); // Définir la largeur en pixels

 $('#element').height(100); // Définir la hauteur en pixels

```

2. **Récupérer et définir la position**

- **Récupérer la position :**

```javascript

var position = $('#element').position(); // Position relative à l'élément parent

var offset = $('#element').offset(); // Position relative au document

```

- **Définir la position :**

```javascript

$('#element').offset({ top: 100, left: 200 }); // Définir la position relative au document

```

#### 3.3 Traversée du DOM

1. **Parcours des éléments parents et enfants**

- **Accéder aux parents :**

```javascript

var parent = $('#element').parent(); // Récupère le parent direct

var allParents = $('#element').parents(); // Récupère tous les ancêtres

var closestParent = $('#element').closest('.classe'); // Récupère le plus proche ancêtre avec la classe

spécifiée

```

- **Accéder aux enfants :**

```javascript

var children = $('#element').children(); // Récupère tous les enfants directs

var specificChildren = $('#element').children('.classe'); // Récupère tous les enfants directs avec la

classe spécifiée
 var findChildren = $('#element').find('.classe'); // Récupère tous les descendants avec la classe
spécifiée

```

2. **Accéder aux frères et sœurs**

- **Accéder aux frères et sœurs :**

```javascript

var siblings = $('#element').siblings(); // Récupère tous les frères et sœurs

var nextSibling = $('#element').next(); // Récupère le frère suivant direct

var prevSibling = $('#element').prev(); // Récupère le frère précédent direct

```

3. **Filtrage des éléments**

- **Filtrer les éléments :**

```javascript

var evenItems = $('li').filter(':even'); // Filtre les éléments pairs

var oddItems = $('li').filter(':odd'); // Filtre les éléments impairs

var notItems = $('li').not('.classe'); // Exclut les éléments avec la classe spécifiée

var isItem = $('#element').is('.classe'); // Vérifie si l'élément a la classe spécifiée

```

### Exercices pratiques

1. **Travail avec les classes et les styles**

- Créez une page HTML avec des éléments ayant différentes classes et styles.

- Utilisez jQuery pour ajouter, supprimer et alterner des classes.

- Modifiez les styles CSS des éléments dynamiquement.

2. **Dimensions et positions**
 - Créez des éléments avec des tailles et des positions définies.

- Utilisez jQuery pour récupérer et modifier les dimensions et les positions de ces éléments.

3. **Traversée du DOM**

- Créez une structure HTML imbriquée avec des parents, enfants, et frères et sœurs.

- Utilisez jQuery pour parcourir le DOM, accéder aux différents éléments et les filtrer selon vos besoins.

Ces concepts vous permettront de manipuler de manière avancée les éléments du DOM, en modifiant
leurs styles, dimensions, positions et en naviguant efficacement dans la structure HTML.