Fiche DOM HTML : Objet document

Objet de la fiche :

État de la fiche

Plan de la fiche :

| Avant-propos |
| Propriétés intrinsèques de l'objet document |
| Les noeuds dans un document HTML |
| Création dynamique d'un élément |
| Dupliquer un élément |
| Très important à retenir |
| Application au projet de site web |

Avant propos

Tous les objets qui peuvent être utilisés dans un document découlent de la classe HTMLElement, classe mère dont héritent tous les éléments HTML.
Grâce aux méthodes et propriétés disponibles pour cette classe il est possible de modifier le contenu textuel d'un élément, d'ajouter, supprimer ou modifier des éléments enfants de l'élément ainsi qu'assigner un ou plusieurs récepteurs d'évènements (onclick, onkeydown, onfocus, etc...) à l'élément.

Pour accéder à un objet HTMLElement correspondant à un élément HTML dans la page , on utilise en général les fonctions getElementById, getElementsByName et getElementsByTagName de l'objet document que nous allons détailler ci-dessous.

L'objet window.document possède ses propres propriétés intrinsèques, mais propose aussi des techniques de positionnement sur les différents noeuds représentant les éléments d'une page HTML.

En effet le modèle DOM consiste en une hiérarchie d'éléments (ou noeuds), de telle sorte qu'il est possible d'identifier un élément (ou noeud) particulier par son nom ou son identificateur (attributs name ou attribut id). Grâce à ces références (id ou name). On peut, à l'aide de JavaScript, accéder directement aux objets HTML et ainsi les manipuler à notre convenance. Javascript permet de naviguer au travers de cette hiérarchie en termes de parent et de noeuds enfants.

Propriétés intrinsèques de l'objet document

Syntaxe

x = window.document.propriété

x = window.document.méthode

Propriétés et méthodes

Propriétés générales de l'objet document
Propriétés	Commentaires
.cookie	Cette propriété permet d'accéder aux célèbres cookies. On utilise en général des fonctions d'écriture et de lecture des cookies existantes. Reportez vous à la fiche concernant les cookies pour plus de détail dans la fiche dédiée à leur utilisation : Accéder à la fiche cookies
.mimeType	Contient le type du document chargé. Le plus souvent mimeType contient document HTML. onclick="alert(Résultat : ' + window.document.mimeType);"
.domain	Contient le domaine de l'url complète de la page. onclick="alert('Résultat : ' + window.document.domain)"
.lastModified	Chaîne de caractères représentant la date de dernière modification de la page. Attention aux pages qui sont régénérées à chaque appel comme par exemple les pages PHP ou ASP. La date de modification est la date de génération donc pas très intéressante à exploiter dans ce cas. onclick="alert('Résultat : ' + window.document.lastModified)"
.location	Contient l'url complète de la page. onclick="alert('Résultat : ' + window.document.location)"
.protocol	Contient le type de protocole de chargement de la page. Peut valoir File, http, https, ... onclick="alert('Résultat : ' + window.document.protocol)"
.referrer	Contient l'url de la page d'où vient le visiteur, appelée page référant. Cette propriété très utile permet de connaître les sites referant, c'est-à-dire les sites qui font un lien vers vos pages. onclick="alert('Résultat : ' + window.document.referrer)"
.title	Contient le titre de la page, celui qui est défini entre les balises <title> et </title> du document. Cette propriété est modifiable sous Internet Explorer (window.document.title="toto" pour changer le titre courant de la page en toto). onclick="alert('Résultat : ' + window.document.title)"
.URLUnencoded	Contient l'url complète de la page, avec les caractères spéciaux encodés. Voir location pour l'url sans encodage. onclick="alert('Résultat : ' + window.document.URLUnencoded)"
.URL	Contient l'url complète de la page. Strictement équivalent à location. onclick="alert('Résultat : ' + window.document.URL)"

Méthodes de l'objet document

Méthodes

Commentaires

.getElementById("identificateur")

Retourne l'objet HTML à partir de son identificateur id. Pour se positionner sur un élément identifié par son attribut id et ainsi accéder aux propriétés de cet élément : title, src - width - height - alt pour une image, aux éléments d'un formulaire(action, submit ..), aux éléments de style etc.

Cette méthode est extrêmement utile pour modifier le DOM et construire une site web dynamique.

.getElementsByName( "nom")

Retourne l'objet HTML à partir du nom défini dans la propriété name de la balise de l'objet. Comme précédemment permet d'accéder aux attributs de l'objet.

.getElementsByTagName( "nom de la balise")

Retourne une liste des éléments relatifs à la balise donnée à l'exception de cet élément lui-même. La liste retournée est mise à jour automatiquement à chaque changement de l'arbre DOM.

.write(' texte')¹

Écrit le paramètre texte dans le document, à la position de l'appel du script. Le paramètre texte peut être une chaîne de caractères classiques, du code HTML et même du javascript.
<script type="text/javascript">document.write("Je suis du <b>texte</b> écrit à partir d'un <span style='color:red'>script</span>");</script>
donne lors de son exécution le résultat suivant :

.images[]

Renvoie un tableau contenant tous les objets image de la page. Peut s'appliquer de la même manière pour des formulaires (.forms.length) etc..

Méthodes applicables :

Méthodes	Commentaires
.length	Retourne le nombre d'éléments <img> du document.
.index	Retourne l'élément <img> avec l'index spécifié à partir de la collection (démarrage à 0). Renvoi null si l'index est en d'hors de la plage.
.item(index)	Retourne l'élément <img> avec l'index spécifié à partir de la collection (démarrage à 0). Renvoi null si l'index est en d'hors de la plage.
.namedItem(id)	Retourne l'élément <img> avec l'index spécifié. Renvoi null si l'index est en d'hors de la plage.

.forms[nom_formulaire]
ou si l'identificateur est celui d'un formulaire
.getElementById("identificateur")

Méthodes	Commentaires
.action	Permet d'accéder à l'action définie pour un formulaire
.encoding	Contient le type de "codage" des données du formulaire
.lenght	Nombre de formulaires que contient le document.
.method	Contient la "méthode de transmission des données" (get ou post) du formulaire. Cette méthode est définie grâce à l'attribut "method" de la balise "form" en HTML.
.name	Contient le nom du formulaire
.reset()	Action => Réinitialise un formulaire.
.submit()	Action => Soumet un formulaire
.target	Fenêtre cible du formulaire

Note¹ relative à document.write() : Attention

Exemple illégal

Même exemple légal

Le premier exemple est illégal du fait de la présence de la séquence de caractères "</b>" dans l'élément script : Le contenu d'un élément script est le code source d'un script, et en tant que tel, ne devra pas être considéré par le navigateur comme un fragment de HTML.

En effet les navigateurs doivent reconnaître le début du script immédiatement après la fermeture de la balise de début, et une fin de script juste avant un délimiteur ("</") suivi d'un caractère . Le source du script peut de ce fait ne pas être achevé par une balise </script>, mais peut s'arrêter sur toute balise commençant par "</" suivi d'un caractère alphabétique (</b>).

En conséquence, toute balise HTML qui est sensée être utilisée telle quelle doit être "échappée" (à l'aide du caractère \) de façon à ne pas provoquer de confusion d'interprétation de fin de script.

Quelques propriétés importantes de l'objet document.getElementById

x=window.document.getElementById('i_Tableau_MWD')

Types et attributs d'un noeud

Propriétés

Commentaires

Test

.className

Classe de l'élément ou noeud sur lequel on est positionné :
onclick="alert('Classe de l'élément : ' + x.className)";

.id

Lit ou positionne l'Identificateur de l'élément ou noeud sur lequel on est positionné :
onclick="alert('Identificateur de l'élément : ' + x.id)";

.title

Donne le contenu de l'attribut title de l'élément ou noeud sur lequel on est positionné :
onclick="alert('Titre de l'élément : ' + x.title)";

.attributes.length

Nombre d'attributs de l'élément ou noeud sur lequel on est positionné :
onclick=" alert('Nb attributs de l'élément : ' + x.attributes.length)";

.attributes[i].name
.attributes[i].value

Donne les noms et valeurs des attributs de l'élément ou noeud sur lequel on est positionné :

.classList

L'API classList permet d'accéder à la liste des classes appliquées à un élément HTML, de manière simple et efficace via les méthodes suivantes :

Méthodes	Commentaires
.length	Retourne le nombre de classes.
.add(Classe1 [, Classex])	Ajoute la ou les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée.
.remove(Classe1 [, Classex])	Supprime la ou les classes spécifiées. Note: Supprimer une classe qui n'existe pas NE génère PAS d'erreurs.
.item(Nombre)	Renvoie la classe correspondante à sa position dans la liste.
.toggle(Classe1 [, force])	Si un seul argument est présent : change l'existence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie false, dans le cas inverse, ajoute cette classe et retourne true. Si le second argument est présent : Si l'argument force est à true, ajoute cette classe, si l'argument est à false, la supprimer.
.contains(Classe1)	Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément. Retourne true si la classe existe, false dans les autres cas.
.replace(oldClass, newClass)	Remplace une classe par une autre.
.tostring()	Retourne la chaîne de texte complète.

.outerHTML

Donne ou modifie le contenu de l'élément ou noeud sur lequel on est positionné, élément inclus.

Ne fonctionne pas avec tous le navigateurs.
onclick=" alert(x.outerHTML)";

.innerHTML

Donne ou modifie le contenu de l'élément ou noeud sur lequel on est positionné, élément exclus.
onclick=" alert(x.innerHTML)";

.offsetWidth

offsetWidth est une mesure qui donne la largeur d'un élément. Cela inclut les bordures verticales (border), les marges internes verticales (padding) ainsi que la barre de défilement verticale si elle est présente et affichée, et la largeur (width) CSS de l'élément.

Objet de test

.offsetHeight

offsetHeight est une mesure qui donne la hauteur d'un élément. Cela inclut les bordures horizontales (border), les marges internes horizontales (padding) ainsi que la barre de défilement horizontale si elle est présente et affichée, et la hauteur (hight) CSS de l'élément.

Même principe que pour offsetWidth mais pour la hauteur.

.style

La propriété style d'un élément représente sa déclaration de style en-ligne, qui se trouve dans son attribut style et qui a la priorité la plus haute dans la cascade CSS.
Toutes les possibilités disponibles pour cette propriété sont disponibles dans la fiche DOM_Document_CSS.
Pour obtenir les valeurs de toutes les propriétés CSS pour un élément, on peut utiliser window.getComputedStyle consultable aussi dans la fiche dans la fiche DOM_Document_CSS.

Objet de test

.textContent

Représente le contenu textuel d'un nœud et de ses descendants.

.setAttribute(nom,valeur)

Permet d'éditer (ajouter, changer, modifier) un attribut. Le premier paramètre est le nom de l'attribut, et le deuxième, est la nouvelle valeur à donner à l'attribut.
Cas de boolean :
Pour définir la valeur d'un attribut booléen, tel que disabled ou enabled, on peut spécifier n'importe quelle valeur. Une chaîne vide ou le nom de l'attribut sont des valeurs recommandées. Tout ce qui compte est que si l'attribut est présent, quelle que soit sa valeur réelle, sa valeur est considérée comme true (vraie). L'absence de l'attribut signifie que sa valeur est false (fausse).

<div id="testAttributes" style="width:55px;height:35px;border: solid 5px gray;padding:3px;">Objet de test</div>
													<select id="choixStyle" class="c_boutonVoirResultat"
														onchange="
															var x = window.document.getElementById('testAttributes');
															switch(this.value){
																	case '1': x.setAttribute('title','Je suis le titre que vous venez d\'ajouter'); alert('L\'attribut title avec le contenu - Je suis le titre que vous venez d\'ajouter - vient d\'être créé.');break;
																	case '2': if(!x.getAttribute('title')) alert('L\'attribut n\'existe pas'); else {x.removeAttribute('title');alert('L\'attribut title avec le contenu - Je suis le titre que vous venez d\'ajouter - vient d\'être supprimé.')};break;
																	case '3': if(!x.getAttribute('title')) alert('L\'attribut n\'existe pas'); else alert('La valeur de l\'attribut est : ' + x.getAttribute('title'));break;
																default: x.removeAttribute('title'); break;
															}
													" >
														<option value="0" selected='selected' style='color:gray'>Réinitialiser</option>
														<option value="1">Ajouter un attribut</option>
														<option value="2">Effacer un attribut</option>
														<option value="3">Lire un attribut</option>
														</select>

On va rajouter, supprimer, lire l'attribut title (valeur : "Je suis le titre que vous venez d'ajouter") sur la forme ci-dessous. Cet attribut sera visible, s'il existe, au survol de la forme.

Objet de test

.getAttribute(nom)

Permet de récupérer l'attribut d'un élément. Le paramètre est le nom de l'attribut.

.removeAttribute(nom)

Enlève l'attribut d'un l'élément.

Les noeuds dans un document HTML

La notion de noeuds


Soit la page HTML suivante	et son rendu page web
<!DOCTYPE html> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Mon Web Facile</title> </head> <body> <div> <!-- Commentaire Test --> <p>Retrouvez ici <b>une image</b> de démo</p> <img src="../Images/DroitsHomme.jpg" width="122" height="98" alt="" /> </div> </body> </html>

La construction ci dessus donne la structure de noeuds suivante :

Exemple de la structure de noeuds
Noeuds du schéma ci-dessus	Commentaires
Le noeud 0	a pour enfants les noeuds 1,2,3
Les noeuds 1	est un enfant du noeud 0
Le noeud 2	est un enfant du noeud 0, mais aussi le parent des noeuds 4,5 et 6
Le noeud 3	est le dernier enfant du noeud 0
Le noeud 2	est le frère suivant du noeud 1, et le frère précédent du noeud 3
Le noeud 5	n'est pas un enfant du noeud 0, mais un enfant du noeud 2 et c'est aussi le parent du noeud 7
Les noeuds 4,6,7	sont des noeuds de type texte
Le noeud 1	est un noeud texte de type commentaire HTML

Méthode de positionnement sur un noeud

La méthode la plus simple et la mieux adaptée est d'utiliser la propriété .getElementById("identificateur") ou bien .getElementsByName( "nom").

Code HTML	Résultat
<div id="id_Demo" name="n_Demo" style="border:solid thin gray;width:300px;text-align:center"> Je suis la boite <div>; de <span style="color:red;font-weight:bold">test</span></div>	Je suis la boite <div> de test
Positionnement
var x = document.getElementById("id_Demo");	La variable x représente la référence de l'élément div.

Attributs spécifiques de relations entre noeuds
Propriétés	Commentaires	Test
.nodeType	Type d'élément ou noeud sur lequel on est positionné : 1 => Elément HTML 2 => Elément Attribut 3 => Texte 4 => Nœud pour passage CDTA 5 => Nœud pour référence d'entité 6 => Nœud pour entité 7 => Nœud pour instruction de traitement 8 => Commentaire HTML 9 => Noeud Document 10 => Noeud type de document 11 => Nœud de fragment de document 12 => Nœud pour notation onclick="alert('Type d'élément : ' + x.nodeType)";
.nodeName	Nom de l'élément ou noeud sur lequel on est positionné : onclick="alert('Nom de l'élément : ' + x.nodeName)";
.hasChildNodes()	Renvoie un booléen true ou false suivant que le noeud sur lequel on est positionné possède ou ne possède pas des noeuds enfants. onclick=" if (x.hasChildNodes()) alert ('Le noeud ' + x.nodeName + ' possède un ou des noeuds enfants'); else alert('Le noeud ' + x.nodeName + ' ne possède pas de noeud enfant');"
.childNodes.length .childNodes[i]	Donne le nombre de noeuds enfants appartenant au noeud sur lequel on est positionné. Tous les navigateurs ne donnent pas la même liste. onclick="if (x.hasChildNodes()) { var _Comment = ''; _Comment+='Le noeud ' + x.nodeName + ' possède : ' + x.childNodes.length + ' noeuds enfant'; for (i=0 ; i < x.childNodes.length ; i++) { _Comment+= '\nNom ' + i + ' : ' + x.childNodes[i].tagName; } alert(_Comment); } else alert('Le noeud ' + x.nodeName + ' ne possède pas de noeud enfant'); " ;
.parentNode parentNode.tagName	Positionnement sur le noeud parent. Une fois positionné on peut appliquer les différentes propriétés du noeud comme nodeName, className, id etc. onclick="alert('Elément parent de l\'élément ' + x.nodeName + ' : ' + x.parentNode.tagName + '\nElément parent de l\'élément parent ' + x.parentNode.parentNode.tagName + '\nNom du Parent/Parent/Parent/Parent ' + x.parentNode.parentNode.parentNode.parentNode.nodeName); ";
.firstChild	Renvoie le premier nœud enfant du nœud courant, ou null s'il n'en a pas.
.firstChild.nextSibling	Renvoie le nœud (node) suivant immédiatement le nœud spécifié dans la liste des enfants (childNodes) de son nœud parent, ou null si le nœud spécifié est le dernier dans cette liste.
.lastChild.previousSibling	Renvoie le nœud (node) précédant immédiatement le nœud courant dans la liste des enfants de son parent (childNodes), ou null s'il s'agit du premier nœud de la liste.

Exemples sur les propriétés et méthodes des noeuds

Exemple 1

Cette exemple montre l'organisation des éléments HTML sous forme de noeuds, ainsi que la forme des informations disponibles au niveau de chaque noeud.

Configuration HTML

Lien exemple

Infos sur les noeuds

Exemple 2

Cette exemple montre comment lire et comment modifier les informations d'un noeud.

Création dynamique d'un élément

Quelques propriétés de création de noeud
Propriétés	Commentaires
.createElement('nom élément')	Créer un noeud. Exemple var Element = document.createElement('div');
Une fois le noeud (ou élément) créé toutes les propriétés de l'objet document en relation avec les noeuds s'appliquent. Exemple : Element.id= "id_MonDiv" etc.
Parent.appendChild(l'élément)	Ajoute le noeud (ou élément) créé par createElement() comme enfant de son parent. Exemple : document.getElementById('_MaForme').appendChild(Element ) Ajoute le noeud ou élément <div> à son noeud (ou élément) parent qui dans notre exemple pourrait être un formulaire ayant pour identificateur _MaForme.
Parent.removeChild(id)	Effacer un noeud x=document.getElementById('_MaForme'); y=document.getElementById(Element.id); x.removeChild(y);

Dupliquer un élément

Méthode de duplication : cloneNode()

Soit un élément A identifié par var objA = document.getElementById("a");
On va créer un clone (copie) de objA de la façon suivante:
var nodeCopy = objA.cloneNode(true);. Voir note(¹)
Puis on cré un nouvel id pour ce nouvel objet
nodeCopy.id = "newId"; Voir note(²)
Et ensuite l'ajouter au document avec appendChild
document.getElementById('_MaForme').appendChild(nodeCopy); Voir note(³)

Note¹ :
Le paramètre est une valeur booléenne obligatoire, elle indique si la copie doit se faire en profondeur ou non (voir les notes ci-dessous).

si le paramètre est déclaré à false, aucun des nœuds enfants n'est copié. Le texte contenu dans le nœud n'est pas copié non plus , car il fait partie d'un ou plusieurs nœuds Text enfants.
si le paramètre est déclaré à true, le sous-arbre entier est copié également (y compris le texte qui peut être contenu dans des nœuds Text enfants). Pour les nœuds vides (par exemple les éléments img et input) le fait de mettre profond à true ou false n'a aucune incidence sur la copie, mais il est tout de même nécessaire de fournir une valeur.

Note² : Lors du clonage tout est copié y compris l'ancien id. Comme 2 éléments ne doivent pas posséder le même id il faut donc le modifier.

Note³ : Le nœud dupliqué renvoyé par cloneNode ne fera pas partie du document tant qu'il n'y est pas ajouté via la méthode appendChild ou une méthode similaire. De même, il n'aura pas d'élément parent tant qu'il n'a pas été ainsi ajouté à un autre nœud.

Remarque 1: Cloner un nœud copie tous ses attributs ainsi que leurs valeurs.

Remarque 2: Cloner un nœud copie tous les évènements initialisées sur ce nœud, à l'exeption des écouteurs d'évènement qui eux sont liés à l'id du nœud qui devra être nécessairement différent de celui d'origine.

Exemple

Très important à retenir

Certaines propriétés ou méthodes de l'objet document vont être très souvent utilisées pour rendre votre site dynamique et interactif.

document.getElementById("identificateur") pour se positionner sur un élément identifié par son attribut id et ainsi accéder aux propriétés de cet élément et particulièrement son style.
document.getElementById("identificateur").innerHTML pour en modifier le contenu d'un élément.
document.write(' texte') pour écrire du texte html à la volée à partir de script javascript.

Dans une moindre mesure

document.forms[nom_formulaire].action pour déclencher l'action définie pour un formulaire.
document.forms[nom_formulaire].reset() pour déclencher une remise à zéro des champs d'un formulaire.
document.forms[nom_formulaire].submit() pour déclencher l'envoi des données d'un formulaire.

Mais

Toujours prévoir un identificateur (id="xxx") et un nom (name="yyy") aux éléments que vous allez construire et que vous pourrait être amené à modifier dynamiquement.

Attention : indicateur et nom doivent être unique pour chaque objet.