SELFHTML

node

Page d'information: vue d'ensemble

vers le bas node: généralités pour l'utilisation

Propriétés:

vers le bas attributes (attributs)
vers le bas childNodes (nœud enfant)
vers le bas data (données en caractères)
vers le bas firstChild (premier nœud enfant)
vers le bas lastChild (dernier nœud enfant)
vers le bas nextSibling (prochain nœud d'un type)
vers le bas nodeName (nom du nœud)
vers le bas nodeType (type du nœud)
vers le bas nodeValue (valeur/contenu du nœud)
vers le bas parentNode (nœud parent)
vers le bas previousSibling (nœud précédent d'un type)

Méthodes:

vers le bas appendChild() (ajouter un nœud enfant)
vers le bas appendData() (ajouter des données en caractères)
vers le bas cloneNode() (copier un nœud)
vers le bas deleteData() (effacer des données en caractères)
vers le bas getAttribute() (rechercher la valeur d'un nœud attribut)
vers le bas getAttributeNode() (rechercher un nœud attribut)
vers le bas hasChildNodes() (vérifier l'existence de nœuds enfants)
vers le bas insertBefore() (insérer un nœud)
vers le bas insertData() (insérer des données en caractères)
vers le bas removeAttribute() (effacer la valeur d'un nœud attribut)
vers le bas removeAttributeNode() (effacer un nœud attribut)
vers le bas removeChild() (effacer un nœud)
vers le bas replaceChild() (remplacer un nœud enfant)
vers le bas replaceData() (remplacer des données en caractères)
vers le bas setAttribute() (fixer la valeur d'un nœud attribut)
vers le bas setAttributeNode() (créer un nœud attribut)

 vers le bas 

node: généralités pour l'utilisation

L'objet node est l'objet central du modèle DOM (Document Object Models) (node = nœud). L'arrière-plan est le modèle qu'un document dans un langage de marquage, que ce soit HTML ou un autre langage de marquage basé sur XML, soit constitué d'une arborescence de nœuds. Pour de consacrer de plus près à ce modèle, vous pouvez lire dans le chapitre XML de cette documentation la partie sur l'img src="../../src/doc.gif" width="15" height="10" border="0" alt="Autre page d'information" arborescence et nœuds d'un fichier XML.

Chaque élément, chaque attribut et chaque donnée en caractères représentent des nœuds distincts. Ces nœuds forment l'arborescence. L'objet node dispose de propriétés et de méthodes pour accéder aux différents nœuds, peu importe s'ils sont placés très bas dans l'arborescence.

L'objet node représente ainsi la variante plus générale valide pour tous les langages conformes à XML de ce que représentent les Autre page d'information objets éléments HTML spécifiquement pour HTML. Vous pouvez travailler dans des JavaScripts, qui sont notés dans des fichiers HTML aussi bien avec des objets éléments HTML qu'avec l'objet node. Certaines choses sont plus faciles à résoudre avec l'objet élément HTML, pour d'autres choses c'est l'objet node qui sera mieux approprié. L'objet node passe il est vrai chez les puristes pour le modèle DOM "le plus châtié" justement parce qu'il n'est pas limité à HTML.

Pour pouvoir accéder aux propriétés et méthodes de l'objet node, vous avez besoin d'un nœud. Pour accéder à un nœud disponible dans le document, sont utilisées les méthodes de l'objet Autre page d'information document Autre page d'information getElementById, Autre page d'information getElementsByName et Autre page d'information getElementsByTagName. Partant de là, vous pouvez adresser les nœuds attribut, les nœuds texte et les autres nœuds enfant d'un élément.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<h1 id="titre" align="center">Nœuds dans l'<i>arborescence</i></h1>
<script type="text/javascript">
<!--
 noeud_element = document.getElementById("titre");
 premier_noeud = noeud_element.firstChild.nodeValue;
 document.write("La valeur du premier nœud enfant est: <b>" + premier_noeud + "<\/b>");
//-->
</script>
</body></html>

Explication:

Le fichier d'exemple contient un titre N°1 avec du texte dont une partie est marquée à son tour en italique. Dans le Javascript noté au dessous, il est accédé dans un premier temps avec document.getElementById("titre") (sans autre propriété ou méthode derrière) à l'élément h1 du titre. La valeur renvoyée par getElementById() est l'objet nœud du titre. La valeur renvoyée dans l'exemple est sauvegardée dans la variable noeud_element. Cette variable sauvegarde donc un nœud valide du document et c'est pour cette raison que les propriétés et méthodes de l'objet node peuvent lui être appliquées. Dans l'exemple, la valeur du premier nœud enfant du titre est recherchée avec noeud_element.firstChild.nodeValue. Sa valeur est finalement écrite dans le document avec Autre page d'information document.write().

L'emploi de variables n'est pas absolument indispensable. L'exemple ci-dessus fonctionne exactement de la même façon si vous notez:
document.write("La valeur du premier nœud enfant est: <b>" + document.getElementById("titre").firstChild.nodeValue + "<\/b>");

La valeur qui s'inscrit dans l'exemple est: Nœuds dans l' ... le premier nœud enfant du titre est donc son contenu de caractères. Le mot arborescence n'en fait pas partie, étant donné qu'il est marqué par un élément i qui représente lui-même à son tour un autre élément enfant distinct du titre.

Les deux attributs qui sont notés dans le repère d'ouverture du titre ne comptent d'ailleurs pas comme des nœuds enfant. Le consortium W3 est d'avis que les attributs, d'un point de vue hiérarchique ne sont pas des "sous-objets" d'éléments mais des "objets associés" ;. Pour accéder aux nœuds attribut, l'objet node propose des propriétés et des méthodes distinctes. Pour la compréhension, il est cependant important que les attributs d'un élément ne soient pas considérés comme ses éléments enfants, raison pour laquelle par exemple une propriété d'objet telle que firstChild saute les attributs.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xlecture attributes

Sauvegarde le tableau des attributs disponibles d'un élément.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body bgcolor="#FFFFCC" text="#000099">
<script type="text/javascript">
<!--
 document.write("L'élément body a <b>" + document.getElementsByTagName('body')[0].attributes.length + "<\/b> attributs");
//-->
</script>
</body></html>

Explication:

L'exemple accède avec document.getElementsByTagName('body')[0] à l'élément body du fichier et recherche par la propriété de base length du tableau attributes le nombre des attributs définis dans l'élément. Pour le contrôle, le résultat est écrit avec document.write dans le document. Dans l'exemple la valeur de attributes.length est 2, étant donné que dans le repère <body> sont notés deux attributs.

Par le tableau attributes vous pouvez également accéder aux attributs. Ainsi par exemple document.getElementsByTagName('body')[0].attributes[0].nodeValue livre la valeur #FFFFCC, étant donné que attributes[0] désigne le premier attribut, et que vers le bas nodeValue sauvegarde la valeur correspondante.

Attention:

L'Explorer Internet MS recherche bien une valeur, mais ce n'est pourtant pas la bonne. Dans l'exemple la version 5.5 au lieu de 2 trouvait comme valeur 94 - probablement le nombre total des attributs disponibles pour l'élément body, y compris les gestionnaires d'événement etc. Ceci est toutefois inutilisable.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.xlecture childNodes

Sauvegarde un tableau de tous les nœuds enfant disponibles d'un nœud.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<p id="letexte">Texte avec <b>des caractères gras</b> et <u>du texte souligné</u></p>
<script type="text/javascript">
<!--
 var nombre = document.getElementById("letexte").childNodes.length;
 var premier = document.getElementById("letexte").childNodes[0].nodeValue;
 document.write("Nombre de nœuds enfant: <b>" + nombre +"<\/b><br>")?
 document.write("Valeur du premier nœud enfant: <b>" + premier +"<\/b><br>");
//-->
</script>
</body></html>

Explication:

L'exemple contient un paragraphe de texte avec un contenu en caractères et d'autres éléments pour le formatage. Au-dessous est noté un passage JavaScript. Là, il est accédé avec document.getElementById("letexte") à l'élément p. Par la propriété de base length du tableau childNodes le nombre des éléments enfant que l'élément p a, est recherché. La valeur retournée est sauvegardée dans la variable nombre. Par childNodes[0] il est accédé au premier élément enfant. Son contenu est recherché avec vers le bas nodeValue. Pour contrôle, le script écrit les résultats dans le document avec document.write().

Le nombre des éléments enfant de l'élément p s'élève d'ailleurs à 4:
Le premier élément enfant est le contenu en caractères Texte avec  ,
le deuxième élément enfant l'élément b,
le troisième élément enfant le contenu en caractères  et ,
et le quatrième élément enfant l'élément u.

Quand un nœud n'a pas de nœud enfant childNodes a la valeur null.

Attention:

Netscape 6.1 et la version Macintosh de l'Explorer Internet MS 5.0 interprètent dans l'élément body et dans tous ses nœuds subalternes un passage à la ligne ou un espace entre les nœuds d'éléments dans le texte source en tant que nœud enfant distinct avec le nom #text. Même les commentaires HTML sont traités comme des nœuds distincts avec pour nom #comment.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<ul id="premiere_liste"><li>premier point</li><li>deuxième point</li></ul>
<script type="text/javascript">
<!--
 var nombre = document.getElementById("premiere_liste").childNodes.length;
 document.write("Première liste: nombre de nœuds enfant: <b>" + nombre +"<\/b><br>");

//-->
</script>

<ul id="seconde_liste">
<li>premier point</li> <li>deuxième point</li>
</ul>
<script type="text/javascript">
<!--
 var nombre = document.getElementById("seconde_liste").childNodes.length;
 document.write("deuxième liste: nombre de nœuds enfant: <b>" + nombre +"<\/b><br>");

//-->
</script>
</body></html>

Explication:

Dans l'exemple sont définies deux listes. Toutes deux ne se différencient qu'en ce que les différents éléments de la première liste, ne se trouvent aucun espace ni aucun passage à la ligne. Dans la deuxième liste par contre des espaces et des passages à la ligne ont été utilisés. Netscape 6.1 sort pour la première liste comme nombre de nœuds enfant 2 et pour la deuxième liste 5. Les espaces et passages à la ligne sont considérés comme des nœuds enfant distincts.
L'Explorer Internet MS sous Windows ignore ceux-ci et ne reconnaît un nœud enfant avec le nom #text, que si celui-ci contient un caractère de texte correspondant ou un espace imposé &nbsp;.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.xlecture/écriture data

Sauvegarde les données de caractères d'un nœud dans la mesure où il s'agit d'un nœud texte.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!--
function sortir() {
 alert(document.getElementById("contenu_document").firstChild.data);
}
//-->
</script>
</head><body id="contenu_document" onLoad="sortir()">
C'est du texte qui se trouve tout simplement dans le document.
</body></html>

Explication:

L'exemple ne contient entre <body> et </body> rien d'autre que du pur texte, donc des données en caractères. Après que le document est chargé (onLoad), la Autre page d'information fonction JavaScript sortir() est appelée. Celle-ci accède avec document.getElementById("contenu_document") à l'élément body. Avec vers le bas firstChild il est accédé au premier élément enfant et avec data à son contenu. Le premier (et le seul) élément enfant de l'élément body dans l'exemple est le texte. Celui-ci est alors aussi affiché dans une fenêtre de dialogue qu'affiche la fonction sortir().

Si vous changez la valeur de la propriété data, le contenu de caractères de l'élément est tout simplement remplacé par le nouveau contenu. Si par exemple vous notez dans l'exemple ci-dessus:
document.getElementById("contenu_document").firstChild.data = "nouveau texte";
Alors le texte figurant jusqu'alors entre <body> et </body> serait à la fin remplacé de façon dynamique par le nouveau.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netwcape 6.xMS IE 5.xlecture firstChild

Sauvegarde l'objet du premier nœud enfant d'un nœud.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<ul><li>premier point</li><li>deuxième point</li></ul>
<script type="text/javascript">
<!--
var premier_point = document.getElementsByTagName("ul")[0].firstChild;
document.write(premier_point.firstChild.data);
//-->
</script>
</body></html>

Explication:

L'exemple montre une liste énumérative avec deux éléments de liste. Au dessous est noté un passage JavaScript. Là il est accédé avec document.getElementsByTagName("ul")[0] au premier élément ul dans le document. Son premier élément enfant est adressé avec firstChild . Dans l'exemple c'est le premier élément li. Dans la variable premier_point est donc sauvegardé ensuite l'objet nœud du premier élément li, mais pas son contenu de texte. Celui-ci est cependant sorti ensuite avec document.write(). Étant donné que le contenu de texte considéré par rapport au nœud élément li représente à nouveau un sous-nœud, il est possible d'accéder au texte du premier point de la liste avec premier_point.firstChild.data.

Tenez compte quand vous retracez cet exemple de la vers le haut particularité de Netscape 6.1 et de l'Explorer Internet MS 5.0 dans l'édition Macintosh de la façon dont ils traitent les nœuds enfant..

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.xlecture lastChild

Sauvegarde l'objet du dernier nœud enfant d'un nœud.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<ul><li>premier point</li><li>deuxième point</li></ul>
<script type="text/javascript">
<!--
var dernier_point = document.getElementsByTagName("ul")[0].lastChild;
document.write(dernier_point.firstChild.data + " et ");
document.write(dernier_point.lastChild.data);
//-->
</script>
</body></html>

Explication:

L'exemple contient une liste énumérative avec deux éléments de liste. Au dessous est noté un passage JavaScript. Là il est accédé avec document.getElementsByTagName("ul")[0] au premier élément ul dans le document. Son dernier nœud enfant est adressé avec lastChild . Dans l'exemple, c'est le deuxième et dernier élément li. Dans la variable dernier_point est donc sauvegardé ensuite l'objet nœud du deuxième élément li, mais pas son contenu de texte. Celui-ci est cependant sorti ensuite avec document.write() , et cela même deux fois. Étant donné que le contenu de texte considéré par rapport au nœud élément li représente à nouveau un sous-nœud et même le seul, il peut être adressé avec dernier_point.firstChild.data, mais tout aussi bien avec dernier_point.lastChild.data.

Tenez compte quand vous retracez cet exemple de la vers le haut particularité de Netscape 6.1 et de l'Explorer Internet MS 5.0 dans l'édition Macintosh de la façon dont ils traitent les nœuds enfant.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.xlecture nextSibling

Sauvegarde, considéré par rapport à un nœud, le nœud qui suit immédiatement dans l'arborescence. Si aucun nœud ne suit, c'est null qui est sauvegardé.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<ul>
<li>premier point</li>
<li>deuxième point</li>
</ul>
<script type="text/javascript">
<!--
document.write("L'élément ul a les nœuds subordonnés suivants:<br>");
var noeuds = document.getElementsByTagName("ul")[0].firstChild;
while (noeuds!=null) {
  document.write("Un nœud qui a pour nom <b>" + noeuds.nodeName + "<\/b><br>");
  noeuds = noeuds.nextSibling;
}
//-->
</script>
</body></html>

Explication:

L'exemple contient une liste énumérative avec deux éléments de liste. Au dessous est noté un passage JavaScript. Là il est accédé avec document.getElementsByTagName("ul")[0].firstChild au premier élément ul dans le document. Dans la Autre page d'information boucle while qui suit, il est vérifié si le nœud est différent de null et le vers le bas nodeName du nœud est sorti. Enfin la variable noeuds se voit affecter le nœud suivant (noeuds = noeuds.nextSibling;). Quand l'arborescence a été parcourue, la valeur null est sauvegardée dans la propriété nextSilbing, ce qui entraîne l'interruption de la boucle.

La propriété nextSilbing traite respectivement le nœud qui suit dans l'arborescence sans tenir compte cependant des nœuds enfant qui pourraient être contenus dans un nœud.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.xlecture nodeName

Sauvegarde le nom d'un nœud.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body><script id="lescript" type="text/javascript">
<!--
noeuds = document.getElementById("lescript");
var noeuds = document.getElementsByTagName("body")[0].firstChild;
document.write("Ce script a le nom de nœud suivant: <b>" + noeuds.nodeName + "<\/b>")
//-->
</script>
</body></html>

Explication:

L'exemple ne contient rien d'autre dans la partie visible du document qu'un Javascript qui sort le nom de nœud de l'élément script proprement-dit, à savoir SCRIPT. Pour cela, le script accède avec document.getElementsByTagName("body")[0].firstChild à l'élément script. Son nœud est sauvegardé dans la variable noeuds. Avec noeuds.nodeName le nom de ce nœud est ensuite recherché.

Les nœuds élément et les nœuds attribut ont des noms, les nœuds texte cependant n'en ont pas. En essayant de rechercher le nom d'un nœud texte, c'est la valeur #text qui est sauvegardée.

Tenez compte quand vouw retracez cet exemple de la vers le haut particularité de Netscape 6.1 de la façon dont il traite les nœuds enfant.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE v5.xlecture nodeType

Sauvegarde le type d'un nœud sous forme d'un numéro. Le consortium W3 a établi les correspondances suivantes - certaines d'entre elles sont spécifiques à XML:

Numéro Type de nœuds
1 Nœud élément
2 Nœud attribut
3 Nœud texte
4 Nœud pour passage CDATA
5 Nœud pour référence d'entité
6 Nœud pour entité
7 Nœud pour instruction de traitement
8 Nœud pour commentaire
9 Nœud document
10 Nœud type de document
11 Nœud de fragment de document
12 Nœud pour notation

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<p align="center">un petit texte</p>
<script type="text/javascript">
<!--
var Element = document.getElementsByTagName("p")[0];
var alignement = Element.getAttributeNode("align");
alert(alignement.nodeType);
//-->
</script>
</body></html>

Explication:

L'exemple contient un paragraphe de texte avec un attribut align= pour l'alignement. Au dessous du paragraphe de texte est noté un passage JavaScript. Là il est accédé avec document.getElementsByTagName("p")[0] à l'élément p. Avec Element.getAttributeNode("align") il est accédé à son nœud attribut. Dans la variable alignement se trouve enfin l'objet attribut. Une fenêtre de dialogue sort alors dans l'exemple, le type de nœud de ce nœud avec alignement.nodeType. La valeur s'élève à 2, étant donné qu'il s'agit d'un nœud attribut.

Attention:

L'Explorer Internet MS 5.x interprète il est vrai la propriété nodeType mais la version 5.5 n'interprète pas l'exemple ci-dessus. La raison en est qu'il ne soutient pas la méthode getAttibuteNode(). Dans l'Explorer Internet MS 6.0beta et dans la version Macintosh de l'Explorer Internet 5.0 par contre l'exemple ne peut pas être retracé.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.xlecture/écriture nodeValue

Sauvegarde la valeur ou le contenu d'un nœud. Pour les nœuds texte, c'est le texte, pour les nœuds attribut la valeur affectée à l'attribut. Pour les nœuds élément, cette propriété a pour valeur null.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function changer_texte() {
 document.getElementById("letexte").firstChild.nodeValue = document.formulaire.nouveau_texte.value;
}
//-->
</script>
</head><body>
<p id="letexte">Ici figure un texte</p>
<form name="formulaire" action="">
<input type="text" size="40" name="nouveau_texte">
<input type="button" value=" OK " onClick="changer_texte()">
</form>
</body></html>

Explication:

Dans l'exemple est noté un paragraphe de texte et au dessous un formulaire avec un champ de saisie et un bouton pouvant être cliqué. En cliquant sur le bouton, la Autre page d'information fonction changer_texte(), notée dans l'entête de fichier, est appelée. Cette fonction accède avec document.getElementById("letexte") à l'élément p, puis avec vers le haut firstChild au premier nœud enfant de cet élément, à savoir au contenu de texte et affecte à sa propriété nodeValue le contenu du champ de saisie du formulaire.

Attention:

L'exemple montre que nodeValue remplit une fonction similaire à celle de la propriété Autre page d'information all.innerText dans le DHTML classique d'après la syntaxe Microsoft. Pourtant, il y a des différences: S'il était par exemple noté:
<p>Texte avec <b>des caractères gras</b></p>
Alors firstChild.nodeValue ne livrerait, considéré par rapport à l'élément p que la valeur Texte avec  et ne pourrait aussi modifier que cette partie, étant donné que ce qui suit est le début d'un nouveau nœud marqué par l'élément intérieur b.
Une correspondance directe avec Autre page d'information all.innerHTML n'existe pas vraiment dans le modèle DOM. "HTML intérieur" doit être créé dans le modèle DOM à l'aide de méthodes appropriées telle que Autre page d'information document.createElement(), Autre page d'information document.createAttribute() et Autre page d'information document.createTextNode().

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.xlecture parentNode

Sauvegarde le nœud parent d'un nœud.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<ul>
<li>un point</li>
<li>un deuxième</li>
</ul>
<script type="text/javascript">
<!--
 alert(document.getElementsByTagName("li")[0].parentNode.parentNode.tagName);
//-->
</script>
</body></html>

Explication:

L'exemple contient une liste énumérative au dessous de laquelle est noté un passage JavaScript. Là est sorti dans une fenêtre de dialogue, le nom de l'élément grand-parent du premier élément li. Pour ce faire, il est accédé avec document.getElementsByTagName("li")[0] au premier élément li. Le premier parentNode qui suit accède à son élément parent et le deuxième parentNode à l'élément parent de l'élément parent. De cet élément, le nom de l'élément est recherché avec tagName puis sorti. L'attribut tagName est connu de tous les nœuds du genre élément.
Dans l'exemple c'est BODY qui est sorti.

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.xlecture previousSibling

Sauvegarde, considéré par rapport à un nœud, le nœud qui précède immédiatement dans l'arborescence. Si aucun nœud ne précède, null est sauvegardé.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title></head>
<body id="contenu_document"
onLoad="alert(document.getElementById('contenu_document').previousSibling.nodeName)">
</body></html>

Explication:

L'exemple sort dans une fenêtre de dialogue, après que le document est chargé (onLoad), le nom le nom du nœud de l'élément qui précède l'élément body. Pour cela il est accédé avec document.getElementById('contenu_document') à l'élément body.
C'est alors HEAD qui est sorti, étant donné que l'élément head est l'élément qui précède immédiatement l'élément body dans l'esprit de l'arborescence.

Tenez compte quand vous utilisez cette propriété de la vers le haut particularité de Netscape 6.1 et de l'Explorer Internet MS 5.0 dans l'édition Macintosh de la façon dont ils traitent les nœuds enfant.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x appendChild()

Ajoute un nœud nouvellement créé auparavant à la structure de nœuds existante, et cela de façon à ce qu'il soit inséré comme dernier nœud enfant d'un nœud à mentionner.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title></head>
<body>
<ol id="Liste">
<li>Element</li>
</ol>
<script language="JavaScript" type="text/javascript">
<!--
document.getElementById("Liste").removeChild(document.getElementById("Liste").firstChild);

for(var i = 0; i < 10; i++) {
  var nouveauLI = document.createElement("li");
  var numeroli = i + 1;
  var nouveautexteli = document.createTextNode("C'est l'élément de liste numéro " + numeroli);
  document.getElementById("Liste").appendChild(nouveauLI);
  document.getElementsByTagName("li")[i].appendChild(nouveautexteli);
}
//-->
</script>
</body></html>

Explication:

L'exemple remplit automatiquement une liste numérotée avec des données. Tout de suite après la liste numérotée suit un passage JavaScript. Tout d'abord, l'élément de liste existant est supprimé avec la méthode vers le bas removeChild() . Ensuite est notée une Autre page d'information boucle for qui est parcourue 10 fois. À chaque tour de boucle, est créé dans un premier temps un nouvel élément du type li avec Autre page d'information document.createElement(). Ensuite une variable numeroli est fixée sur une valeur qui est supérieure de 1 au compteur de boucle i. Cette variable est utilisée dans l'instruction suivante, dans laquelle un nouveau nœud texte est créé avec Autre page d'information document.createTextNode(). Enfin suivent - toujours dans la boucle for - deux appels d' appendChild(). La première de ces instructions accède avec document.getElementById("Liste") à l'élément ol et fait en sorte qu'un nouvel élément enfant soit inséré à la fin. Est ajouté le nœud élément nouveauLI venant d'être créé et qui sauvegarde un nouvel élément li. La deuxième de ces instructions utilise le compteur de boucle i pour accéder avec document.getElementsByTagName("li")[i] à l'élément li venant d'être créé. À ce dernier est ajouté avec appendChild() le nœud texte créé auparavant comme élément enfant. De cette manière la liste se remplit à chaque tour de boucle d'un nouvel élément li y compris le contenu de caractères.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.x appendData()

Ajoute des données à la fin d'un nœud texte ou à de la valeur d'un nœud attribut, sans écraser les données existantes.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function completer() {
 var reste = document.createTextNode("parfait!");
 document.getElementById("paragraphe").firstChild.appendData(reste.nodeValue);
}
//-->
</script>
</head>
<body>
<p id="paragraphe">Je suis vraiment si im</p>
<p><a href="javascript:completer()">im - quoi?</a></p>
</body></html>

Explication:

L'exemple contient un paragraphe avec un texte qui n'a pas grand sens et au dessous un lien. En cliquant sur le lien la Autre page d'information fonction completer(), notée dans l'entête de fichier est appelée. Cette fonction crée dans un premier temps un nouveau nœud texte avec Autre page d'information document.createTextNode(). Enfin elle accède au nœud qui représente le contenu de caractères du paragraphe de texte avec le texte incomplet, avec document.getElementById("paragraphe").firstChild, et y insère avec appendData() la valeur du nœud texte nouvellement créé (reste.nodeValue). À partir du texte Je suis vraiment si im on obtient alors Je suis vraiment si imparfait!

Attention:

L'Explorer Internet 5.x ne soutient pas encore cette méthode. Vous pouvez vous en sortir en accédant au contenu d'un nœud texte et en y ajoutant ensuite des données avec nodeValue += "texte". Dans l'Explorer Internet MS 6.0beta et dans l'Explorer Internet MS 5.0, édition Macintosh la méthode n'est par contre pas soutenue.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x cloneNode()

Établit une copie identique d'un nœud, avec ou sans la structure de sous-nœuds qui en fait partie.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title></head>
<body>
<span id="Dolly">Dolly </span>
<script type="text/javascript">
<!--
 Dolly2 = document.getElementById("Dolly").cloneNode(true);
 document.getElementById("Dolly").firstChild.nodeValue += Dolly2.firstChild.nodeValue;
//-->
</script>
</body></html>

Explication:

L'exemple contient un texte Dolly  noté dans un élément span . Au dessous est noté un passage JavaScript. Là, il est accédé à l'élément span avec document.getElementById("Dolly"). Celui-ci est copié avec cloneNode(), et la valeur renvoyée est sauvegardée dans la variable Dolly2. La valeur renvoyée est une copie identique du nœud élément de l'élément span. Dans l'exemple, true est transmis comme paramètre à la méthode. Cela signifie que même le contenu texte de l'élément est copié. Pour ne cloner que l'élément sans son contenu, vous devez transmettre false.
Dans l'exemple le contenu de l'élément span est enfin adressé avec document.getElementById("Dolly").firstChild.nodeValue et, au moyen de l'Autre page d'information opérateur pour relier des chaînes de caractères, lui est ajoutée la valeur de l'élément enfant du clone auquel il est accédé avec Dolly2.firstChild.nodeValue. À la fin figure donc Dolly Dolly  comme contenu de l'élément span.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.x deleteData()

Efface les données d'un nœud texte ou la valeur d'un nœud attribut .

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function effacer() {
 var nombre_signew = document.getElementsByTagName("p")[0].firstChild.nodeValue.length;
 document.getElementsByTagName("p")[0].firstChild.deleteData(0,nombre_signes);
}
//-->
</script>
</head>
<body>
<p>Être bavard est en-soi la vertu du discours et le plaisir de se taire est son antonyme.
Être bavard signifie donc ...
<a href="javascript:effacer()">Oh non, arrête!</a></p>
</body></html>

Explication:

L'exemple contient un paragraphe de texte et un lien. En cliquant sur ce lien, la Autre page d'information fonction effacer(), notée dans l'entête de fichier, est appelée. Cette fonction recherche dans un premier temps, en accédant au contenu en caractères du paragraphe (document.getElementsByTagName("p")[0].firstChild.nodeValue) avec la méthode Autre page d'information string.length le nombre de caractères qu'il contient. Cette valeur est nécessaire pour l'instruction suivante. Là il est à nouveau accédé avec document.getElementsByTagName("p")[0].firstChild au contenu de caractères du paragraphe. Avec deleteData() le contenu est effacé.
La méthode deleteData() attend deux paramètres:
1. le signe à partir duquel l'effacement doit s'effectuer (0 figure pour "à partir du premier signe"),
2. Combien de signes doivent être effacés (dans l'exemple, la variable nombre_signes est transmise à cet effet, le nombre de signes dans le nœud texte recherché auparavant y est sauvegardé).
Le lien dans l'exemple est préservé après l'effacement, parce que l'élément a du lien représente déjà un nouveau nœud enfant.

Attention:

L'Explorer Internet 5.x ne soutient pas encore cette méthode. Pour effacer toutes les données en caractères d'un nœud texte, vous pouvez vous en sortir en accédant au nœud et en affectant à la propriété nodeValue la valeur "" (chaîne de caractères vide) . Dans l'Explorer Internet MS 6.0beta et dans l'édition Macintosh de l'Explorer Internet MS 5.0, en revanche, la méthode est supportée.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x getAttribute()

Recherche la valeur d'un attribut déterminé dans un élément.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function afficher(attr) {
 alert(document.getElementsByTagName("body")[0].getAttribute(attr));
}
//-->
</script></head>
<body bgcolor="#FFFFCC" text="#E00000" link="#0000E0" alink="#000080" vlink="#000000">
<a href="javascript:afficher('bgcolor')">Couleur d'arrière-plan?</a><br>
<a href="javascript:afficher('text')">Couleur du texte?</a><br>
<a href="javascript:afficher('link')">Couleur des liens aux pages pas encore visitées?</a><br>
<a href="javascript:afficher('vlink')">Couleur des liens aux pages déjà visitées?</a><br>
<a href="javascript:afficher('alink')">Couleur des liens pour les liens activés?</a>
</body></html>

Explication:

L'exemple contient plusieurs liens. Tous les liens appellent, lorsqu'on les clique, la Autre page d'information fonction afficher() qui est notée dans l'entête de fichier. Le nom de l'attribut désiré est transmis à la fonction. La fonction accède avec document.getElementsByTagName("body")[0] à l'élément body. Avec getAttribute() les valeurs des attributs du repère d'ouverture <body> peuvent être recherchées. La méthode attend le nom de l'attribut désiré comme paramètre et renvoie sa valeur. Dans l'exemple, elle reçoit à chaque fois le paramètre attr transmis à la fonction.

Attention:

L'exemple ci-dessus est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.x getAttributeNode()

"va chercher" un nœud attribut. Retourne l'objet nœud de l'attribut désiré.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function arranger() {
var  noeudCSS = document.getElementsByTagName("h1")[0].getAttributeNode("style");
 for(i = 0; i < document.getElementsByTagName("p").length; i++)
   document.getElementsByTagName("p")[i].setAttributeNode(noeudCSS);
}
//-->
</script></head>
<body>
<h1 style="font-family:Tahoma; font-size:200%; color:red">Rouge et grand;!</h1>
<p>un paragraphe</p>
<p>et un autre</p>
<p>et encore un avec un <a href="javascript:arranger()">lien pour harmoniser</a></p>
</body></html>

Explication:

L'exemple contient un titre avec un attribut style ainsi que trois paragraphes de texte. Le dernier d'entre eux contient un lien qui si on le clique appelle la Autre page d'information fonction arranger() qui est notée dans l'entête de fichier. Cette fonction va se chercher avec document.getElementsByTagName("h1")[0].getAttributeNode("style") l'objet nœud de l'élément style du titre. La valeur retournée, à savoir l'objet nœud attribut, est sauvegardée dans la variable noeudCSS. Enfin il est accédé dans une Autre page d'information boucle for à tous les éléments p du document. Avec vers le bas setAttributeNode() est ajouté à chaque fois à l'élément actuel p le nœud attribut style sauvegardé. Les éléments p "héritent" de cette manière des propriétés CSS du titre.

Attention:

L'Explorer Internet 5.x ne soutient pas encore cette méthode. La version 6.0beta connaît cette méthode, sans pourtant l'interpréter complètement.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x hasChildNodes()

Recherche si un nœud a des nœuds enfant. Renvoie la valeur booléenne true si c'est le cas et false, si ce n'est pas le cas.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title></head>
<body>
<p></p>
<p>avec contenu</p>
<p></p>
<p>avec contenu</p>
<script type="text/javascript">
<!--
for(i = 0; i < document.getElementsByTagName("p").length; i++)
  if(document.getElementsByTagName("p")[i].hasChildNodes())
    document.write((i+1) + ": cet élément p a un contenu!<br>");
//-->
</script>
</body></html>

Explication:

L'exemple contient quatre paragraphes de texte. Deux d'entre eux ont un contenu de caractères et les deux autres sont vides. Au dessous des paragraphes de texte est noté un Javascript. Celui-ci accède dans une Autre page d'information boucle for avec document.getElementsByTagName("p") et dans l'ordre à tous les éléments p du document. Là il est interrogé avec if(document.getElementsByTagName("p")[i].hasChildNodes()) si l'élément p respectivement actuel traité dans la boucle a des nœuds enfant. Si oui le rang de l'élément où un nœud enfant est trouvé est écrit dans le document avec document.write(). Dans l'exemple c'est le cas pour le deuxième et pour le quatrième élément, étant donné que ces deux nœuds contiennent un nœud texte.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x insertBefore()

Insère dans un nœud un nœud enfant avant un autre nœud enfant.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title></head>
<body>
<p id="letexte">Texte <i id="texte_enitalique">et en italique</i></p>
<script type="text/javascript">
<!--
var nouveauB = document.createElement("b");
var texte_nouveauB = document.createTextNode("avec du texte en caractères gras ");
nouveauB.appendChild(texte_nouveauB);
document.getElementById("letexte").insertBefore(nouveauB, document.getElementById("texte_enitalique"));
//-->
</script>
</body></html>

Explication:

L'exemple contient un paragraphe de texte avec du texte et un élément enfant <i>...</i>. Au dessous du paragraphe de texte est noté un passage JavaScript. D'abord y est créé un nouvel élément du type b pour du texte en caractères gras, avec Autre page d'information document.createElement(). Enfin un nœud texte est créé avec Autre page d'information document.createTextNode(). Le nœud texte est ensuite inséré avec vers le haut appendChild() comme contenu de l'élément b venant d'être créé. Tout le bloc de l'élément b avec son contenu est alors sauvegardé dans la variable nouveauB. Le script accède ensuite à l'élément p avec document.getElementById("letexte") et insère le nouvel élément avec insertBefore() avant l'autre élément enfant dont l'Id est "texte_enitalique". À la fin, le contenu complet de l'élément p est:
Texte <b>avec du texte en caractères gras </b><i>et en italique</i>.
La méthode insertBefore() attend donc deux paramètres:
1. le nouvel élément enfant à insérer,
2. un élément enfant avant lequel le nouvel élément enfant doit être inséré.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.x insertData()

Insère des données en caractères dans un nœud texte à partir d'une certaine position dans la chaîne.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function italiano() {
 document.getElementsByTagName("h1")[0].firstChild.insertData(7, "duemilauno ");
}
//-->
</script></heed>
<body>
<h1>2001 =  ou deux mille un</h1>
<a href="javascript:italiano()">dis-le en italien!</a>
</body></html>

Explication:

L'exemple contient un titre N°1 dans le texte duquel manque encore quelque chose. Au dessous est noté un lien qui, si on le clique, appelle la Autre page d'information fonction italiano() qui est notée dans l'entête de fichier. Cette fonction accède avec document.getElementsByTagName("h1")[0].firstChild au nœud texte du titre et insère avec insertData() à partir du 8ème signe, (position du signe 7, on commence à compter à partir de 0) la chaîne de caractères duemilauno. Le texte qui se trouve derrière ou deux mille un est - comme dans le mode insertion du traitement de texte - simplement repoussé.

Attention:

L'Explorer Internet 5.x ne soutient pas encore cette méthode. Dans l'Explorer Internet MS 6.0beta et dans l'édition Macintosh de l'Explorer Internet MS 5.0, en revanche, la méthode est supportée.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x removeAttribute()

Efface l'affectation de valeur à un attribut d'un élément.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function pas_dalignement() {
 document.getElementById("droite").removeAttribute("align");
}
//-->
</script></head>
<body>
<p id="droite" align="right"><a href="javascript:pas_dalignement()">Suppression de l'alignement!</a></p>
</body></html>

Explication:

L'exemple contient un paragraphe de texte aligné à droite avec align="right" et qui contient un lien. En cliquant sur ce lien, la Autre page d'information fonction pas_dalignement(), notée dans l'entête de fichier est appelée. Cette fonction accède avec document.getElementById("droite") à l'élément p et efface avec removeAttribute("align") la valeur de l'attribut align. Le paragraphe de texte est ainsi aligné à nouveau de façon dynamique (réglage par défaut à gauche).
Il est pourtant important que ce ne soit pas l'attribut qui soit effacé, mais seulement sa valeur. Dans l'exemple l'effet est le même que si on avait noté en HTML:
<p id="droite" align="">...</p>

Attention:

L'Explorer Internet MS 5.0 dans l'édition Macintosh n'interprète pas cet exemple.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.x removeAttributeNode()

Efface d'un élément un nœud attribut y compris son affectation de valeur.

Exemple:

Démonwtration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title></head>
<script language="JavaScript" type="text/javascript">
<!--
function pas_dalignement() {
 document.getElementById("droite").removeAttributeNode(document.getElementById("droite").attributes[1]);
}
//-->
</script>
<body>
<p id="droite" align="right"><a href="javascript:pas_dalignement()">Suppression de l'alignement!</a></p>
</body></html>

Explication:

L'exemple fait la même chose que l'exemple illustrant vers le haut removeAttribute(). La différence réside seulement en ce que, avec removeAttributeNode() l'attribut complet est effacé et pas seulement son affectation de valeur. Cette méthode attend comme paramètre l'objet du nœud attribut désiré. Dans l'exemple document.getElementById("droite").attributes[1] est transmis, étant donné que l'attribut align qui doit être effacé est le 2ème du tableau vers le haut attributes de l'élément p.

Attention:

L'Explorer Internet 5.x ne soutient pas encore cette méthode.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x removeChild()

Efface un nœud enfant d'un élément.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function suppression_element() {
var noeud=document.getElementsByTagName("ol")[0].firstChild;
disparu = document.getElementsByTagName("ol")[0].removeChild(noeud);
alert(disparu.firstChild.nodeValue)
}
//-->
</script></head>
<body>
<ol start="1" type="I"><li>Element 1</li><li>Element 2</li><li>Element 3</li></ol>
<p><a href="javascript:suppression_element()">Supprimer le premier élément</a></p>
</body></html>

Explication:

L'exemple contient une liste numérotée. Au dessous est noté un lien. En cliquant sur ce lien la Autre page d'information fonction suppression_element(), notée dans l'entête de fichier, est appelée. Dans cette fonction. il est accédé au premier nœud enfant avec document.getElementsByTagName("ol")[0].firstChild. La valeur est sauvegardée dans la variable noeud. L'élément de la liste est effacé avec removeChild(noeud). Ici, le nœud à effacer est transmis comme paramètre à la méthode. La méthode removeChild() renvoie comme valeur, l'élément effacé. Cette valeur dans l'exemple est sauvegardée dans la variable globale disparu. Par cette variable, il vous est possible de continuer à accéder aux propriétés du nœud. Ainsi dans l'exemple le contenu du premier nœud enfant de l'élément effacé est-il encore sorti une fois.

Tenez compte quand vous retracez cet exemple de la vers le haut particularité de Netscape 6.1 et de l'Explorer Internet MS 5.0 dans l'édition Macintosh de la façon dont ils traitent les nœuds enfant.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x replaceChild()

Remplace, considéré par rapport à un nœud, l'un de ses nœuds enfant par un autre.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function autre_reponse() {
 var noeud_texte = document.createTextNode("Tu peux!");
 document.getElementById("z2").replaceChild(noeud_texte, document.getElementById("z2").firstChild);
}
//-->
</script></head>
<body>
<table border="1" bgcolor="#FFFFC0" width="30%">
<tr><td id="z1">Puis-je?</td><td id="z2">aucune idée!</td></tr>
</table>
<p><a href="javascript:autre_reponse()">autre réponset!</a></p>
</body></html>

Explication:

L'exemple contient un tableau avec deux cellules. Au dessous du tableau est noté un lien. En cliquant sur le lien la Autre page d'information fonction autre_reponse(), notée dans l'entête de fichier est appelée. Cette fonction crée dans un premier temps un nouveau nœud texte pour la réponse avec Autre page d'information document.createTextNode(). La réponse est nécessaire sous la forme d'un nœud objet parce que la méthode replaceChild() attend aussi bien le nouveau nœud que le nœud à remplacer sous la forme d'un objet nœud. Dans l'exemple, il est accédé à la deuxième cellule de tableau avec document.getElementById("z2") pour remplacer son contenu, donc le nœud texte qui représente son nœud enfant, par le nœud texte nouvellement créé. Pour ce faire replaceChild() est appliqué. Comme premier paramètre, le nouveau nœud est transmis, comme deuxième paramètre le nœud à remplacer. Le nouveau nœud est, dans l'exemple, sauvegardé dans la variable noeud_texte. Il est accédé au nœud à remplacer avec document.getElementById("z2").firstChild.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.x replaceData()

Remplace des données en caractères dans le contenu d'un élément ou dans l'affectation de valeur à un attribut.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function autre_reponse() {
 var texte = "Tu peux!";
 var depart_rd = 0;
 var taille_rd = document.getElementById("z2").firstChild.nodeValue.length;
 document.getElementById("z2").firstChild.replaceData(depart_rd,taille_rd,texte);
}
//-->
</script></head>
<body>
<table border="1" bgcolor="#FFFFC0" width="30%">
<tr><td id="z1">Puis-je?</td><td id="z2">aucune idée!</td></tr>
</table>
<p><a href="javascript:autre_reponse()">autre réponse!</a></p>
</body></html>

Explication:

L'exemple fait la même chose que dans l'exemple illustrant vers le haut replaceChild(). La différence réside seulement en ce qu'avec replaceData() il est travaillé au niveau du texte et que cette méthode permet un remplacement ciblé à partir d'une certaine position et pour une certaine longueur. replaceData() attend comme paramètre tout d'abord la position de départ dans la chaîne de caractères, à partir de laquelle un remplacement doit être effectué. Dans l'exemple, la variable depart_rd est transmise à cet effet; auparavant la valeur 0 lui a été affectée. Ainsi, le remplacement se fera à parti du premier signe. Le nombre de signes devant être remplacés est transmis comme deuxième paramètre. Dans l'exemple la variable taille_rd a été transmise. auparavant le nombre total de signes du nœud texte de la deuxième cellule de tableau lui a été affecté avec document.getElementById("z2").firstChild.nodeValue.length . Dans l'exemple, c'est le contenu complet de la deuxième cellule du tableau qui sera remplacé de cette façon. Avec une mention telle que 0,1 vous ne remplaceriez par exemple que le premier signe.
Comme troisième paramètre replaceData() attend une chaîne de caractères avec laquelle la chaîne de caractères marquée auparavant dans le nœud texte doit être remplacée. Dans l'exemple, c'est la variable texte qui est transmise, à laquelle une valeur a été précédemment affectée.

Attention:

L'Explorer Internet 5.x ne soutient pas encore cette méthode. Dans l'Explorer Internet MS 6.0beta et dans l'Explorer Internet MS 5.0 dans l'édition Macintosh la méthode est en revanche soutenue.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x setAttribute()

Fixe à nouveau une valeur d'atribut dans un élément. Si l'attribut existe déjà, son ancienne valeur sera remplacée par la nouvelle. Si ce n'est pas le cas, il est créé et la nouvelle valeur lui est affectée.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function fixer() {
 document.getElementsByTagName("body")[0].setAttribute("bgColor", document.formulaire.bgcolor.value);
 document.getElementsByTagName("body")[0].setAttribute("text", document.formulaire.text.value);
}
//-->
</script></head>
<body bgcolor="#FFFFCC" text="#E00000">
<form name="formulaire" action=""><pre>
Couleur d'arrière-plan:      <input type="text" name="bgcolor">
Couleut du texte:             <input type="text" name="text">
Werte:                 <input type="button" value="fixer" onClick="fixer()">
</pre></form>
</body></html>

Explication:

L'exemple contient un formulaire avec deux champs de saisie dans lequel l'utilisateur peut entrer des nouvelles valeurs pour les deux attributs bgcolor et text de l'élément body. En cliquant sur le bouton placé au dessous, la Autre page d'information fonction fixer(), notée dans l'entête de fichier, est appelée. Cette fonction accède avec document.getElementsByTagName("body")[0] à l'élément body et lui affecte les nouveaux attributs avec setAttribute(). Comme premier paramètre est transmis le nom de l'attribut à créer ou à remplacer, comme deuxième paramètre la valeur désirée. Dans l'exemple le deuxième paramètre transmis est la valeur respective des deux champs de saisie du formulaire.

Attention:

L'Explorer Internet MS est très sensible en ce qui concerne le premier paramètre, à savoir le nom de l'attribut désiré. Avec bgColor l'exemple ci-dessus fonctionnait, avec bgcolor en revanche non. Visiblement l'Explorer Internet mélange la syntaxe nécessaire pour l'Autre page d'information objet élément HTML body avec la valeur requise ici. Dans l'édition Macintosh de l'Explorer Internet MS 5.0 l'exemple peut certes être retracé, avec pourtant des résultats très étranges.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.x setAttributeNode()

Insère dans un élément un nouveau nœud attribut. Si le nœud attribut existe déjà, l'ancien nœud est remplacé par le nouveau. Si ce n'est pas le cas, il est créé.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title></head>
<body>
<h1>Élément sans propriétés?</h1>
<script type="text/javascript">
<!--
 var alignement = document.createAttribute("align");
 alignement.nodeValue = "center"
 document.getElementsByTagName("h1")[0].setAttributeNode(alignement);
//-->
</script>
</body></html>

Explication:

L'exemple contient un titre N°1 - sans attribut. Au dessous est noté un Javascript. Là est d'abord créé avec Autre page d'information document.createAttribute() un nouveau nœud attribut pour un attribut nommé align. Le nœud est sauvegardé dans la variable alignement. Par alignement.nodeValue il est ensuite possible d'affecter une valeur au nœud créé. Avec document.getElementsByTagName("h1")[0] le script accède pour finir à l'élément titre et lui affecte le nœud attribut créé auparavant et sauvegardé dans alignement avec setAttributeNode(alignement).

Attention:

L'Explorer Internet 5.x ne soutient pas encore cette méthode. Dans l'Explorer Internet MS 6.0beta et dans l'édition Macintosh de l'Explorer Internet MS 5.0, en revanche, la méthode est supportée.

 vers le haut
page suivante Autre page d'information all
page précédente Autre page d'information Objets éléments HTML
 

© 2001 Stefan Münz / © 2002 Traduction Adresse électronique Serge François, 13405@free.fr
Adresse électronique selfhtml@fr.selfhtml.org