Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage JavaScript manipulation du dom

manipulation du dom

22 réponses
Avatar
unbewusst.sein
j'ai un arbre comme ça :

<dl id="menu">
<dt onclick="javascript:expand(this);">Label 1</dt>
<dd><ul><li>...</li></ul></dd>
[...]
<dt onclick="javascript:expand(this);">Label n</dt>
<dd>...</dd>
</dl>

donc this est un "dt" et je voudrais obtenir le "dd" qui suit.

si je fais :

this.parentNode.nextSibling j'obtiens le noeud texte qui est entre "dt"
et "dd", ce qui n'est pas le but de la manip.

avec le dom/Js n'as t'on pas des expressions XPath permettant d'obtenir
l'élément suivant de nom dd ???
--
Artaban de Médée
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2 3
Avatar
ASM
si je fais :

this.parentNode.nextSibling j'obtiens le noeud texte qui est entre "dt"
et "dd", ce qui n'est pas le but de la manip.


<dl>
<dt>
<a href="#"
onclick="alert(this.parentNode.nextSibling.nextSibling.innerHTML);
return false;">
test
</a>
</dt>
<dd>le test</dd>
</dl>


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Avatar
unbewusst.sein
ASM wrote:

<dl>
<dt>
<a href="#"
onclick="alert(this.parentNode.nextSibling.nextSibling.innerHTML);
return false;">
test
</a>
</dt>
<dd>le test</dd>
</dl>


ça marche pas à cause des noeuds texte : si le premier nextSibling est
un noeud texte comme dans le cas que tu donnes entre la fin de </dt> et
le début de <dd> :

</dt><-- noeud
texte --><dd>

il faudrait alors écrire :
</dt><dd>...
^------------ plus de noeud texte....


mais je vais chercher s'il n'y a pas un moyen de faire du XPath en js,
on peut bien faire du xslt...
--
Artaban de Médée

Avatar
ASM
ASM wrote:

<dl>
<dt>
<a href="#"
onclick="alert(this.parentNode.nextSibling.nextSibling.innerHTML);
return false;">
test
</a>
</dt>
<dd>le test</dd>
</dl>


ça marche pas


Heu ... en bête html, chez moi ça marche.

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé


Avatar
unbewusst.sein
Une Bévue wrote:

mais je vais chercher s'il n'y a pas un moyen de faire du XPath en js,
on peut bien faire du xslt...


ça marche avec WebKit, mais pas avec Firefox ???
pourtant le dom3 XPath est supposé être OK avec mozilla ???
pas de XPath avec Opera 9.2, ou alors la syntaxe n'est pas celle de
dom3...
--
Artaban de Médée

Avatar
unbewusst.sein
ASM wrote:


Heu ... en bête html, chez moi ça marche.


oui, je me suis trompé, j'ai mal interprété un message d'erreur, le
nextSibling.nextSibling marche impec, pas de raison que ça ne marche pas
d'ailleurs.

en fait mon message d'erreur devait être :

o.nextSibling.nextSibling.style ha no properties

ce qui est vrai pour un noeud texte, mais nextSibling.nextSibling était
bon quand m^me...
--
Artaban de Médée

Avatar
Laurent vilday
j'ai un arbre comme ça :

<dl id="menu">
<dt onclick="javascript:expand(this);">Label 1</dt>
<dd><ul><li>...</li></ul></dd>
[...]
<dt onclick="javascript:expand(this);">Label n</dt>
<dd>...</dd>
</dl>

donc this est un "dt" et je voudrais obtenir le "dd" qui suit.

si je fais :

this.parentNode.nextSibling j'obtiens le noeud texte qui est entre "dt"
et "dd", ce qui n'est pas le but de la manip.


Les trop célèbres "phantom nodes" qui polluent nos arbres.
http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM

/**
* Retourne la référence d'un élément HTMLElement
* @param {string} e ID de l'élément dont on veut la référence DOM
* @param {HTMLElement} D document de référence (optional)
* @public
* @return {HTMLElement} Une référence DOM vers un élément HTML.
*/
function $(e, D)
{
D = D || document;
return typeof e == 'string' ? D.getElementById(e) : e;
}

var DOM {
/**
* Obtient le prochain élément de type "nodeName" depuis "elt"
* @param {string|HTMLElement} elt Id de l'élément ou sa référence
* @param {string} nodeName Le nodeName désiré
* @public
* @return {HTMLElement} La référence de l'élément suivant
*/
suivant:function(elt, nodeName)
{
var E = $(elt), sibling;
nodeName = nodeName.toUpperCase();
if ( !E ) { return null; }
sibling = E.nextSibling;
while ( sibling !== null )
{
if ( sibling.nodeName.toUpperCase() == nodeName ) { return sibling; }
sibling = sibling.nextSibling;
}
return null;
},

/**
* Obtient le précédent élément de type "nodeName" depuis "elt"
* @param {string|HTMLElement} elt Id de l'élément ou sa référence
* @param {string} nodeName Le nodeName désiré
* @public
* @return {HTMLElement} La référence de l'élément précédent
*/
precedent:function(elt, nodeName)
{
var E = $(elt), sibling;
nodeName = nodeName.toUpperCase();
if ( !E ) { return null; }
sibling = E.previousSibling;
while ( sibling !== null )
{
if ( sibling.nodeName.toUpperCase() == nodeName ) { return sibling; }
sibling = sibling.previousSibling;
}
return null;
}
};

Ce qui, adapté à ton exemple, pourra être utilisé comme ceci :

function expand(menu)
{
var Smenu = DOM.suivant(menu, 'DD');
if ( Smenu )
{
Smenu.style.display = Smenu.style.display == 'none' ? '': 'none';
}
return true;
}

<dl id="menu">
<dt onclick="return expand(this);">Label 1</dt>
<dd><ul><li>menu 1</li></ul></dd>
<dt onclick="return expand(this);">Label n</dt>
<dd>menu n</dd>
</dl>

--
lauren

Avatar
unbewusst.sein
Laurent vilday wrote:


Les trop célèbres "phantom nodes" qui polluent nos arbres.
http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM


ouais, c'est un classique ;-)

enfin, c'est une question de définition aussi, dans le xml/html(bien
balancé) on aurait pu s'imposer que tout ce qui est en dehors d'un
élément compte pour rien...

dans ce cas pas de noeud text parasite...

et un truc indenté genre :

<dl>
<dt>Machin</dt>
<dd>Bidule</dd>
...

aurait été équivalent à :

<dl><dt>Mahin</dt><dd>Bidule</dd>...

ça force pesque à avoir deux versions du du document actuellement, l'une
indentée, l'autre pas...


/**
* Retourne la référence d'un élément HTMLElement
* @param {string} e ID de l'élément dont on veut la référence DOM
* @param {HTMLElement} D document de référence (optional)
* @public
* @return {HTMLElement} Une référence DOM vers un élément HTML.
*/
<snip />


c'est super ton js plus élégant que ce que j'ai fait avec mes boucles
for...

euh, mais, on a vraiment besoin du toUpperCase() ???

je veux dire en interne c'est comment DD ou dd est-ce que ça dépend de
l'écriture du html ou non ? perso j'utilise tjs lowercase...


--
Artaban de Médée

Avatar
Laurent vilday
Laurent vilday wrote:

Les trop célèbres "phantom nodes" qui polluent nos arbres.
http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM


ouais, c'est un classique ;-)

enfin, c'est une question de définition aussi, dans le xml/html(bien
balancé) on aurait pu s'imposer que tout ce qui est en dehors d'un
élément compte pour rien...

dans ce cas pas de noeud text parasite...

et un truc indenté genre :

<dl>
<dt>Machin</dt>
<dd>Bidule</dd>
...

aurait été équivalent à :

<dl><dt>Mahin</dt><dd>Bidule</dd>...


Oui mais non. Parce que à partir de ce moment là, il ne "serait" plus
possible de faire des transformations de certaines propriétés CSS.
"white-space:pre" pour ne pas la citer :)
https://bugzilla.mozilla.org/show_bug.cgi?id&179

<div style="white-space:pre">

</div>

est différent de <div></div> et pourtant les noeuds vides sont à
l'intérieur de l'élément.

M'enfin je persistes à dire que c'est une erreur *dramatique* que de
conserver les noeuds vides sur l'interface publique du DOM et que
l'argument des propriétés CSS est foireux, mais bon ce n'est que mon avis.

euh, mais, on a vraiment besoin du toUpperCase() ???

je veux dire en interne c'est comment DD ou dd est-ce que ça dépend de
l'écriture du html ou non ? perso j'utilise tjs lowercase...


Ca ne dépend pas de l'écriture du html (fort heureusement imagine devoir
gérer toutes les combinaisons de majuscules/minuscules possibles pour
chaque tag :), mais du mode de réprésentation de l'interpréteur
j'imagine. Doit bien exister une norme quelque part, mais je sais pas
trop où et pas trop envie de chercher :)

De mes constatations pour l'instant, c'est toujours écrit en majuscules

<html>
<head>
<script type="text/javascript">
window.onload = function() { alert(document.body.nodeName); };
// BODY, et pas body ni bOdY ni boDy ni autre combinaison :)
</script>
</head>
<bOdY></boDy>
</html>

--
laurent


Avatar
ASM

euh, mais, on a vraiment besoin du toUpperCase() ???



du lower ou upper tu choises
mais oui, à mon idée, c'est obligé :
- on n'est pas maître des fantaisies des navigateurs
- on n'est pas maître de ton html (à ce que j'ai compris ?!)

Ca ne dépend pas de l'écriture du html


Heu ... Ha bon ?

mais du mode de réprésentation de l'interpréteur


Ça, oui OK.

De mes constatations pour l'instant, c'est toujours écrit en majuscules


oui ... mais qui sait ?

Néanmoins, c'est ainsi que je fais :
var truc = document.getElementsByTagName('DD');
et non pas (sauf paresse) :
var truc = document.getElementsByTagName('dd');
même si tout mes tags sont en minuscules,
même si le navigateur se mouline tout en majuscules.

<html>
<head>
<script type="text/javascript">
window.onload = function() { alert(document.body.nodeName); };
// BODY, et pas body ni bOdY ni boDy ni autre combinaison :)
</script>
</head>
<bOdY></boDy>
</html>


Ha oui ! fortiche le parser de tags



--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé


Avatar
Bobe
Laurent vilday nous a dit le 16.01.2007 20:46:

euh, mais, on a vraiment besoin du toUpperCase() ???

je veux dire en interne c'est comment DD ou dd est-ce que ça dépend de
l'écriture du html ou non ? perso j'utilise tjs lowercase...


Ca ne dépend pas de l'écriture du html (fort heureusement imagine devoir
gérer toutes les combinaisons de majuscules/minuscules possibles pour
chaque tag :), mais du mode de réprésentation de l'interpréteur
j'imagine. Doit bien exister une norme quelque part, mais je sais pas
trop où et pas trop envie de chercher :)

De mes constatations pour l'instant, c'est toujours écrit en majuscules



Si le document est parsé en tant que html, nodeName représente toujours
le nom de balise en majuscule.
Si le document est parsé en tant que xml, nodeName représente le nom de
balise tel qu'il apparaît dans le code xml (body, BoDy, BODy, etc).

Le fait d'utiliser toLowerCase() ou toUpperCase() dans ce cas est utile
pour les scripts qui se veulent portables.

--
Aurélien Maille


1 2 3