Ceci est une ancienne révision du document !
Javascript - DOM
Le DOM, Document Object Model correspond à la l'ensemble des objets définis de manière arborescente générés par le navigateur par l'interprétation d'un document HTML.
Le DOM fourni une API permettant sa manipulation, à partir de Javascript.
Les éléments du DOM sont des objets, disposant de propriétés, de méthodes et peuvent être associés à des évènements.
document & accès aux objets
La variable document est l'objet racine généré par un document HTML. Elle permet d'accéder à l'ensemble des objets instanciés dans une page.
Exemple d'accès à un élément par son id,
et modification de son contenu grace à la propriété innerHTML :
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById('demo').innerHTML = 'Hello World!';
</script>
</body>
</html>
La propriété innerHTML est accessible sur tous les éléments d'une page (y compris son body), et permet d'affecter un contenu HTML à l'élément.
Accès par id
Un id est unique dans une page Web : le meilleur moyen d'accéder à un élément précis de la page est de le faire par son id :
Accès à l'élément d'id intro :
const element=document.getElementById('intro');
<h1>Introduction</h1>
<div id="intro">
<p>Lorem ipsum</p>
</div>
<p>Lorem ipsum</p>
Accès par tagName
Le tagName correspond au type d'un élément défini par sa balise ouvrante (p, div, a, span…).
Recherche des éléments de type p :
const elements=document.getElementsByTagName('p');
<h1>Introduction</h1>
<div id="intro">
<p>Lorem ipsum</p>
</div>
<p>Lorem ipsum</p>
Accès par Classe CSS
La classe CSS permet bien évidemment d'attribuer des styles CSS, mais offre également la possibilité de sélectionner des éléments.
Recherche des éléments de la classe myClass :
const elements=document.getElementsByClassName('myClass');
<h1>Introduction</h1>
<div id="intro" class="myClass">
<p>Lorem ipsum</p>
</div>
<p class="para myClass">Lorem ipsum</p>
Accès par sélecteur CSS
Les sélecteurs CSS permettent également de sélectionner des éléments.
Recherche des éléments de type p contenus dans un élément de classe myClass :
const elements=document.querySelectorAll('.myClass p');
querySelectorAll() retourne la collection d'éléments sélectionnés, tandis que querySelector() retourne le premier élément correspondant.
<h1>Introduction</h1>
<div id="intro" class="myClass">
<p>Lorem ipsum</p>
</div>
<p class="para myClass">Lorem ipsum</p>
jcheron