[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.