1)Récupérer un élément HTML par son ID et lui ajouter du contenu HTML à l'aide de la propriété innerHTML:
// Récupérer l'élément HTML par son ID
const element = document.getElementById('monElement');
// Ajouter du contenu HTML à l'élément
element.innerHTML = '
Mon titre
Mon paragraphe
';
2)Parcourir une liste d'éléments HTML et leur ajouter un événement de clic en utilisant la méthode forEach() de JavaScript:
// Récupérer une liste d'éléments HTML
const elements = document.querySelectorAll('.maClasse');
// Parcourir la liste d'éléments et leur ajouter un événement de clic
elements.forEach(element => {
element.addEventListener('click', () => {
console.log('Clic détecté');
});
});
3)Ajouter un nouvel élément HTML à une page web en utilisant JavaScript, et le placer à l'intérieur d'un autre élément spécifié par son ID:
// Créer un nouvel élément HTML
const nouvelElement = document.createElement('div');
// Ajouter du contenu HTML à l'élément
nouvelElement.innerHTML = '
Mon titre
Mon paragraphe
';
// Récupérer l'élément HTML où l'on souhaite ajouter le nouvel élément
const parentElement = document.getElementById('monParentElement');
// Ajouter le nouvel élément à l'intérieur de l'élément parent
parentElement.appendChild(nouvelElement);
4)Créer une animation simple en utilisant la méthode setInterval() de JavaScript pour modifier les propriétés CSS d'un élément HTML:
// Récupérer l'élément HTML à animer
const element = document.getElementById('monElement');
// Définir les propriétés CSS de départ
let position = 0;
// Définir l'animation en utilisant setInterval()
const animation = setInterval(() => {
// Modifier les propriétés CSS à chaque intervalle
position += 10;
element.style.left = `${position}px`;
// Arrêter l'animation lorsque l'élément est arrivé à sa destination
if (position >= 100) {
clearInterval(animation);
}
}, 50); // Interval de 50 millisecondes
5)Utiliser la méthode getComputedStyle() de JavaScript pour récupérer les styles CSS appliqués à un élément HTML, et les modifier en conséquence à l'aide de la propriété style:
// Récupérer l'élément HTML dont on souhaite modifier les propriétés CSS
const element = document.getElementById('monElement');
// Récupérer les propriétés CSS appliquées à l'élément
const styles = window.getComputedStyle(element);
// Modifier les propriétés CSS à l'aide de la propriété style
element.style.backgroundColor = 'blue';
element.style.width = `${parseInt(styles.width) + 100}px`;