SELFHTML/Aides à la navigation JavaScript/DOM Référence objet| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
 |
node |
|
Propriétés:
Méthodes:
|
 | |
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 
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 document getElementById, getElementsByName et 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.
<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>
|
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 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.
 |
attributesSauvegarde le tableau des attributs disponibles d'un élément.
<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>
|
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 nodeValue sauvegarde la valeur correspondante.
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.
|
|
childNodesSauvegarde un tableau de tous les nœuds enfant disponibles d'un nœud.
<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>
|
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 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.
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.
<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>
|
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é .
|
|
dataSauvegarde les données de caractères d'un nœud dans la mesure où il s'agit d'un nœud texte.
<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>
|
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 fonction JavaScript sortir() est appelée. Celle-ci accède avec document.getElementById("contenu_document") à l'élément body. Avec 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.
|
|
firstChildSauvegarde l'objet du premier nœud enfant d'un nœud.
<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>
|
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 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..
|
|
lastChildSauvegarde l'objet du dernier nœud enfant d'un nœud.
<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>
|
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 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.
|
|
nextSiblingSauvegarde, 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é.
<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>
|
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 boucle while qui suit, il est vérifié si le nœud est différent de null et le 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.
|
|
nodeNameSauvegarde le nom d'un nœud.
<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>
|
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 particularité de Netscape 6.1 de la façon dont il traite les nœuds enfant.
|
|
nodeTypeSauvegarde 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:
|
<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>
|
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.
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é.
|
|
nodeValueSauvegarde 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.
<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>
|
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 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 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.
L'exemple montre que nodeValue remplit une fonction similaire à celle de la propriété 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 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 document.createElement(), document.createAttribute() et document.createTextNode().
|
|
parentNodeSauvegarde le nœud parent d'un nœud.
<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>
|
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.
L'exemple indiqué est également interprété par Opera 5.12.
|
|
previousSiblingSauvegarde, 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é.
<html><head><title>Test</title></head>
<body id="contenu_document"
onLoad="alert(document.getElementById('contenu_document').previousSibling.nodeName)">
</body></html>
|
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 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.
|
|
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.
<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>
|
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 removeChild() . Ensuite est notée une 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 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 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.
|
|
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.
<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>
|
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 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 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!
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.
|
|
cloneNode()Établit une copie identique d'un nœud, avec ou sans la structure de sous-nœuds qui en fait partie.
<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>
|
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' 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.
|
|
deleteData()Efface les données d'un nœud texte ou la valeur d'un nœud attribut .
<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>
|
L'exemple contient un paragraphe de texte et un lien. En cliquant sur ce lien, la 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 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.
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.
|
|
getAttribute()Recherche la valeur d'un attribut déterminé dans un élément.
<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>
|
L'exemple contient plusieurs liens. Tous les liens appellent, lorsqu'on les clique, la 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.
L'exemple ci-dessus est également interprété par Opera 5.12.
|
|
getAttributeNode()"va chercher" un nœud attribut. Retourne l'objet nœud de l'attribut désiré.
<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>
|
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 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 boucle for à tous les éléments p du document. Avec 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.
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.
|
|
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.
<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>
|
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 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.
|
|
insertBefore()Insère dans un nœud un nœud enfant avant un autre nœud enfant.
<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>
|
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 document.createElement(). Enfin un nœud texte est créé avec document.createTextNode(). Le nœud texte est ensuite inséré avec 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é.
|
|
insertData()Insère des données en caractères dans un nœud texte à partir d'une certaine position dans la chaîne.
<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>
|
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 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é.
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.
|
|
removeAttribute()Efface l'affectation de valeur à un attribut d'un élément.
<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>
|
L'exemple contient un paragraphe de texte aligné à droite avec align="right" et qui contient un lien. En cliquant sur ce lien, la 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>
L'Explorer Internet MS 5.0 dans l'édition Macintosh n'interprète pas cet exemple.
|
|
removeAttributeNode()Efface d'un élément un nœud attribut y compris son affectation de valeur.
<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>
|
L'exemple fait la même chose que l'exemple illustrant 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 attributes de l'élément p.
L'Explorer Internet 5.x ne soutient pas encore cette méthode.
|
|
removeChild()Efface un nœud enfant d'un élément.
<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>
|
L'exemple contient une liste numérotée. Au dessous est noté un lien. En cliquant sur ce lien la 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 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.
|
|
replaceChild()Remplace, considéré par rapport à un nœud, l'un de ses nœuds enfant par un autre.
<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>
|
L'exemple contient un tableau avec deux cellules. Au dessous du tableau est noté un lien. En cliquant sur le lien la 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 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.
|
|
replaceData()Remplace des données en caractères dans le contenu d'un élément ou dans l'affectation de valeur à un attribut.
<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>
|
L'exemple fait la même chose que dans l'exemple illustrant 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.
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.
|
|
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.
<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>
|
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 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.
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' 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.
|
|
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éé.
<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>
|
L'exemple contient un titre N°1 - sans attribut. Au dessous est noté un Javascript. Là est d'abord créé avec 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).
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.
|
| |
 |
all
|
 |
Objets éléments HTML
|
| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
© 2001 Stefan Münz / © 2002 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
