JAVASCRIPT : document.getElement
document.getElement :

Voici les méthodes Javascript pour sélectionner un élément afin de pouvoir modifier son style :

getElementById()

sélection par attribut HTML ID.

getElementsByName()

sélection par attribut HTML NAME.

getElementsByTagName()

sélection par nom de balise HTML

getElementsByClassName()

sélecteur par identifiant présent dans attribut HTML CLASS.

A savoir :

On peut utiliser indifféremment les attributs id et class pour appliquer des styles CSS aux éléments d'une page et interagir avec eux en JavaScript.

Il existe des différences entre une classe (.maClasse) et un id (#monID).

Un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page.
Une classe peut caractériser plusieurs objets (identiques ou non).
Vous trouverez ci-desous divers exemples.
document.getElementById()

Cliquez sur un bouton !

Code JavaScript :
<script>
   function changeCouleur(Couleur, Texte) {
  var elem = document.getElementById("paragraphe");
  elem.style.color = Couleur;
  elem.innerHTML = Texte;
}
   </script>
Code HTML :
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>document.getElementById</title>
	  <style> 
	  .button {
  background-color: #555555; /* noir */
  border: none;
  color: white;
  padding: 10px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
 }
	  </style> 
 </head>
 <body>
  <h3>Clique sur un bouton !</h3>

 <button class="button" onclick="changeCouleur('#339966','Bouton vert');">Vert</button>
<button class="button" onclick="changeCouleur('blue','Bouton bleu');">Bleu</button> 
 <button class="button" onclick="changeCouleur('red','Bouton rouge');">Rouge</button>
  
 <div>
 <p id="paragraphe"> </p>
 </div>
  <script>
   function changeCouleur(Couleur, Texte) {
  var elem = document.getElementById("paragraphe");
  elem.style.color = Couleur;
  elem.innerHTML = Texte;
}
   </script>
 </body>
</html>
getElementsByTagName()

Cliquez sur « Modifier » pour modifier le deuxième élément p dans « monDIV ».

Je suis le paragraphe 1.

Je suis le paragraphe 2.

Je suis le paragraphe 3.

Code JavaScript :
<script>
 function maFonction() {
  const element = document.getElementById("monDiv");
  element.getElementsByTagName("p")[1].style.fontSize = "24px";
}
   </script>
Code HTML :
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>document.getElementsByTagName()</title>
	  <style> 
	  .button {
  background-color: #555555; /* noir */
  border: none;
  color: white;
  padding: 10px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
 }
	  </style> 
 </head>
 <body>
  <p>Cliquez sur « Modifier » pour modifier le deuxième élément p dans « monDIV ».</p>

 <button class="button" onclick="maFonction()">Modifier</button>

  
 <div id="monDiv">
 <p id="paragraphe"> e suis le paragraphe 1.</p>
  <p>Je suis le paragraphe 2.</p>
  <p>Je suis le paragraphe 3.</p>
 </div>
  <script>
   function maFonction() {
  const element = document.getElementById("monDiv");
  element.getElementsByTagName("p")[1].style.fontSize = "24px";
}
   </script>
 </body>
</html>
getElementsByName()

Veuillez remplir les champs ci-dessous.

Homme Femme
Code JavaScript :
<script>
 function submitForm() {
    var nom = document.getElementsByName('nom')[0].value;
    var prenom = document.getElementsByName('prenom')[0].value;
    var sexe = document.querySelector('input[name="sexe"]:checked');
    
    if (nom && prenom && sexe) {
        var sexeValue = sexe.value;
        alert('Votre nom : ' + nom + '\nVotre prénom : ' + prenom + '\nSexe : ' + sexeValue);
    } else {
        alert('Veuillez remplir tous les champs.');
    }
}
   </script>
Code HTML :
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>document.getElementsByName()</title>
	  <style> 
	  .button {
  background-color: #555555; /* noir */
  border: none;
  color: white;
  padding: 10px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
 }
	  </style> 
 </head>
 <body>
  <p>Veuillez remplir les champs ci-dessous. </p>
<div class = 'form'>
 <form>
      <input type="text" name="nom" placeholder="Entrer votre nom">
      <input type="text" name="prenom" placeholder="Entrer votre prénom">
      <div>
          <input type="radio" name="sexe" value="Masculin"> Homme
          <input type="radio" name="sexe" value="Feminin"> Femme
      </div>
  </form>
  <button class="button" onclick="submitForm()">Submit</button>
  </div>
 <script>
function submitForm() {
    var nom = document.getElementsByName('nom')[0].value;
    var prenom = document.getElementsByName('prenom')[0].value;
    var sexe = document.querySelector('input[name="sexe"]:checked');
    
    if (nom && prenom && sexe) {
        var sexeValue = sexe.value;
        alert('Votre nom : ' + nom + '\nVotre prénom : ' + prenom + '\nSexe : ' + sexeValue);
    } else {
        alert('Veuillez remplir tous les champs.');
    }
}
   </script>
 </body>
</html>
getElementsByClassName()

Changez le texte du deuxieme élément avec class="exemple"

Element 1
Element 2
Element 3
Code JavaScript :
<script>
 const classexemple = document.getElementsByClassName("exemple");
classexemple[1].innerHTML = "Element 2 modifier";
  classexemple[1].style.color = 'red';
   </script>
Code HTML :
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>document.getElementsByClassName()</title>
 </head>
 <body>
  <p>Changez le texte du deuxieme élément avec class="exemple"</p>

<div class="exemple">Element 1</div>
<div class="exemple">Element 2</div>
<div class="exemple">Element 3</div>
 <script>
const classexemple = document.getElementsByClassName("exemple");
classexemple[1].innerHTML = "Element 2 modifier";
  classexemple[1].style.color = 'red';
   </script>
 </body>
</html>