11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] GetElementsByClass

Pages :
Bonjour,

Je suis à nouveau confronté à un problème avec Javascrit. La fonction getElementsByClass n'existe pas, j'en ai donc cherché des toute faites. j'en ai trouvé 3, mais à chaque fois je ne suis parvenu à l'utiliser pour mon cas.

Je me suis arrêté sur celle là :

function getElementsByClass(node,searchClass,tag) {
	var classElements = new Array();
	var els = node.getElementsByTagName(tag); // use "*" for all elements
	var elsLen = els.length;
	var pattern = new RegExp("\\b"+searchClass+"\\b");
	for (ii = 0, j = 0; ii < elsLen; ii++) {
		 if ( pattern.test(els[ii].className) ) {
		 classElements[j] = els[ii];
		 j++;
		}
	}
	return classElements;
}


Voici mon code :

function jump()
	{
		if (document.getElementsByClass('pagination_block_cur_jump').style.display != "inline")
			{
				document.getElementsByClass('pagination_block_cur_jump').style.display="inline";
				document.getElementByName('page').focus();
				
			} else {
			
				document.getElementsByClass(document, 'pagination_block_cur_jump', 'span').style.display="none";
				document.getElementByName('page').blur();
			}
	}


Voilà si vous avez une solution à m'apporter n'hésitez pas^^
Modifié par Spark (03 Nov 2007 - 14:33)
je croi que c'est normal que ca ne marche pas... car la fonction renvoi un tableau

function getElementsByClass(node,searchClass,tag) {

	[b]var classElements = new Array();[/b]

	var els = node.getElementsByTagName(tag); // use "*" for all elements

	var elsLen = els.length;

	var pattern = new RegExp("\\b"+searchClass+"\\b");

	for (ii = 0, j = 0; ii < elsLen; ii++) {

		 if ( pattern.test(els ii .className) ) {

		 classElements[j] = els ii ;

		 j++;

		}

	}

	[b]return classElements;[/b]

}


il te faut un truc du genre
 document.getlElementByClass('ta_class')[0].style.display

pour ton premier element... replacer le 0 par le 1 pour le second ....etc
ou sinon faire une boucle
Modifié par hakkou (09 Oct 2007 - 00:18)
effectivement la fonction te retourne un tableau, mais pour que cela marche il faut que tu lui passe également d'autre paramétres : le contexte, et la balise.

Dans l'ordre cela donne contexte, classe, balise (d'ailleur ce serait mieux contexte, balise, classe)

L'auteur l'a sans doute conçu ainsi pour plus d'efficacité, en effet si tu fais systématiquement des selections avec le selecteur universel * tu abuses un peu trop du cpu du visiteur (en plus je crois qu' ie5 bug avec cette technique).

Avec cette fonction tu peux donc faire soit :

var nodeClass = getElementsByClass(document,'nom_de_la_classe','*');
for (I=0;I<nodeClass.length; I++) {
     // tu peux faire ici ton action sur nodeClass[I]
	}
}

et tu selectionneras ainsi ta classe sur toute les balises sur l'ensemble du document

soit :

var nodeClass = getElementsByClass(document,'nom_de_la_classe','div');
for (I=0;I<nodeClass.length; I++) {
     // tu peux faire ici ton action sur nodeClass[I]
	}
}

et tu selectionneras ainsi ta classe sur tout les balises div du document

soit :

var nodeClass = getElementsByClass(document.getElementById('nom_dun_id'),'nom_de_la_classe','div');
for (I=0;I<nodeClass.length; I++) {
     // tu peux faire ici ton action sur nodeClass[I]
	}
}

et tu selectionneras ainsi ta classe sur toute les balises div à l'interieur d'une balise avec un id "nom_dun_id".

Bien sur la derniére solution est la plus efficace (surtout si tu fais 50 appel sur la même page).

Par contre selon les cas ta fonction n'est pas forcement trés utile car cela revient a faire: 

var nodeTag = document.getElementById('name_id').getElementsByTagName('div');
for (I=0;I<nodeTag.length; I++) {
  if (nodeTag.className == 'class_name') ) {
     // tu peux faire ici ton action sur nodeTag[I]
	}
}


Enfin si tu as beaucoup de selection à faire cela peut être interressant
Modifié par matmat (09 Oct 2007 - 03:26)
Bonjour,

Ma réponse est un peu décalé, mais aujourd'hui il faut savoir (ré)utiliser ce qui existe. Dès que l'on commence à exploiter un langage, il faut regarder un peu se qu'il se fait en matière de technologie, évolution.
Il existe un grand tas de bibilotheque javascript (comme jQuery) qui permettent de produire des codes simples à comprendre et très propres, pour un taille pas forcément très grosses (pour suivre mon exemple, la taille de jquery avoisinne les 30Ko, c pas pire qu'une grosse image...).
matmat a écrit :
if (nodeTag.className == 'class_name') )

Attention, ce code ne fonctionne pas si l'élément HTML a plusieurs classes.

Par ailleurs, l'expression régulière donnée dans la fonction choisie par Spark est incorrecte :
alert(/\bpouet\b/.test("pouet-2")); // true


<edit>Oui, en effet, jQuery serait sans doute adapté dans ce cas. Mais il faudra aussi sans doute passer par une phase d'apprentissage un peu plus poussée de JavaScript, qui semble faire défaut.
Modifié par Julien Royer (09 Oct 2007 - 09:37)
Modérateur
Salut,

Julien Royer a écrit :
Oui, en effet, jQuery serait sans doute adapté dans ce cas. Mais il faudra aussi sans doute passer par une phase d'apprentissage un peu plus poussée de JavaScript, qui semble faire défaut.
+1 Smiley smile

Le problème, ce n'est pas de se servir d'un jQuery, Mootools ou autre mais bel et bien d'oublier qu'on peut le faire sans. Lorsque survient un problème ou pour une demande particulière, c'est très utile de connaître Javascript. Smiley ravi
D'ailleurs la dernière phase serait de parser une chaine de caractère sur le modèle des selecteurs CSS, ce qui me semble une solution bien plus appropriée que de passer une multitude de paramètre à la fonction Smiley lol
Shinuza a écrit :
D'ailleurs la dernière phase serait de parser une chaine de caractère sur le modèle des selecteurs CSS, ce qui me semble une solution bien plus appropriée que de passer une multitude de paramètre à la fonction Smiley lol

Je dirais que ça dépend du besoin...
Oui et non, je dirais qu'en terme d'apprentissage ça peut être très utile. Et en terme d'utilisation, tout dépend de la richesse dynamique, par exemple pour une application il faut mieux avoir une fonction du type css selector.

Ca fait partie des fonctions helpers qui simplifie la sémantique du code.
Est ce que cela voudrait dire que la fonction serait de type :
getElementsByClass('div.class_name'),
ou
getElementsByClass('#id_name .class_name'),
ou
getElementsByClass('#id_name a.class_name'),
ou
getElementsByClass('div#id_name a.class_name') etc...?

Dans ce cas il faudrait voir comment est fait le selecteur de jQuery, ce qui doit être trés interressant
Modifié par matmat (10 Oct 2007 - 04:54)
Autant regarder de celui de prototype, c'est le plus rapide, ou mieux, regarder le code source de mozilla firefox Smiley lol

Dans l'absolu c'est pas vraiment difficile à écrire, il suffit de découper l'expression, et ensuite de trouver les élements significatifs dans le tableau.
Zut mon post est en édition depuis hier et j'ai oublié de l'envoyer, le boulet ... -_-'

Alors finalement ce n'est pas moi qui va gérer la parti JavaScript Smiley langue

Voici un élément de réponse avec le DOM 

onclick="this.parentNode.childNodes[2].style.display='block'"


this -> pointe vers l'élément courant
parentNode -> remonte sur le parent
childNodes -> liste des enfants (0, 1, 2, etc ...)

Lien relatif au Node :
http://fr.selfhtml.org/javascript/objets/node.htm

onclick="
		if (this.parentNode.childNodes[0].style.display!='block')
			{
				this.parentNode.childNodes[0].style.display='block';
				this.parentNode.childNodes[0].childNodes[2].focus();
				
			} else {
			
				this.parentNode.childNodes[0].style.display='none';
				this.parentNode.childNodes[0].childNodes[2].blur();
			}
	"

Modifié par Spark (10 Oct 2007 - 23:23)
Mais si, c'est une démonstration de code intrusif, non portable, inflexible et peu fiable!! Smiley biggrin

Ah non, aucun rapport Smiley sweatdrop
matmat a écrit :
J'avoue ne pas trop comprendre le rapport entre ce code et getElementByClass()


C'est le résultat qui compte pas la fonction.

Shinuza a écrit :
Mais si, c'est une démonstration de code intrusif, non portable, inflexible et peu fiable!! Smiley biggrin

Ah non, aucun rapport Smiley sweatdrop


Pas compris.
Spark a écrit :
C'est le résultat qui compte pas la fonction.

C'est avec ce genre de reflexion qu'on se retrouve avec des trucs :

-Intrusifs
-Non portables
-Inflexibles
-Peu fiables

Bref, inmaintenable

Je me permets de rappeler que Firefox compte les retours de lignes comme étant des childNodes, donc il suffit que le code source change pour que ton code soit cassé Smiley sweatdrop Smiley confus
Shinuza a écrit :
Je me permets de rappeler que Firefox compte les retours de lignes comme étant des childNodes, donc il suffit que le code source change pour que ton code soit cassé Smiley sweatdrop Smiley confus

Bonne remarque, en effet.
Effectivement Spark, j'ai bien vu que ce que tu souhaite c'est cacher et montrer des div, pour cela il y a 200 méthode possible, par exemple j'utilise les div numeroté ça fait: id=get_box1 pour le lien et box1 pour la boite a ouvrir, c'est simple, rapide, et j'ai rien a coder pour le mettre en place juste charger la fonction et nommer les div.

Mais la question c'est le getElementsByClass, qui n'est pas une fonction qui sert juste à ouvrir et cacher des div, mais une maniére de selectionner un ensemble d' éléments pour pouvoir ensuite effectuer n'importequelle action dessus. En effet si l'id est unique, la classe peu être appliqué à plusieurs balises. Donc l'interêt serait de la même maniére que tu assignes un style à un element lui assigner une fonction en le nommant avec un classe.

Pour revenir a nos moutons, le selecteur de jQuery utilise une expression réguliére sous forme de tableau:


var quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/;


Pas mal non? c'est complexe pour notre cas mais ça permet de savoir si on a mis un '.' un '#' ou un espace a notre selecteur et donc choisir le bon element en fonction. On voit qu'il y a également d'autres élements '>' c'est que jQuery permet d'appeler $("form > input").
Modifié par matmat (11 Oct 2007 - 19:09)
Il reste à ce stade à parcourir le tableau et à appeler les fonctions natives pour matcher les bons élements, il faut par contre implémenter la notion de pointeur, puisqu'on déscend l'arbre du DOM
Pages :
Sujet clos
Aller à