K

Le DOM (Document Object Model)

Basics of time-travel

JavaScript est le langage de programmation qui permet de manipuler le Document Object Model (DOM) pour créer des pages web interactives et dynamiques.

Pour manipuler le DOM, il est nécessaire de sélectionner les éléments de la page. Cela peut être fait en utilisant des méthodes telles que getElementById, getElementsByClassName et querySelector. Par exemple:

// Sélectionne l'élément avec l'id "titre"
var titre = document.getElementById('titre')

// Sélectionne tous les éléments de la page ayant la classe "lien"
var liens = document.getElementsByClassName('lien')

// Sélectionne le premier élément de la page ayant la classe "lien"
var premierLien = document.querySelector('.lien')

Une fois les éléments sélectionnés, il est possible de modifier leur contenu ou leur style, ajouter des événements, etc. Par exemple :

// Change la couleur de fond de l'élément en rouge
titre.style.backgroundColor = 'red'

// Ajoute un événement clic à l'élément
titre.addEventListener('click', function () {
  alert('Vous avez cliqué sur le titre !')
})

// Change le contenu de l'élément
titre.innerHTML = 'Nouveau titre'

Il est également possible de créer de nouveaux éléments et de les ajouter à la page en utilisant la méthode createElement, et appendChild pour ajouter l'élément créé dans la page.

// Crée un nouvel élément <p>
var paragraphe = document.createElement('p')

// Ajoute du contenu à l'élément
paragraphe.innerHTML = 'Voici un nouveau paragraphe ajouté à la page.'

// Ajoute l'élément à la page
document.body.appendChild(paragraphe)

En utilisant JavaScript, il est possible de manipuler le DOM pour créer des pages web interactives et dynamiques. Il est important de comprendre les différentes méthodes et propriétés disponibles pour manipuler efficacement les éléments de la page.

En conclusion, la manipulation du DOM avec JavaScript est un élément clé pour les développeurs de JavaScript, car elle leur permet de créer des pages web interactives et dynamiques en modifiant les éléments de la page. Il est important de comprendre les différentes méthodes et propriétés pour manipuler efficacement les éléments de la page.

Précédent
Qu'est-ce que le DOM