Document HTML - Interface au contenu d'une page web
L'objet Document défini dans la spécification DOM permet d'accéder au contenu d'une page HTML ou d'un fichier XML. Les méthodes les plus utilisées de l'objet sont getElementByTagName et getElementById ainsi que write de l'interface dérivée HTMLDocument, que l'on utilisera plutôt pour les pages web.
But de l'objet
Le Document représente donc la page entière, ses attributs
indiquent comment elle est définie et ses méthodes permettent
d'accéder à son contenu.
On l'utilise avec le mot-clé document:
document.write("démo")Attributs de Document
Ce sont des attributs en lecture seule, définis lors de la création de la page.
DocumentType doctype
Le doctype définit en tête de page.
DOMImplementation implementation
Element documentElement
Un Element est un objet qui représente une balise et est doté
de méthodes.
Attributs de HTMLDocument
L'interface HTMLDocument est dérivée de Document. On
accède à HTMLDocument par le nom document (et
donc aussi à Document qui est la superclasse de HTMLDocument).
On accède aux attributs et aux collections par les noms suivants:
- DOMString title
Le contenu de la balise <title> dans la section <head> de la page. - DOMString referrer
Quand on a chargé la page en cliquant sur un lien, contient la page de départ. Si on a tapé l'adresse dans la barre du navigateur, contient une chaîne vide. - DOMString domain
Le nom de domaine du site web. - DOMString URL
L'URL complète de la page (attribut en majuscule). - HTMLElement body
L'élément correspondant à la balise <body> ou le frameset. - HTMLCollection images
Liste de toutes les balises IMG. - HTMLCollection applets
Liste des balises objet et applet. - HTMLCollection anchors
Liste de toutes les balises <a>. Elles doivent avoir un attribut name en HTML. - HTMLCollection links
Comme anchors, mais contient outre les balises <a>, les <area> avec un attribut href. - HTMLCollection forms
Liste des formulaires dans la page. - DOMString cookies
Chaîne contenant les données de cookie.
Quand aux collections, on y accède par un index comme un tableau, par exemple: form[x].
Méthodes de Document
Les méthodes de DOM peuvent prendre en paramètre un objet DOMString, qui dans la pratique est en JavaScript une simple chaîne de caractères.
Element createElement(DOMString)
Crée un élément, une balise, dont le nom est donné,
et retourne un objet Element. On peut donner à cette balise
des attributs avec la méthode createAttribute de l'objet Element.
Text createTextNode(DOMString)
Permet d'insérer du texte dans le document. Retourne un objet Text.
Element getElementById(DOMString)
Retourne un élément dont on donne l'identificateur.
var x = document.getElementById("monid");Cela suppose qu'une balise soit dotée d'un attribut id="monid".
NodeList getElementsByTagName(DOMString)
Retourne la liste des éléments dont le nom de balise est donné
en paramètre.
var x = document.getElementsByTagName("a")L'exemple retourne tous les liens contenus dans la page, et définis
par la balise <a> </a>.
On accède aux élément de la NodeList par la méthode
unique item(x) avec l'index en argument.
Méthodes de HTMLDocument
Outre les méthodes de Document, HTMLDocument offre des fonctions supplémentaires pour modifier directement le contenu de la page.
- void open()
Crée un nouveau document. - void close()
Ferme le document courant. - void write(DOMString)
Ecrit dans le document. - void writeln(DOMString)
Ecrit la chaîne en paramètre et ajoute un saut à la ligne.
Noter que l'on place du texte dans les balises HTML en assignant l'attribut innerHTML. La méthode write sert à créer un nouveau document de façon dynamique.
NodeList
Cette interface a un seul attribut et une seule méthode.
unsigned long length
Nombre d'élément dans la liste.
Node Item(unsigned long)
Retourne un objet Node correspondant à l'index en paramètre.
Cet index est compris entre 0 et length moins 1.
Node
Un node est un élément quelconque de l'arborescence du document, contenu éventuellement dans un autre et qui peut contenir des éléments (à l'exception des noeuds Text qui ne peuvent avoir d'enfant).
On ne décrira par ici cette interface qui nécessite un chapitre entier. Certains attributs et méthodes sont indispensable pour utiliser un document statique. Ils sont tous en lecture seule.
DOMString nodeName
Le nom de balise.
DOMString nodeValue
Les données contenues dans la balise.
Node firstChild
Le premier enfant du noeud.
Si t designe une table, que cette table contient des balises tr,
les lignes de la table, tbl.firstChild retourne la première
ligne.
Node nextSibling
Le successeur du noeud dont c'est l'attribut. Par exemple:
var y = x.nextSibling;Y est le Node qui suit x dans la liste des enfants d'un noeud ou dans le document. Exemple:
tr1 = tbl.firstChild // première ligne de la table tbl
tr2 = tr1.nextSibling // la ligne suivante dans la table.Boolean hasChildNodes
Retourne true si le noeud à des enfants sinon false.
Il est possible d'assigner un Node à un Element et vice-versa, cela permet d'utiliser les méthodes de l'un ou l'autre selon le besoin. Pour accéder aux attributs (par exemple href dans le cas d'une balise a), on utilisera l'élément.
HTMLCollection
Une collection HTML représente une liste de balises dans une page, telle que les images, les liens, etc.
unsigned long length
Nombre d'éléments dans la liste
Node item(unsigned long)
Retourne un élément de la liste, selon l'index.
Node namedItem(DOMString)
Retourne un élément de la liste selon son ID ou
à defaut selon l'attribut name à condition que ce type
de balise accepte l'attribut name.
Les méthodes retournent null en cas d'échec.
Démonstration interactive
Démonstration des méthodes de l'objet Dom Document et de l'interface HTMLDocument (qui en est dérivée) montrant comment accéder aux données.
Cliquer sur un bouton pour voir les données que l'on peut obtenir avec ces interfaces. Le code source associé au bouton est affiché à droite.
Spécification du W3C
- DOM 2 core et l'objet Document.
- Modèle objet de document HTML. Version française.
Comment récupérer un objet "INPUT"
ghostdady
<input type="text" size="7" name="tf_res[0]"/>temp = DocOffreDeCommerce.getElementsByName("tf_res");webmaster
<input id="xxx" type="text" size="7" name="tf_res[0]"/> x = document.getElementById("xxx")
x.value = "valeur"document.formular.xxx.value = "valeur"ghostdady
ghostdady
temp = DocOffreDeCommerce.forms.length;
//alert(temp);//nombre de formulaire dans le Document
temp = DocOffreDeCommerce.forms[0].name;
//alert(temp);//un seul formulaire donc j'affiche le nom
temp = DocOffreDeCommerce.forms[0].elements.length;
//alert(temp);//nombre d'élément dans mon formulaire
var j;
for(var i=0; i < DocOffreDeCommerce.forms[0].elements.length; i++)
{
//alert(DocOffreDeCommerce.forms[0].elements.name);
if (DocOffreDeCommerce.forms[0].elements.name == "tf_res[0]")
j = i;
}
DocOffreDeCommerce.forms[0].elements[j].value="15000";
DocOffreDeCommerce.formular.tf_res[0].value="5000";
La première ligne fonctionne mais si j'utilise les noms ça ne fonctionne pas.
Pourquoi?webmaster
Est-ce que "document.formular.xxx " ne fonctionne qu'avec l'ID?Cela peut fonctionner avec name mais ID est plus sûr. Pour le reste du code, je ne suis pas sûr que l'on puisse modifier les name dynamiquement car le DOM est construit avec les ID et les noms au moment du chargement. On peut le modifier dynamiquement, mais avec des limitations. Je pense qu'il faudrait concevoir différemment le code en utilisant uniquement des indices de tableaux et pas les noms.
ghostdady
DocOffreDeCommerce.forms[0].elements[j].value="15000";
DocOffreDeCommerce.formular.tf_res[0].value="5000";webmaster