Tutoriel JavaScript DOM avec exemple

Qu’est-ce que le DOM en JavaScript ?

JavaScript peut accéder à tous les éléments d'une page Web en utilisant le modèle d'objet de document (DOM). En fait, le navigateur Web crée un DOM de la page Web lorsque la page est chargée. Le modèle DOM est créé sous la forme d'une arborescence d'objets comme celle-ci :

DOM en JavaScript

Comment utiliser DOM et les événements

En utilisant DOM, JavaScript peut effectuer plusieurs tâches. Il peut créer de nouveaux éléments et attributs, modifier les éléments et attributs existants et même supprimer des éléments et attributs existants. JavaScript peut également réagir aux événements existants et créer de nouveaux événements dans la page.

getElementById, exemple innerHTML

  1. getElementById : pour accéder aux éléments et attributs dont l'identifiant est défini.
  2. innerHTML : Pour accéder au contenu d'un élément.

Essayez cet exemple vous-même :

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1 id="one">Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p>This is the technology section.</p>
  <script type="text/javascript">
		var text = document.getElementById("one").innerHTML;
		alert("The first heading is " + text);
  </script>
</body>
</html>

Exemple getElementsByTagName

getElementsByTagName : pour accéder aux éléments et aux attributs à l'aide du nom de la balise. Cette méthode renverra un tableau de tous les éléments portant le même nom de balise.

Essayez cet exemple vous-même :

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p id="second">This is the technology section.</p>
  <script type="text/javascript">
	var paragraphs = document.getElementsByTagName("p");
    alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
    document.getElementById("second").innerHTML = "The orginal message is changed.";
  </script>
</body>
</html>

Exemple de gestionnaire d'événements

  1. createElement : Pour créer un nouvel élément
  2. RemoveChild : Supprimer un élément
  3. Vous pouvez ajouter un gestionnaire d'événements à un élément particulier comme celui-ci :
document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

OR

document.getElementById(id).addEventListener("click", functionname)

Essayez cet exemple vous-même :

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <input type="button" id="btnClick" value="Click Me!!" />
  <script type="text/javascript">
	document.getElementById("btnClick").addEventListener("click", clicked);
    function clicked()
    {
   		 alert("You clicked me!!!");
    }	
  </script>
</body>
</html>