Pobieranie elementu DOM w JavaScript

Teraz nauczymy się pobierać elementy DOM strony, aby w przyszłości wykonywać z nimi jakieś manipulacje.

Załóżmy, że mamy pewien przycisk:

html<input id="button" type="submit">

Pobierzmy referencję do tego przycisku do zmiennej. Aby to zrobić, należy użyć metody querySelector specjalnego obiektu document. Ta metoda przyjmuje jako parametr selektor CSS i zwraca referencję do znalezionego za pomocą tego selektora elementu.

Nasz przycisk ma atrybut id o wartości button. Oznacza to, że możemy znaleźć ten przycisk za pomocą selektora #button. A zatem, znajdźmy nasz przycisk i zapiszmy referencję do niego w zmiennej:

javascriptlet button = document.querySelector('#button');
console.log(button);

html<p id="elem1">1</p>
<p id="elem2">2</p>
<p id="elem3">3</p>