Met JavaScript kunnen we element per id verkrijgen met de volgende syntaxis:
var x=document.getElementById("by_id");
Ik heb het volgende geprobeerd om element per klasse te krijgen:
var y=document.getElementByClass("by_class");
Maar het resulteerde in een fout:
getElementByClass is not function
Hoe kan ik een element per klasse krijgen?
Antwoord 1, autoriteit 100%
De naam van de DOM-functie is eigenlijk getElementsByClassName, niet getElementByClassName, simpelweg omdat meer dan één element op de pagina dezelfde klasse kan hebben, vandaar: Elements.
De geretourneerde waarde hiervan is een instantie van NodeList, of een superset van de NodeList(FF, retourneert bijvoorbeeld een instantie van HTMLCollection). In ieder geval: de geretourneerde waarde is een array-achtig object:
var y = document.getElementsByClassName('foo');
var aNode = y[0];
Als je om de een of andere reden het return-object nodigals een array hebt, kun je dat gemakkelijk doen, vanwege de eigenschap magic length:
var arrFromList = Array.prototype.slice.call(y);
//or as per AntonB's comment:
var arrFromList = [].slice.call(y);
Als yckartsuggereerde querySelector('.foo')en querySelectorAll('.foo')zou echter de voorkeur hebben, omdat ze inderdaad beter worden ondersteund (93,99% versus 87,24%), volgens caniuse.com:
- querySelector(alle)
- getElementsByClassName
- Gebruik w3schools niet om iets te leren
- Raadpleeg MDN voor nauwkeurige informatie
Antwoord 2, autoriteit 21%
Een andere optie is om querySelector('.foo')of querySelectorAll('.foo')te gebruiken die een bredere browserondersteuning hebben dan getElementsByClassName.
http://caniuse.com/#feat=queryselector
http://caniuse.com/#feat=getelementsbyclassname
Antwoord 3, autoriteit 10%
U moet de document.getElementsByClassName('class_name');
gebruiken
en vergeet niet dat de geretourneerde waarde een array van elementen is, dus als je de eerste wilt, gebruik dan:
document.getElementsByClassName('class_name')[0]
UPDATE
Nu kunt u het volgende gebruiken:
document.querySelector(".class_name")om het eerste element met de CSS-klasse class_nameop te halen (nullwordt geretourneerd indien niet van de elementen op de pagina heeft deze klassenaam)
of document.querySelectorAll(".class_name")om een NodeList van elementen te krijgen met de css-klasse class_name(lege NodeList wordt geretourneerd als geen van de elementen op de pagina heeft deze klassenaam).
Antwoord 4, autoriteit 3%
u kunt gebruiken
getElementsByClassName
stel dat je een aantal elementen hebt en een klassenaam ‘test’ hebt toegepast, dus je kunt elementen krijgen zoals de volgende
var tests = document.getElementsByClassName('test');
het retourneert een instantie NodeList, of zijn superset: HTMLCollection(FF).