TheShinriel/DOM functions.html

## DOM functions.html
<!DOCTYPE html>
<html>
  <head>
    <title>Méthodes de manipulation du DOM</title>
  </head>
  <body>
    <h1 id="title">Titre initial</h1>
    <ul id="list">
      <li>Élément 1</li>
      <li>Élément 2</li>
      <li>Élément 3</li>
    </ul>
    <button id="btnAdd">Ajouter un élément</button>
    <button id="btnRemove">Supprimer le premier élément</button>

    <script>
      // 🔍 Sélectionner un élément par son ID
      const titleElement = document.getElementById('title');

      // 🔍 Sélectionner des éléments par leur balise
      const listItems = document.getElementsByTagName('li');

      // 🔍 Sélectionner des éléments par leur classe
      const buttons = document.getElementsByClassName('btn');

      // 🔍 Sélectionner le premier élément correspondant à un sélecteur
      const firstListItem = document.querySelector('li');

      // 🔍 Sélectionner tous les éléments correspondant à un sélecteur
      const allListItems = document.querySelectorAll('li');

      // 🔍 Modifier le contenu d'un élément
      titleElement.textContent = 'Nouveau titre';

      // 🔍 Ajouter un événement au clic du bouton d'ajout
      const addButton = document.getElementById('btnAdd');
      addButton.addEventListener('click', () => {
        const newItem = document.createElement('li');
        newItem.textContent = 'Nouvel élément';
        document.getElementById('list').appendChild(newItem);
      });

      // 🔍 Ajouter un événement au clic du bouton de suppression
      const removeButton = document.getElementById('btnRemove');
      removeButton.addEventListener('click', () => {
        const firstItem = document.querySelector('li');
        if (firstItem) {
          document.getElementById('list').removeChild(firstItem);
        }
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Méthodes de manipulation du DOM</title>
	</head>
	<body>
	<h1 id="title">Titre initial</h1>
	<ul id="list">
	<li>Élément 1</li>
	<li>Élément 2</li>
	<li>Élément 3</li>
	</ul>
	<button id="btnAdd">Ajouter un élément</button>
	<button id="btnRemove">Supprimer le premier élément</button>

	<script>
	// 🔍 Sélectionner un élément par son ID
	const titleElement = document.getElementById('title');

	// 🔍 Sélectionner des éléments par leur balise
	const listItems = document.getElementsByTagName('li');

	// 🔍 Sélectionner des éléments par leur classe
	const buttons = document.getElementsByClassName('btn');

	// 🔍 Sélectionner le premier élément correspondant à un sélecteur
	const firstListItem = document.querySelector('li');

	// 🔍 Sélectionner tous les éléments correspondant à un sélecteur
	const allListItems = document.querySelectorAll('li');

	// 🔍 Modifier le contenu d'un élément
	titleElement.textContent = 'Nouveau titre';

	// 🔍 Ajouter un événement au clic du bouton d'ajout
	const addButton = document.getElementById('btnAdd');
	addButton.addEventListener('click', () => {
	const newItem = document.createElement('li');
	newItem.textContent = 'Nouvel élément';
	document.getElementById('list').appendChild(newItem);
	});

	// 🔍 Ajouter un événement au clic du bouton de suppression
	const removeButton = document.getElementById('btnRemove');
	removeButton.addEventListener('click', () => {
	const firstItem = document.querySelector('li');
	if (firstItem) {
	document.getElementById('list').removeChild(firstItem);
	}
	});
	</script>
	</body>
	</html>