Les Fiches de MonWebFacile





Chapitre

Fiche

 

Fiche DOM HTML : Objet document

Objet de la fiche :

État de la fiche Terminée validée


Plan de la fiche :

>

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é

ou

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.
.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')1 É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.length 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..
.forms[nom_formulaire]
ou si l'identificateur est celui d'un formulaire
.getElementById("identificateur")
.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

Note1 : Attention

Voici un exemple illégal  :

<script  type="text/javascript">
document.write ("<b>Ceci peut ne pas marcher</b>");
</script >

Voici le même exemple légal :

<script  type="text/javascript">
document.write ("<b>Ceci fonctionnera<\/b>");
</script >

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.


Compléments sur des proprétés importantes de la méthode .getElementById()

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

PropriétésCommentairesExemples
.offsetWidth
.offsetHeight
.innerHTML
.submit
.className
.style
.textContent
.setAttribute()permet d'éditer un attribut. Le premier paramètre est le nom de l'attribut, et le deuxième, est la nouvelle valeur à donner à l'attribut.
.getAttribute()permet de récupérer un attribut. Le paramètre est le nom de l'attribut.

Modifier les attributs d'un élément

PropriétésCommentairesExemples

Les noeuds dans un document HTML

La notion de noeuds

Soit la page HTML suivante et son rendu page web

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.

Propriétés de l'objet document en relation avec les noeuds

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

Types et attributs d'un noeud
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)";
.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é :
.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)";

Attributs de relations entre noeuds
Propriétés Commentaires Test
.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

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

 

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(1)
  • Puis on cré un nouvel id pour ce nouvel objet
    nodeCopy.id = "newId"; Voir note(2)
  • Et ensuite l'ajouter au document avec appendChild
    document.getElementById('_MaForme').appendChild(nodeCopy); Voir note(3)

Note1 :
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.

Note2 : 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.

Note3 : 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.

 


Respectons la propriété intellectuelle