HTML5 Tutorial, czyli kurs HTML w wersji 5 ? cz. 2: getElementsByClassName

W poprzedniej części kursu (cz. 1: classList API) opisywałem nowe metody HTML5, które służyły do manipulacji tagami HTML pod kątem atrybutu class=”". Idąc za ciosem, standard HTML5 wprowadza również nowy selektor (funkcja do wyszukiwania węzłów w DOM) pozwalający wyszukiwać tagi na podstawie przypisanych klas.

Załóżmy przykładowy kod HTML:

<body>
    <div id="one" class="foo">Adam</div>
    <div id="two" class="foo bar">Ewa</div>
</body

Wykonujemy poniższy kod:

var elements = document.getElementsByClassName('foo');
var element0 = document.getElementsByClassName('foo')[0];
var element1 = document.getElementsByClassName('foo')[1];

Dostajemy w odpowiedzi kolekcję elementów, które mają przypisaną klasę foo, czyli u nas 2 elementy.

Wcześniej dostępne były tylko selektory:

getElementById( ‘myId’ )
Zwraca element (jeden) o podanym ID.

getElementsByName( ‘name’ )
Zwraca kolekcję elementów o podanej nazwie.

getElementsByTagName( ‘tagName’ )
Zwraca kolekcję elementów konkretnego typu, np. div, p, lub * dla wszystkich elementów.