Jak uzyskać element po nazwie klasy? [duplikat]

To pytanie ma już odpowiedź tutaj:

Używając JavaScript, możemy uzyskać element poprzez id używając następującej składni: 

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

I tried following to get element by class: 

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

Ale to spowodowało błąd: 

getElementByClass is not function

Jak mogę uzyskać element po jego klasie?

Author: Paul D. Waite, 2013-07-31
Source

4 answers

Nazwa funkcji DOM jest w rzeczywistości getElementsByClassName, a nie getElementByClassName, po prostu dlatego, że więcej niż jeden element na stronie może mieć tę samą klasę, stąd: Elements.

Zwracaną wartością będzie instancja NodeList lub superset NodeList (FF, na przykład zwraca instancję HTMLCollection). W każdym przypadku: zwracana wartość jest obiektem podobnym do tablicy: 

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

Jeśli z jakiegoś powodu potrzebujesz zwracanego obiektu jako tablicy, możesz to zrobić łatwo, ze względu na jego magiczną długość własność: 

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

Jak zasugerował yckart querySelector('.foo') i querySelectorAll('.foo') byłoby lepiej, chociaż, ponieważ są one rzeczywiście lepiej wspierane( 93.99% vs 87.24%), zgodnie z caniuse.com:

 173
Author: Elias Van Ootegem,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-19 09:52:28

Inną opcją jest użycie, querySelector('.foo') LUB querySelectorAll('.foo'), który ma szersze wsparcie dla przeglądarki niż getElementsByClassName.

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

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

 43
Author: yckart,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-31 09:15:21

Musisz użyć document.getElementsByClassName('class_name');

I nie zapominaj, że zwracana wartość jest tablicą elementów, więc jeśli chcesz, aby pierwsza z nich była użyta:

document.getElementsByClassName('class_name')[0]

 15
Author: udidu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-31 09:04:00

Możesz użyć 

getElementsByClassName

Załóżmy, że masz jakieś elementy i zastosowałeś nazwę klasy 'test', więc możesz uzyskać elementy jak poniżej 

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

Its zwraca instancję NodeList lub jej superset: HTMLCollection (FF).

Czytaj więcej

 5
Author: Talha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-31 09:22:59