DOM - Pracht Pierre

D.O.M.
Modèle Objet de Document
Ou comment parler à la page pour la
rendre plus vivante.
DOM, cela veut dire :



Document : C’est tout simplement la page
HTML vue par l’utilisateur. Ne pas confondre
avec le fichier HTML qui a été chargé.
Objet : C’est le concept informatique d’objet.
Il est nommé ainsi par analogie avec les
objets du monde réel.
Modèle : Représentation reproduisant les
caractéristiques et comportements de façon
appréhendable par l’ordinateur.
DOM, une interprétation :




C’est une représentation sous forme d’objet
informatique du code HTML tel qu’il a été
compris et affiché par le navigateur.
Pouvoir manipuler cette représentation, c’est
pouvoir agir sur l’affichage de la page.
Ce qui est possible, est au plus ce que
permet le langage HTML.
Ce qui limite, c’est la qualité du modèle.
L’Objet : L’outil de modélisation



La représentation de la page est construite en
la décomposant en Objets génériques.
C’est une utilisation de la programmation
orientée Objet, il est utile de comprendre ce
que recouvre le concept d’Objet informatique.
Utiliser le DOM, ce n’est pas faire de la
programmation orientée Objet. C’est
employer le modèle Objet fournit par le
navigateur.
Ce qu’est un Objet informatique


Le concept d’Objet a été nommé ainsi par
analogie avec les objets du monde réel.
Un Objet a des :

Propriétés : son état statique caractéristique.
Ex : Objet téléphone Propriété allumé
allumé permet de savoir si le téléphone est allumé,
en assignant une valeur à allumé on peut changer son état

Méthodes : comportement dynamique,
traitements qu’il peut effectuer.
Ex: Objet téléphone Méthodes appeler()
appeler(0324232) permet d’effectuer un appel
Des notions de programmation Objet



La programmation orientée Objet c’est
utiliser le concept d’Objet pour structurer les
programmes.
Un objet en informatique c’est la réunion :
 De variables (Propriétés)
 Et de Code (Méthodes)
Dans un ensemble cohérent et opaque vu de
l’extérieur (Encapsulation)

Ex : vous vous moquer de savoir comment fonctionne votre
téléphone
Programmation Objet : La généricité


Tous les téléphones ont les mêmes fonctionnalités
(propriétés, méthodes), il est inutile de les définir
pour chacun. On parle de Classe d’Objet, on y
définit l’ensemble des propriétés et méthodes de
ces objets.
Un Objet un_téléphone manipulé par le programme
sera une Instance de la Classe téléphone


Le téléphone_de_Paul sera représenté par une Instance
de la Classe. Il aura la Propriété d’être rouge.
Le téléphone_de_Jean sera représenté par une autre
Instance de la Classe. Il aura la Propriété d’être vert.
Programmation Objet : tout un
monde

Il existe d’autres concepts en programmation
orientée Objet notamment :
 L’Héritage :
Les téléphones portables et fixes ont beaucoup de points
communs, on peut les définir dans la Classe téléphone
(Parent). Ce qui est propre au téléphone fixe sera définit
dans la Classe téléphone_fixe (Enfant), et ce qui est
propre au téléphone mobile sera définit dans la Classe
téléphone_mobile (Enfant).

Le Polymorphisme :
on utilise un téléphone_fixe comme un téléphone_mobile.
Les concepts Objets utiles en JavaScript


On se limitera aux Objets fournit par le navigateur :
 On modifiera ces Objets en lisant ou assignant
les valeurs à leurs Propriétés.
 On utilisera ces objets en appelant leurs
Méthodes.
Ces Objets seront :
 Les Objets issus de la page HTML affichée
(Par le biais de l’objet document en général).
 De Nouveaux Objets que l’on aura créés par
l’instanciation d’une Classe
(l’opérateur new de JavaScript rempli cette
fonction)
Exemples d’objets JavaScript :



document.write('<h1>dans la page !</h1>');
Appelle la méthode write de l’objet document avec
comme paramètre '<h1>dans la page !</h1>' : Action
d’écrire dans la page.
alert(document.location);
Lit la propriété location de l’objet document et
l’affiche dans un dialogue (alert)
document.location='file:///C:/';
Modifie la page affichée en mettant la valeur
'file:///C:/‘ dans la propriété location de l’objet
document
Exemples d’objets JavaScript :
Changer une image
<HTML>
<HEAD>
<TITLE>puce_rouge</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">
<!—
rslt = new Image();
rslt.src = 'images/puce_rouge_01-over.gif'
function changeOver() { document.images['puce_rouge_01'].src =
'images/puce_rouge_01-over.gif'; }
function changeOut() { document.images['puce_rouge_01'].src =
'images/puce_rouge_01.gif'; }
// -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" ONMOUSEOVER="changeOver();" ONMOUSEOUT="changeOut();">
<IMG NAME="puce_rouge_01"
SRC="images/puce_rouge_01.gif" BORDER="0"></A>
</BODY>
</HTML>
Exemples d’objets JavaScript :
Les Objet de Type Image

rslt = new Image();
L’opérateur new crée une Instance de la
Classe Image et l’affecte à la variable rslt
qui sera ainsi un Objet de Classe(Type)
Image.
Rq: Image() est ce qu’on appelle un
Constructeur.
Exemples d’objets JavaScript :
Les Objet de Type Image

rslt.src = 'images/puce_rouge_01-over.gif';
On affecte la valeur
'images/puce_rouge_01-over.gif‘ à la
propriété src de l’Objet rslt
Exemples d’objets JavaScript :
Les Objet de Type Image

document.images['puce_rouge_01'].src =
'images/puce_rouge_01-over.gif';
L’Objet document a une propriété images
qui est un tableau référençant tous les
Objets de Classe(Type) Image de la page
Rq : sur le modèle Objet de JavaScript



Image() est ce qu’on appelle un
Constructeur Son rôle est d’initialiser l’Objet
avant son utilisation. En JavaScript c’est tout
simplement une fonction. C’est elle qui
définit également la Classe
Il n’existe pas de distinction entre Classe et
Type car les variables (et Objets) ne sont
pas typées.
Pour les mêmes raisons le polymorphisme
est implicite du fait de l’absence de Type.
Rq : sur le modèle Objet de JavaScript



Les Objets sont en fait des tableaux
associatifs (dictionnaire) d’où la dualité :
notation pointée et adresse entre crochets.
Ainsi la notion de Classe est facultative,
JavaScript n’est pas un langage Objet. Il ne
fait qu’emprunter la notation pointée courante
dans un langage Objet.
Le seul intérêt est d’utiliser les Objets du
navigateur.
Le DOM ne s’est pas fait en un jour

L’évolution vers le concept de DOM
s’est fait en trois grandes étapes :



Les débuts du JavaScript
L’apparition des « calques »
Le vrai modèle de document
Les débuts du DOM


Dés le début JavaScript a incorporé des Objets
représentant différents éléments, on retiendra
surtout la possibilité de manipuler les éléments :

window : la fenêtre du navigateur
 document : le document affiché
 form : formulaire
 image : image
Des possibilités limitées définies principalement par
leurs simplicités, aucune ne change profondément
l’affichage de la page.
Les débuts du DOM : Les collections


Avec les premiers navigateurs JavaScript, on n’a
accès qu’a un nombre limité d’éléments, les
formulaires et les images principalement.
On y accède par le biais des collections :
Ce sont des Propriétés de l’objet document, qui
contiennent un tableau regroupant l’ensemble des
éléments HTML du type correspondant
 document.images[]
Toutes les images de la page (balise IMG)
 document.forms[]
Tous les formulaires de la page (balise FORM)
Les collections et l’attribut name

Les collections sont un tableau donnant accès à
l’ensemble des éléments d’un type donnés.
 document.images[0] est la première image de la page
 document.images[1] est la seconde image de la page


…
En utilisant l’attribut name de la balise, on peut
retrouver directement l’élément.


Code HTML :
<IMG NAME="puce_rouge_01" … >
Code JavaScript :
document.images['puce_rouge_01']
La guerre des navigateurs


Avec la sortie des navigateurs de quatrième
génération, Netscape et Microsoft se livrèrent une
concurrence féroce. L’enjeu était la domination du
marché avec pour argument des pages plus
dynamiques, plus attrayantes, le Dynamic HTML.
Chacun proposa sa propre solution, totalement
incompatible avec celle de l’autre.
 Netscape : Les Layers
 Microsoft : DHTML Object Model
Aujourd'hui on connaît la fin de l’histoire,
Microsoft a gagné.
Netscape : Les Layers (calques)





Le modèle choisi par Netscape était très simple, les
calques sont considérés un peu comme des
documents indépendants (Mais dans le même fichier).
Il sont déclarés par la balise <layer>
On peut les superposer, déplacer, cacher et
redimensionner.
On y accède par la collection :
document.layers[]
On utilise l’attribut id pour nommer les éléments
(comme pour name les autres collections)
Netscape : Le perdant






Le concept de layer n’était pas très novateur, il offre
des possibilités assez limitées.
C’est un ajout de plus au code HTML, qui plus est
totalement propriétaire.
Netscape a été incapable de sortir un navigateur de
cinquième génération.
Netscape a perdu la guerre commerciale
Netscape a placé sa technologie en Open Source
pour lui donner un avenir (Mozilla)
Les Layers sont tombés dans l’oubli, Mozilla le
successeur ne les prend pas en charge.
L’étape intermédiaire du DOM




C’est Microsoft qui a promulgué le concept de
Modèle Objet de Documents avec IE 4.0
Il a introduit la possibilité de manipuler la quasitotalité du document. Ainsi que l’exploitation du
modèle Objet pour regrouper les propriétés et
méthodes communes.
Mais il l’a fait de façon propriétaire. Il a été employé
le terme de DOM à son sujet, mais aujourd'hui on y
fait référence par : DHTML Object Model
C’est Internet Explorer 4.0 qui a "inventé" le DHTML
DHTML Object Model






Le modèle de IE4 possède beaucoup de similitudes
avec le DOM tel qu’il a été standardisé.
document.all[] permet d’accéder à l’ensemble du
document (tous les éléments HTML).
On utilise l’attribut id pour nommer les éléments.
Il est possible de changer dynamiquement le
contenu de la page.
Il n’est supporté que par Microsoft qui le garde pour
des raisons de compatibilité ascendante.
IE5 supporte assez bien le vrai DOM standard
Le DOM, le vrai !



C’est un standard fixé par le W3C, qui évolue
http://www.w3.org/DOM/
Le Modèle Objet de Document est une interface de
programmation indépendante de la plateforme et du
langage. Elle permet aux programmes et scripts
d’accéder dynamiquement et de mettre à jour le
contenu, la structure et les styles d’un document.
Il a été développé pour permettre la portabilité de
scripts JavaScript et de programmes Java d'un
navigateur Web à l'autre.
Rapport entre DOM et XML
Langage de balisage extensible





XML est un méta langage c’est-à-dire qu’il permet
de définir des langages.
XML utilise le même système de balise que HTML
Par exemple : XHTML est la transposition du HTML
suivant les spécifications XML.
Le but d’XML est de définir un format d’échange
d’information aussi universel que le HTML, mais
avec une interopérabilité parfaite avec toutes
plateformes et langages.
Le DOM est un des outils permettant d’employer le
XML dans un programme.
Ce que représente le DOM :
un document HTML
<html>
<head>
<title>Test</title>
</head>
<body>
<h3>Un titre</h3>
<p id="para">Un texte
<b>en gras</b>
</p>
</body>
</html>
Ce qu’affiche
le navigateur
Ce que représente le DOM :
une arborescence
Ce que comprend le navigateur
<html>
<head>
<title>Test</title>
</head>
<body>
<h3>Un titre</h3>
<p id="para">Un texte
<b>en gras</b>
</p>
</body>
</html>
Ce que représente le DOM :
explication du modèle





Le langage HTML est constitué de balises.
Une balise ouvrante et une balise fermante forment
un élément HTML.
Un élément HTML peut contenir d’autre éléments,
on les appelle éléments enfants.
Il existe un élément particulier l’élément #text
Il ne peut pas avoir d’éléments enfants.
Il contient simplement du texte littéral.
Le DOM modélise tout cela par une arborescence
reflétant l’imbrication et les relations parent/enfants
Comment accéder au DOM :
La racine de l’arborescence




C’est l’Objet document qui est le point d’entrée du
DOM
Il possède une propriété documentElement qui donne
accès à l’élément racine d’un document HTML,
l’élément HTML.
Pour des raisons de compatibilité il est préférable
d’utiliser document.documentElement pour accéder à
l’élément HTML.
<a href="javascript:alert(
document.documentElement.nodeName)">…
<a href="javascript:alert(
document.nodeName)">…
Comment accéder au DOM :
Un ou des éléments particuliers
L’Objet document possède des méthodes
pour aider à retrouver des éléments HTML
<p>texte</p>
<p id="para">Un texte
<b>en gras</b></p>
Sélectionner l’élément ayant un id particulier
document.getElementById('para')
Comment accéder au DOM :
Un ou des éléments particuliers
L’Objet document possède des méthodes
pour aider à retrouver des éléments HTML
0 <p>texte</p>
1 <p id="para">Un texte
<b>en gras</b></p>
0
1
Sélectionner tous les éléments ayant un
nom de balise données, retourne un tableau:
document.getElementsByTagName('p')
Ici on appel le 1er :
document.getElementsByTagName('p')[0]
0
Le modèle Objet du DOM :
Structure et éléments
Le DOM modélise la structure
des éléments du document
HTML sous la forme d’une
arborescence d’Objets.
Les Objets du modèle ont des
propriétés et méthodes :
Communes pour la structure
Distinctes suivant le type
d’éléments
HTML HEAD BODY H1 P #text
Le modèle Objet du DOM :
Le concept de la structure arborescente
Le DOM modélise
l’arborescence par le biais de
relations parent/enfants.
On considère l’élément BODY
Parent désigne l’élément dans
lequel il est inclus
Frère désigne les éléments
ayant même parent
Enfant désigne les éléments
dont il est le parent
Le concept de la structure arborescente
Le parent d’un noeud
Le DOM modélise
l’arborescence par le biais de
relations parent/enfants.
On considère l’élément BODY
BODY a pour parent HTML
En notation Objet :
Mon_BODY.parentNode ==
Mon_HTML
Le concept de la structure arborescente
Les enfants d’un noeud
Le DOM modélise
l’arborescence par le biais de
relations parent/enfants.
On considère l’élément BODY
BODY a pour enfants :
H1 P
P
En notation Objet :
Mon_BODY.childNodes[0]
Mon_BODY.childNodes[1]
Mon_BODY.childNodes[2]
Le concept de la structure arborescente
Le premier enfant d’un noeud
Le DOM modélise
l’arborescence par le biais de
relations parent/enfants.
On considère l’élément BODY
BODY a pour premier enfant
H1
En notation Objet :
Mon_BODY.firstChild ==
Mon_H1
Le concept de la structure arborescente
Le dernier enfant d’un noeud
Le DOM modélise
l’arborescence par le biais de
relations parent/enfants.
On considère l’élément BODY
BODY a pour dernier enfant
P
En notation Objet :
Mon_BODY.lastChild ==
Second_P
Le concept de la structure arborescente
Le frère « aîné » d’un noeud
Le DOM modélise
l’arborescence par le biais de
relations parent/enfants.
On considère l’élément BODY
BODY a pour frère « aîné »
HEAD
En notation Objet :
Mon_BODY.previousSibiling
== Mon_HEAD
Le concept de la structure arborescente
Le frère « cadet » d’un noeud
Le DOM modélise
l’arborescence par le biais de
relations parent/enfants.
On considère l’élément BODY
BODY n’a pas de frère «cadet»
En notation Objet :
Mon_BODY.nextSibiling ==
undefine
Le modèle Objet du DOM :
Parcourir la structure arborescente ?





Les modélisations des relations parent/enfants dans
les Objets du DOM permettent de « parcourir » le
document.
On peut ainsi « atteindre » n’importe quel objet
figurant un élément HTML.
Malheureusement tous les navigateurs ne donnent
pas la même interprétation d’un document HTML. Ils
interprètent différemment les éléments « vides ».
On préférera l’usage de :
document.getElementById(‘un_id');
Mais comprendre le modèle du DOM est
indispensable, si on souhaite pouvoir le manipuler.
Le modèle Objet du DOM :
Les éléments « vides »
Deux documents HTML
<html>
<head>
<title>Test</title>
</head>
<body>
<h3>Un titre</h3>
<p id="para">Un texte
<b>en gras</b>
</p>
</body>
</html>
<html>
<head>
<title>Test</title>
</head>
<body><h3>Un titre
</h3><p id="para">Un texte
<b>en gras</b></p></body></html>
Un même affichage
Le modèle Objet du DOM :
Les éléments « vides »


<html>
<head>
<title>Test</title>
</head>
<body>
<h3>Un titre</h3>
<p id="para">Un texte
<b>en gras</b>
</p>
</body>
</html>
Beaucoup de nœuds texte sont le
résultat d’espaces entre les balises.
Le modèle Objet du DOM :
Les éléments « vides »



<html>
<head>
<title>Test</title>
</head>
<body><h3>Un titre
</h3><p id="para">Un texte
<b>en
gras</b></p></body></html>
Il est possible d’éviter les éléments
vides, mais cela ne facilite pas la lecture
du code HTML.
XML a été conçut pour parer à de telles
ambiguïtés.
Le modèle Objet du DOM :
Modifier la structure arborescente




Le concept parent/enfants est également employé
pour permettre de modifier le document.
C’est ce qui rend le DOM si intéressant, c’est la
possibilité de changer intégralement la structure du
document.
On réalise cela par le biais d’une interface de
programmation simple et adaptée, sans réaliser un
programme qui « écrive » du HTML
Il est inutile de « recharger » la page pour visualiser
les changements, ils sont immédiatement
répercutés sur l’affichage.
Modifier la structure arborescente
Le support d’exemples




On utilisera cette page HTML
comme support des exemples
Elle comporte un bouton pour lancer
le code
Elle est constituée de divisions
imbriquées figurant la structure
hiérarchique des éléments, on leur
a appliqué un style.
Des id ont été placés pour :


Notre cible : id="notre_cible"
2nd enfant : id="un_enfant"
Le support d’exemples :
La feuille de style


Le but est simplement de
visualiser aisément la
structure du document
div {
border: 5px solid blue;
padding: 5px;
margin : 5px;
font-size: 30px;}
Le support d’exemples :
Le code HTML
<body>
<input type="button"
value="GO , GO , GO ..."
onclick="ma_fct()">
<div>
le grand père
<div>Le frère aîné</div>
<div id="notre_cible">
Notre cible
<div>1er enfant</div>
<div id="un_enfant">
2nd enfant</div>
<div>3iem enfant</div>
</div>
<div>Le frère cadet</div>
</div>
</body>
Le support d’exemples :
La représentation du DOM
Le support d’exemples :
Le code JavaScript

Le code JavaScript est appelé par le bouton,
il comporte les étapes suivantes :





Placer dans des variables des références à des
Objets figurant des éléments de la page en se
basant sur leurs id : "notre_cible" "un_enfant".
Construire de nouveaux éléments et garder dans
une variable une référence à leurs Objets.
Assembler ces Objets entre eux.
Insérer dans le DOM les Objets ainsi construis.
Il ne restera qu’à visualiser le résultat.
Le code JavaScript
L’appel du code

On déclare une fonction dans les entêtes :
<script language="JavaScript">
<!--
function ma_fct() {
}
//On place le code içi …
// -->
</script>

On appelle cette fonction lorsque l’on clique
sur le bouton :
<input type="button" value="GO , GO , GO ..."
onclick="ma_fct()">
Le code JavaScript
Obtenir des références sur des éléments



On retrouve les éléments par
leurs id et l’on place une
référence à l’Objet dans une
variable.
var Notre_Cible =
document.getElementById(
'notre_cible');
var Un_Enfant =
document.getElementById(
'un_enfant');
Le code JavaScript
Construire de nouveaux éléments

Il existe deux méthodes de l’Objet document
suivant le type d’éléments que l’on veut créer

Pour un élément correspondant à une Balise
var Mon_Visiteur =
document.createElement('div');
La représentation
correspondant au
DOM
Le code HTML
qui correspondrait
<div></div>
L’affichage qu’il
donnerait
Le code JavaScript
Construire de nouveaux éléments

Il existe deux méthodes de l’Objet document
suivant le type d’éléments que l’on veut créer

Pour un élément recevant du texte
var Texte_Mon_Visiteur =
document.createTextNode('mon visiteur');
La représentation
correspondant au
DOM
Le code HTML
qui correspondrait
Mon visiteur
L’affichage qu’il
donnerait
Le code JavaScript
Assembler les Objets entre eux


Assembler les Objets c’est définir leurs relations
parent/enfants
Pour définir que Texte_Mon_Visiteur est un enfant
de Mon_Visiteur :
Mon_Visiteur.appendChild(Texte_Mon_Visiteur);
La représentation
correspondant au
DOM
Le code HTML
L’affichage qu’il
qui correspondrait donnerait
<div></div>
<div>
Monvisiteur
visiteur
Mon
</div>
Le code JavaScript
Insérer dans le DOM de la page




Les éléments que l’on vient de
construire n’apparaissent pas
dans la page.
Il faut les insérer de la même
façon qu’on les a assemblés
On va placer Mon_Visiteur
comme un enfant de
Notre_Cible .
On utilisera exactement la
même méthode.
Le code JavaScript
Insérer un élément dans le DOM de la page



La variable Notre_Cible
référence l’élément qui sera le
parent.
On va lui ajouter comme enfant.
l’élément référencé par
Mon_Visiteur
Notre_Cible.appendChild(
Mon_Visiteur);
Le code JavaScript : Le résultat




Il suffit d’un appui sur le
bouton pour lancer le code et
visualiser le résultat
L’affichage est immédiat
Chercher l’intrus
Je ne vous montre pas le code
HTML correspondant a cette
affichage car il n’a jamais été écrit,
ni par vous ni par le navigateur. On
a directement manipulé la structure
de la page.
Le code JavaScript : tout le code
<html>
<head><title>Test</title></head>
<style type="text/css">
div { border: 5px solid blue;
padding: 5px;
margin : 5px;
font-size: 30px;}
</style>
<script language="JavaScript">
<!-function ma_fct() {
var Notre_Cible=
document.getElementById('notre_cible');
var Un_Enfant=
document.getElementById('un_enfant');
var Mon_Visiteur=
document.createElement('div');
var Texte_Mon_Visiteur=
document.createTextNode('mon visiteur');
Mon_Visiteur.appendChild(
Texte_Mon_Visiteur);
Notre_Cible.appendChild(Mon_Visiteur);
}
// --></script>
<body>
<input type="button"
value="GO , GO , GO ..."
onclick="ma_fct()">
<div>
le grand père
<div>Le frère aîné</div>
<div id="notre_cible">
Notre cible
<div> 1er enfant</div>
<div id="un_enfant">
2nd enfant</div>
<div>3iem enfant</div>
</div>
<div>Le frère cadet</div>
</div>
</body>
</html>
Le support d’exemples :
Variation sur un thème

Le modèle DOM offre
d’autres possibilités
pour modifier le
document

exemples\
support_exemples\
tous_exemples.html
Le support d’exemples :
Variation sur un thème


Placer Mon_Visiteur
avant Un_Enfant
Notre_Cible.insertBefore(
Mon_Visiteur,Un_Enfant);
Le support d’exemples :
Variation sur un thème


Remplace Un_Enfant
par Mon_Visiteur
Notre_Cible.replaceChild(
Mon_Visiteur,Un_Enfant);
Le support d’exemples :
Variation sur un thème



Place Notre_Cible
avant le 1er fils de
Notre_Cible
Notre_Cible.insertBefore(
Mon_Visiteur,
Notre_Cible.firstChild);
Pour ceux qui n’ont pas
suivi le 1er fils est en fait
l’élément #text
Le support d’exemples :
Variation sur un thème



Place Mon_Visiteur avant
le 2nd fils de Notre_Cible
Notre_Cible.insertBefore(
Mon_Visiteur,
Notre_Cible.childNodes[1]);
Rappel : childNodes est un
tableau, les indices
commencent à O, donc 1
désigne le 2nd
Le support d’exemples :
Variation sur un thème


Efface Un_Enfant
Notre_Cible.removeChild(
Un_Enfant);
Le support d’exemples :
Variation sur un thème



Efface le dernier enfant de
Notre_Cible
Notre_Cible.removeChild(
Notre_Cible.lastChild);
Il est possible qu’il faille
appuyer 2 fois, car le
dernier élément peut être
un élément vide !
La propriété innerHTML




La propriété innerHTML désigne
le code HTML présent dans
l’élément.
Ce n’est pas une fonction
standard, mais elle est très
pratique
Ici on modifie le contenu de
Un_Enfant
Un_Enfant.innerHTML=
'plusieurs <b>éléments</b><br>
deux lignes';
La propriété innerHTML

Tout le contenu de
Un_Enfant a été remplacé
par le code HTML
'plusieurs <b>éléments</b><br>
deux lignes';

On peut remarquer que
cela a donné un ensemble
d’éléments qui est le
résultat de l’analyse de la
chaîne de caractères.
Le support d’exemples :
Variation sur un thème



Je vous laisse deviner ce que
cela fait.
C’est facile à voir, plus dur à
comprendre.
Un_Enfant.innerHTML=
'<input type="button"
value="Kill Me."
onclick="document.getElement
ById(\'notre_cible\').removeC
hild(document.getElementById
(\'un_enfant\'))">';
Conclusion



On a vu des manipulations sur un exemple
très simple, mais imaginez ce que l’on peut
faire en manipulant des tableaux ,des images
ou simplement du texte sur une page entière.
Attention bien vérifier le fonctionnement sur
différent navigateur, notamment pour les
formulaires et les listes numérotées.
Et ce n’est pas fini, reste les manipulations
sur les propriétés des éléments, c’est plus
simple mais pas moins riche en possibilités.