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 Array d'objets

Array d'objets

19 réponses
Avatar
unbewusst.sein
j'ai une extension de Array, par exemple la fonction :
#index(o) qui retourne l'index de l'objet dans l'Array.

ça marche bien avec des string.

par contre avec des objets du dom ça marche pas.

apparemment l'objet Array interne à JavaScript n'est pas étendu avec ma
fonction #index(o) si je fais :

var dts=new Array();
dts=document.getElementsByTagName("dt");

et que je liste les propriétés de dts je ne retrouve pas #index.

donc je change de "tactique" je fais :

var dts=new Array();
var dts_=document.getElementsByTagName("dt");
for(i in dts_){dts[dts.length]=dts_[i];}

donc là, sur dts j'ai bien la méthode #index MAIS quand je prend un
élément de cette Array par ex dts[i], cet élément n'a plus les
propriétés/méthodes associées à cet élément du dom (comme objet).

Ainsi, si je fais :

var i=0;
dts[i].style.display='none';

js/console me dit :
dts[i].style has no properties

je ne pige pas où est mon erreur de raisonnement...
c'est peut-être aussi bien une typo toute bête...

la page d'essai est là :
<http://www.yvon-thoraval.com/XHTML11/one-menu.xhtml>
l'erreur apparaît dès le chargement de la page, ce qui n'empèche pas
vraiment le script de marcher...
en cliquant sur le premier élément "HOME" du menu de droite on actionne
la fonction expand(this) qui pour l'instant ne fait que lister les
propriétés d dts (où on retoruve bien index).



--
Artaban de Médée
Signaler un problème avec ce contenu

9 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
Avatar
unbewusst.sein
ASM wrote:

ce truc fait vraiment ce que tu voulais ?


oui
à mon idée ça display le 1er DD et dé-display les autres si plusieurs


non car je prend le prmier dd SUIVANT le dt correspondant au this de :

<dt onclick="javascript:expand(this);>

d'où l'intérêt de ma variable found = false tant que pas trouvé un dt
=== this, à ture après avoir trouvé le seul dt === this et enfin re à
false au premier dd suivant...

function expand(o) {
var dds = o.parentNode.getElementsByTagName('DD');
for(var i=0; i<dds.length; i++)
{
if(i==0) dds[i].style.display = 'none';
else dds[i].style.display = 'block';
}
}

le gros intérêt est que je n'ai pas besoin de gérer des id sur les
différents noeuds, enfin j'en ai juste besoin d'un pour initialiser à
'none tous les "dd".



Heu, je suppose ton html de la forme :

dl
dt /dt
dd /dd
/dl


oui, c'est cette forme là avec une dizaine de couples :
dt /dt
dd /dd

(c'est un menu en pratique)

dans chaque DT
this.parentNode.getElementsByTagName('DD')[0]
attrape tt de suite le DD suivant le DT


ben non, je ne pense pas car après this.parenNode ou a le dl qui englobe
tous les couples dt, dd et donc le dd[0] serait tjs le même : le premier
amha...

et si c'est pour gérer d'un coup tous les dd de la page
dds = document.getElementsByTagName('dd');

et si c'est seulement les DD du div d'id = 'truc'
dds = document.getElementsById('truc').getElementsByTagName('dd');


oui, ça, ça correspond à ma première version...



function switcherTout(divId) {
dds = document.getElementsById(divId).getElementsByTagName('dd');
for(var i=0; i<dds.length; i++) switcher(dds[i]);
}

function switcher(monDD) {
monDD = monDD.parentNode.getElementsByTagName('DD')[0].style;
monDD.display = monDD.display==''? 'none' : '';
}

<dl>
<dt><a href="#" onclick="switcher(this);return false;">
show/hide
</a>
</dt>
<dd>test</dd>
</dl>


pas besoin de <a href... il suffit de mettre le onclick comme attribut
des dt...

--
Artaban de Médée


Avatar
unbewusst.sein
Olivier Miakinen <om+ wrote:

Il semble que ce soit le cas
pour les tableaux d'éléments du DOM.


ouais, le type of est object...
--
Artaban de Médée

Avatar
ASM
ASM wrote:

ce truc fait vraiment ce que tu voulais ?


oui
à mon idée ça display le 1er DD et dé-display les autres si plusieurs


non car je prend le prmier dd SUIVANT le dt correspondant au this de :


Ben oui ... le 1er suivant : je suis dans le cas supposé par moi,
puisque tu n'éclaires pas sur ton flux html ... on doit se l'inventer

Heu, je suppose ton html de la forme :

dl
dt /dt
dd /dd
/dl


oui, c'est cette forme là avec une dizaine de couples :
dt /dt
dd /dd


Ha ! voilà une précision manquante et pourtant importante.


(c'est un menu en pratique)

dans chaque DT
this.parentNode.getElementsByTagName('DD')[0]
attrape tt de suite le DD suivant le DT


ben non, je ne pense pas car après this.parenNode ou a le dl qui englobe
tous les couples dt, dd et donc le dd[0] serait tjs le même : le premier
amha...


ben oui puisque tu htmélise multiples

pas besoin de <a href... il suffit de mettre le onclick comme attribut
des dt...


L'un ou l'autre, au choix (on s'en moque un peu / au pb rencontré)

Mais puisqu'enfin :

<script type="text/javascript">
function suivant(o) {
var M = o.parentNode.getElementsByTagName('DD');
for(var i=0; i<M.length; i++) M[i].style.display = 'none';
o.nextSibling.nextSibling.style.display = 'block';
}
</script>
<dl>
<dt onclick="suivant(this)">test 1</dt>
<dd>resultat test 1</dd>
<dt onclick="suivant(this)">
test 2
</dt>
<dd>
resultat test 2
un peu détaché/délié
pour voir ces histoires de nextSibling
</dd>
<dt onclick="suivant(this)">test 3</dt>
<dd>resultat test 3</dd>
</dl>

Et ça fonctionne même avec IE Mac ! ! !

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


Avatar
unbewusst.sein
ASM wrote:


Et ça fonctionne même avec IE Mac ! ! !



<dt onclick...>Test 1</dt><dd>baratin</dd>
<dt ...
idem que ce que tu as donné.

je devais avoir une erreur car j'ai cru que lorsque :

o.nextSibling retournait un noeud texte, on ne pouvait plus appliquer
nextSibling derrière... (mais il n'y a pas de raison à vrai dire, c'est
un noeud c'est tout)

mais bon, du coup, je ne pige pas pourquoi en écrivant le html comme
ci-dessus (pas de text node entre le 1ier dt et le dd juste après) j'ai
le message d'erreur suivant :

o.nextSibling.nextSibling.style has no properties

puisque dans ce cas on tombe sur le dt suivant (en seconde position)
(NON voir + bas)

???

euh, problème de comprenotte de mon côté, si j'ajoute, dans le js :
alert(o.nextSibling.nextSibing.nodeName) juste avant
o....display='block';

dans mon cas de figure (html) ci-dessus j'obtiens :
nodeName=#text

donc oui, c'est normal, on tombe sur le texte entre dd et le dt suivant,
lequel noeud text n'a pas de style associé.

on ne tombe donc pas, bien évidemment, sur le dt suivant

bon, le seul pb avec ta solution est que, dans mon cas, j'obtiens le
menu par une transfo xslt et je ne sais pas si je vais avoir -- ou non
-- des noeuds, faits d'espaces et de n entre les dt et les dd
suivants...
--
Artaban de Médée

Avatar
ASM
dans mon cas de figure (html) ci-dessus j'obtiens :
nodeName=#text


c'est vrai que c'est limite chiant ces sibling :-(

et si on faisait

while(o.nodeName.toLowerCase() != 'dd') o = o.nexSibling;
o.style.display = 'block';

au lieu de :

o.nextSibling.nextSibling.style.display = 'block';

bon, le seul pb avec ta solution est que, dans mon cas, j'obtiens le
menu par une transfo xslt et je ne sais pas si je vais avoir -- ou non
-- des noeuds, faits d'espaces et de n entre les dt et les dd
suivants...


Ha ! alors ! pour sûr ! si on n'est pas maître de l'écriture ... :-(
(la variante du moment semble bien fonctionner)

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

Avatar
unbewusst.sein
ASM wrote:


Ha ! alors ! pour sûr ! si on n'est pas maître de l'écriture ... :-(
(la variante du moment semble bien fonctionner)


ah oui, je suis d'accord !

--
Artaban de Médée

Avatar
Laurent vilday
dans mon cas de figure (html) ci-dessus j'obtiens :
nodeName=#text


c'est vrai que c'est limite chiant ces sibling :-(


Ca va pas la tête ? :D c'est pas les siblings qui sont chiants, c'est
les #@!# de "phantom nodes" qui viennent polluer le DOM.

et si on faisait

while(o.nodeName.toLowerCase() != 'dd') o = o.nexSibling;
while ( o && o.nodeName.toLowerCase() ....


histoire de pas tomber en erreur quand o.nextSibling === null

bon, le seul pb avec ta solution est que, dans mon cas, j'obtiens le
menu par une transfo xslt et je ne sais pas si je vais avoir -- ou non
-- des noeuds, faits d'espaces et de n entre les dt et les dd
suivants...



Aller, au pire tu dégages tous les nodes textes qui, grrrr restons poli
:D , embête.

/**
* 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;
}

// parce que c'est incompréhensible qu'une fonction trim() n'existe pas
String.prototype.trim = function()
{
return this.replace(/^s+|s+$/g, "");
};

// parce que IE6 est trop bête
/* @cc_on
document.ELEMENT_NODE = 1;
document.TEXT_NODE = 3;
@*/

var DOM {
/**
* Nettoie les "phantom nodes" du document
* @param {string|HTMLElement} elt Id de l'élément ou sa référence
* @param {boolean} recursif Recusivité, false par défaut
* @public
* @todo Déplacer dans DOM_whitespace.js
*/
cleanWhitespace:function(elt, recursif)
{
var E = $(elt), i, node, V;
if ( E && E.childNodes )
{
for ( i = E.childNodes.length - 1; i >= 0; i-- )
{
node = E.childNodes[i];
if ( node.nodeType == document.TEXT_NODE )
{
V = node.nodeValue.trim();
if ( V === '' ||
V == 'n' || V == 't' || V == 'r' ||
V == 'rn' || V == 'nr' )
{
E.removeChild(node);
}
}
else if ( node.nodeType == document.ELEMENT_NODE && recursif )
{
DOM.cleanWhitespace(node, recursif);
}
}
}
}
};

<dl id="menu">
<dt>
label 1
</dt>
<dd>Menu 1</dd>
<dt>label 2</dt><dd>
Menu 2
</dd>
</dl>

window.onload = function()
{
DOM.cleanWhitespace($('menu'), true);
};

--
laurent


Avatar
Laurent vilday
Ha ? une collection d'éléments n'est pas un tableau (array) ?


Exactement.

var tableau = [];
var collection = document.getElementsByTagName('*');
alert("A === " + ( tableau instanceof Array));
alert("B === " + ( collection instanceof Array));
// A === true
// B === false

--
laurent

Avatar
ASM

c'est vrai que c'est limite chiant ces sibling :-(


Ca va pas la tête ? :D c'est pas les siblings qui sont chiants, c'est
les #@!# de "phantom nodes" qui viennent polluer le DOM.


Voui, bon, c'est chiant quoi ! :-)

et si on faisait

while(o.nodeName.toLowerCase() != 'dd') o = o.nexSibling;
while ( o && o.nodeName.toLowerCase() ....


histoire de pas tomber en erreur quand o.nextSibling === null


Ha ! j'oublie touj et me demande à chaque fois pourquoi la console FF râle.

Depuis que j'ai vu ton 'tit prototype,
ce n'est pas le seul casse-gueule de cette fonction qui va styler
d'office le dernier sibling trouvé même s'il n'est pas le bon.
(dur dur de penser à tous les cas de figure)

Aller, au pire tu dégages tous les nodes textes qui, grrrr restons poli
:D , embête.


Et vlan !
Encore un truc in-lisible ! :-)


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


1 2