Le Document Object Model (DOM)

Le DOM est une interface de programmation pour les documents HTML et XML. Une interface de programmation (API : Application Programming Interface), est un ensemble d'outils qui permet, entre autres pour le JavaScript, de faire communiquer différents langages. Le DOM = API qui s'utilise avec les documents HTML et qui permet, via le JavaScript, d'accéder au code HTML d'un document.

Le JavaScript est un langage orienté objet :

L'objet document = la page Web elle-même et plus précisément la balise <html>. C'est grâce à cet élément qu’on peut accéder à tous les éléments HTML et les modifier.

Accéder aux éléments : L'accès aux éléments HTML via le DOM est simple : on peut utiliser la méthode : getElementById() ; Cette méthode permet d'accéder à un élément en connaissant son ID qui est simplement l'attribut id de l'élément.
Récupérer du HTML : La méthode innerHTML récupère le balisage et le contenu au sein d'un élément donné sous forme de texte.

Exemple 1 :

<!DOCTYPE html>
<html>

<head>
	<title>Exemple DOM 1</title>
</head>

<body>
	
	<div id="intro">
		<p>Visitez <a href="http://www.hei.fr">HEI</a></p>
	</div>
	
	<script>
		
		// on récupère l’élément identifié par l’ID 'intro'
		// on appelle la méthode innerHTML
		var mydiv = document.getElementById('intro').innerHTML;

		// on affche la pop-up
		alert(mydiv);
	
	</script>

</body>

</html>

Voir

Exemple 2 :

<!DOCTYPE html>
<html>

<head>

	<title>Exemple DOM 1</title>

	<style>

		.evident {
			background-color: lightgrey ;
			color:white ;
			padding : 20 px;
		}

	</style>


</head>

<body>
	
	<div id="intro">
		<p>Visitez <a href="http://www.hei.fr">HEI</a></p>
	</div>
	
	<script>
		
		// on applique le style
		document.getElementById('intro').className = 'evident' ;
	
	</script>

</body>

</html>

Voir