getElementsByClassName

Lekcja 5 z 13 w kursie Metody DOM w JavaScript w Coddy.

Funkcja getElementsByClassName() zwraca tablicę wszystkich elementów z pasującym atrybutem class, co jest przydatne przy wybieraniu wielu elementów o tym samym stylu lub zachowaniu. Na przykład:

const elements = document.getElementsByClassName("className");

Powyższy kod pobiera elementy z klasą className i zapisuje je w zmiennej o nazwie elements.

Musimy iterować po tej zmiennej, aby zmienić właściwości wszystkich podobnych elementów, na przykład:

for (const element of elements) {
	className.style.color = "blue";
	className.style.fontWeight = "bolder";
}

Wyzwanie

Łatwy

Otrzymujesz kod HTML zawierający akapity z nazwą klasy highlight.

Używając wyłącznie JavaScript, zmień kolor i grubość czcionki tekstu:

Pobierz elementy za pomocą funkcji getElementsByClassName().
Przejdź przez pobraną zmienną zawierającą elementy za pomocą pętli for.
Zmień wartość color na “orange”, a wartość fontWeight na “bold”, używając właściwości style, dla każdego elementu tablicy.

Aby zobaczyć zmiany, odśwież stronę internetową:

Spróbuj swoich sił

<!DOCTYPE html>
<html>
    <body>
        <p class="highlight">Text 1</p>
        <p class="highlight">Text 2</p>
        <script src="script.js"></script>
    </body>
</html>

Wszystkie lekcje w sekcji Metody DOM w JavaScript

1Wprowadzenie

Wprowadzenie Model obiektowy dokumentu

2Metody DOM I

getElementById Modyfikowanie stylu elementugetElementsByClassNameIterowanie i manipulowanie getElementsByTagName querySelector

3Metody DOM II

querySelectorAll addEventListener innerHTML createElement i appendChild Przełączanie classList

Poćwicz samodzielnie: Edytor online Web