Comment obtenir un élément par nom de classe ?

Question

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

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

J'ai essayé ce qui suit pour obtenir l'élément par classe :

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

Mais cela a abouti à une erreur :

getElementByClass is not function

Comment obtenir un élément par sa classe ?

Answer 1

Le nom de la fonction DOM est en fait getElementsByClassName pas getElementByClassName En effet, plusieurs éléments de la page peuvent avoir la même classe : Elements .

La valeur de retour sera une instance de NodeList, ou un sur-ensemble de l'instance de NodeList. NodeList (FF, par exemple, renvoie une instance de HTMLCollection ). En tout cas, 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 besoin de l'objet de retour en tant que tableau, vous pouvez le faire facilement, grâce à sa propriété magique de longueur :

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

Comme yckart Proposition de querySelector('.foo') y querySelectorAll('.foo') seraient toutefois préférables, car ils sont effectivement mieux supportés (93,99 % contre 87,24 %), selon caniuse.com :

• querySelector(all)
• getElementsByClassName
• Ne pas utiliser w3schools pour apprendre quelque chose
• Se référer au MDN pour des informations précises

Answer 2

Une autre option consiste à utiliser querySelector('.foo') o querySelectorAll('.foo') qui ont un support de navigateur plus large que getElementsByClassName .

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

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

Answer 3

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

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

document.getElementsByClassName('class_name')[0]

UPDATE

Maintenant, vous pouvez utiliser :

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

o document.querySelectorAll(".class_name") pour obtenir une NodeList d'éléments avec l'attribut class_name classe css (une liste de noeuds vide sera renvoyée si aucun des éléments de la page ne possède ce nom de classe).

Answer 4

Vous pouvez utiliser

getElementsByClassName

Supposons que vous ayez des éléments et que vous leur appliquiez le nom de classe 'test', vous obtiendrez des éléments comme les suivants

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

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

Lire la suite