DOM (Document Object Model) является сущностью, открывающей дверь в мир веб-разработки. Один из важнейших аспектов DOM — это доступ к элементам, которые составляют веб-страницу. В этой статье мы рассмотрим основные методы доступа к элементам DOM и познакомимся с примерами кода.

Навигация по статье

Метод getElementById

Один из самых простых способов получить доступ к элементу DOM — это использовать метод getElementById(). Он позволяет получить ссылку на элемент, используя его уникальный идентификатор (ID). Давайте посмотрим на пример:

<!DOCTYPE html>
<html>
  <body>
    <h1 id="myHeading">Привет, мир!</h1>
    <script>
      var heading = document.getElementById("myHeading");
      console.log(heading.textContent); // Выводит "Привет, мир!"
    </script>
  </body>
</html>

Метод getElementsByClassName

Если у вас есть группа элементов с одним и тем же классом, вы можете использовать метод getElementsByClassName() для получения ссылок на все эти элементы. Давайте рассмотрим пример:

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li class="item">Пункт 1</li>
      <li class="item">Пункт 2</li>
      <li class="item">Пункт 3</li>
    </ul>
    <script>
      var items = document.getElementsByClassName("item");
      for (var i = 0; i < items.length; i++) {
        console.log(items[i].textContent); // Выводит текст каждого пункта списка
      }
    </script>
  </body>
</html>

Метод querySelector

Метод querySelector() позволяет использовать CSS-селекторы для получения ссылки на элементы DOM. Это предоставляет большую гибкость при выборе элементов. Вот пример:

<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <p class="text">Пример текста</p>
    </div>
    <script>
      var textElement = document.querySelector(".container .text");
      console.log(textElement.textContent); // Выводит "Пример текста"
    </script>
  </body>
</html>

Метод querySelectorAll

Метод querySelectorAll() работает аналогично querySelector(), но возвращает все соответствующие элементы, а не только первый найденный. Пример:

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li class="item">Пункт 1</li>
      <li class="item">Пункт 2</li>
      <li class="item">Пункт 3</li>
    </ul>
    <script>
      var items = document.querySelectorAll(".item");
      for (var i = 0; i < items.length; i++) {
        console.log(items[i].textContent); // Выводит текст каждого пункта списка
      }
    </script>
  </body>
</html>

Метод Array.from

Метод Array.from() предоставляет нам способ преобразования коллекции элементов DOM, возвращаемой методом querySelectorAll(), в массив JavaScript. Это позволяет использовать все методы и свойства массивов для работы с элементами.

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li>Пункт 1</li>
      <li>Пункт 2</li>
      <li>Пункт 3</li>
    </ul>
    <script>
      var items = document.querySelectorAll("li");
      var itemsArray = Array.from(items);

      // Теперь itemsArray является обычным массивом
      itemsArray.forEach(function (item) {
        console.log(item.textContent); // Выводит текст каждого пункта списка
      });
    </script>
  </body>
</html>