web-dev-qa-db-fra.com

Comment obtenir élément par nom de classe?

En utilisant JavaScript, nous pouvons obtenir élément par ID en utilisant la syntaxe suivante:

var x=document.getElementById("by_id");

J'ai essayé de suivre pour obtenir élément par classe:

var y=document.getElementByClass("by_class");

Mais cela a entraîné une erreur:

getElementByClass is not function

Comment puis-je obtenir un élément par sa classe?

javascriptdom
146
TDHM

Le nom de la fonction DOM est en fait getElementsByClassName, pas getElementByClassName, simplement parce que plusieurs éléments de la page peuvent avoir la même classe, d'où: Elements.

La valeur renvoyée sera une instance de NodeList ou un sur-ensemble de NodeList (FF, par exemple, renvoie une instance de HTMLCollection). Quoi qu'il en soit: la valeur de retour est un objet de type tableau:

var y = document.getElementsByClassName('foo');
var aNode = y[0];

Si, pour une raison quelconque, vous avez besoin de l'objet de retour sous forme de tableau, vous pouvez le faire facilement, en raison de sa propriété de longueur magique:

var arrFromList = Array.prototype.slice.call(y);
//or as per AntonB's comment:
var arrFromList = [].slice.call(y);

Comme yckart suggéré querySelector('.foo') et querySelectorAll('.foo') serait préférable, bien qu'ils soient, en effet, mieux pris en charge (93,99% contre 87,24%), selon caniuse.com:

212
Elias Van Ootegem

Une autre option consiste à utiliser querySelector('.foo') ou querySelectorAll('.foo'), qui prend en charge un navigateur plus étendu que getElementsByClassName.

http://caniuse.com/#feat=queryselector

http://caniuse.com/#feat=getelementsbyclassname

47
yckart

Vous devez utiliser la document.getElementsByClassName('class_name');

et n'oubliez pas que la valeur renvoyée est un tableau d'éléments, donc si vous voulez utiliser le premier, utilisez:

document.getElementsByClassName('class_name')[0]

UPDATE

Maintenant vous pouvez utiliser:

document.querySelector(".class_name") pour obtenir le premier élément avec la classe class_name CSS (null sera renvoyé si aucun des éléments de la page ne porte ce nom de classe)

ou document.querySelectorAll(".class_name") pour obtenir une NodeList d'éléments avec la classe class_name css (une NodeList vide sera renvoyée si non, les éléments de la page ayant ce nom de classe).

19
udidu

vous pouvez utiliser

getElementsByClassName

supposons que vous ayez des éléments et que vous appliquiez un nom de classe 'test', vous pouvez donc obtenir des éléments comme suit

var tests = document.getElementsByClassName('test');

elle retourne une instance NodeList ou son sur-ensemble: HTMLCollection (FF).

en savoir plus

6
Talha