Cztery sposoby wybierania elementów

DOM: znajdowanie i zmiana elementów - JavaScript na stronach WWW (HTML/CSS/JS)

Ten sam element można znaleźć na kilka sposobów. `getElementById` szuka po `id` (najszybciej, jeden element). `querySelector` przyjmuje selektor CSS i zwraca PIERWSZY pasujący element, a `querySelectorAll` wszystkie (listę, po której da się iść pętlą). Starsze `getElementsByClassName` też zwraca listę. Każdy sposób oznacza tu inny element, a selektory są takie same jak w CSS.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Wybieranie</title>
  <style>
    body { font-family: sans-serif; max-width: 36em; line-height: 1.4; }
    input, select, button, textarea { font: inherit; padding: 0.2em 0.4em; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #94a3b8; padding: 0.2em 0.6em; }
  </style>
</head>
<body>
  <h1 id="main">Nagłówek</h1>
  <ul>
    <li class="fruit">jabłko</li>
    <li class="fruit">gruszka</li>
    <li class="fruit">śliwka</li>
  </ul>
  <p class="note">Pierwsza notatka</p>
  <p class="note">Druga notatka</p>
  <script>
    document.getElementById('main').textContent = 'getElementById: po id';
    document.querySelector('.note').textContent = 'querySelector: pierwszy .note';
    document.querySelectorAll('.fruit').forEach(li => {
      li.textContent = 'querySelectorAll: ' + li.textContent;
    });
    const notes = document.getElementsByClassName('note');
    notes[1].textContent = 'getElementsByClassName: element nr 1 z ' + notes.length;
    console.log(document.querySelector('ul li:last-child').textContent);
  </script>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu JavaScript na stronach WWW·Zaloguj się, aby zapisać postęp na koncie.