[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