[DOM] Javascript getElement--> Class

Version imprimable

27/09/2008, 16h26
Pymento

[DOM] Javascript getElement--> Class

Bonjour, je débute un peu en javascript, j'ai essayé une multitude de choses mais sans résultat voici la structure à traiter.

Code:

<span class="test"><span> VALEUR </span></span>

je veux simplement Récupérer "VALEUR".
Pour précision la class "test" est unique, et je ne peux modifier la structure et la passer en id par exemple.
Merci d'avance pour votre aide.

oh my god, heureux membre que voilà ! j'ai la fonction qui résoudra tout tes problèmes :king:
(euh... ouais non je viens de me taper du mousseux 1/2 sec...)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function getElementByAttr(e,attr,value) { var tab = []; if (e.getAttribute && e.getAttribute(attr)==value) tab.push(e); var n = e.firstChild; if (n==null || typeof n=='undefined') return tab; do { var tab2 = getElementByAttr(n,attr,value); tab = tab.concat(tab2); }while((n = n.nextSibling)!=null) return tab; }
ex - plication
c'te jolie fonction te permet de rechercher les éléments enfants de "e" ayant la valeur "value" pour l'attribut "attr" (je développe en ce moment une petite librairie js)

appel pour toi !

Code:

var arrayElts = getElementByAttr(document,"className","test");

ça retourne une collection d'élément

29/09/2008, 11h08
19cmos83

Citation:

c'te jolie fonction te permet de rechercher les éléments enfants de "e" ayant la valeur "value" pour l'attribut "attr"

Fort intéressant.

Si j'ai bien compris "e" est le document contenant tous les objets. mais pour "la valeur "value" pour l'attribut "attr" j'ai pas bien compris ce que cela représente pour un élement.

Merci

Code:

1 2 3 var arrayElts = getElementByAttr(document,"tagName","DIV"); équivaut à var arrayElts = document.getElementsByTagName("DIV");
Code:

1 2 3 var element = getElementByAttr(document,"id","mon_id")[0]; équivaut à var element = document.getElementById("mon_id");
Code:

1 2 3 var arrayElts = getElementByAttr(document,"name","le_nom"); équivaut à var arrayElts = document.getElementsByName("le_nom");
Code:

1 2 3 var arrayElts = getElementByAttr(document,"className","ma_classe")[0]; équivaudrait à une fonction qui aurait pu s appeler getElementsByClassName var arrayElts = document.getElementsByClassName("ma_classe");
dans ces exemples on part de l'objet document, maintenant ce que propose ma fonction c'est de partir d'un noeud plus localisé pour que le parcours du DOM soit plus court. de plus on peut faire une recherche sur n'importe quel attribut des objets.

29/09/2008, 11h40
19cmos83

en gros ta méthode permet donc de faire une recherche générique de composant sur page web par critère et de les stocker dans un tableau.

:king:

Si c'est le cas et pour finir :

peux-tu mettre un 'tit exemple (cas d'utilisation) : avec coté html et appelle de la méthode jscript ?

Merci.

bon... ma fonction d'origine avait une grosse lacune que mes tests succincts n'avaient pas montrés (pas encore testé beaucoup...) --> il fallait que les éléments recherchés soient enfants directs de l'élément de départ. mais je viens de corriger.

donc ça nous remonte TOUS les éléments ayant la propriété attr avec la valeur value qui sont dans le noeud e qu'ils soient enfants directs ou non (parcours de toute l'arborescence sous le noeud de départ)

Citation:

Envoyé par 19cmos83

en gros ta méthode permet donc de faire une recherche générique de composant sur page web par critère et de les stocker dans un tableau.

exactement

Citation:

peux-tu mettre un 'tit exemple (cas d'utilisation) : avec coté html et appelle de la méthode jscript ?

absolument
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <html> <body> <div id="div_toto"> <div id="div_id" class="div_class" name="div_name" bazooka="fatal">j'ai mis du texte dans ma div, c'est trop fun!</div> </div> <script> function getElementByAttr(e,attr,value) { var tab = []; if (e.getAttribute && e.getAttribute(attr)==value) tab.push(e); var n = e.firstChild; if (n==null) return tab; do { tab = tab.concat(getElementByAttr(n,attr,value)); }while((n = n.nextSibling)!=null) return tab; } var toto_div = getElementByAttr(document,"id","div_toto")[0]; var msg = "texte de la div imbriquée :"; msg += "\n------- avec l'id -------\n" + getElementByAttr(toto_div,"id","div_id")[0].innerHTML; msg += "\n------- avec la classe -------\n" + getElementByAttr(toto_div,"className","div_class")[0].innerHTML; msg += "\n------- avec le nom -------\n" + getElementByAttr(toto_div,"name","div_name")[0].innerHTML; msg += "\n------- avec le bazooka^^ -------\n" + getElementByAttr(toto_div,"bazooka","fatal")[0].innerHTML; alert(msg); </script> </body> </html>

29/09/2008, 13h42
bigboomshakala

au fait, en terme de rapidité c'est beaucoup plus efficace d'utiliser un getElementById que ma fonction (par exemple) sur une petite page. genre sur une page avec 2 div imbriquée comme dans l'exemple et en bouclant 10000 fois :
getElementById => 0.2s
ma fonction => 1.4s

mais sur une page plus lourde ma fonction peut-être plus efficace si le noeud sur lequel on se place ne grossit pas car le temps est constant dans ce cas là tandis que le getElementById se dégrade.