[DOM] Javascript getElement--> Class

**Pymento** · 27/09/2008, 16h26

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**bigboomshakala** · 27/09/2008, 20h18

oh my god, heureux membre que voil� ! j'ai la fonction qui r�soudra tout tes probl�mes

(euh... ouais non je viens de me taper du mousseux 1/2 sec...)

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

�a retourne une collection d'�l�ment

**19cmos83** · 29/09/2008, 11h08

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

**bigboomshakala** · 29/09/2008, 11h25

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

**19cmos83** · 29/09/2008, 11h40

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.

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.

**bigboomshakala** · 29/09/2008, 12h24

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)

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

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

absolument

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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>

**bigboomshakala** · 29/09/2008, 13h42

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.

[DOM] Javascript getElement--> Class

JavaScript

Discussions similaires

Partager

Partager