существует множество полезных методов. я постараюсь перечислить некоторые из наиболее часто используемых.

1–)document.getElementById

он приносит элемент с атрибутом «id». независимо от того, где это

<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // get the element
  let elem = document.getElementById('elem');

  // make its background red
  elem.style.background = 'red';
</script>

нет :
1-) идентификатор должен быть уникальным. может быть только один элемент с указанным
2-) getElementById вызывается только для объекта документа

2-) querySelectorAll или q uerySelector

пока самым универсальным методом является q uerySelectorAll. используется для извлечения всех элементов, подпадающих под критерии

<ul>
  <li>The</li>
  <li>test</li>
</ul>
<ul>
  <li>has</li>
  <li>passed</li>
</ul>
<script>
  let elements = document.querySelectorAll('ul > li:last-child');

  for (let elem of elements) {
    alert(elem.innerHTML); // "test", "passed"
  }
</script>

Этот метод действительно мощный, потому что можно использовать любой селектор CSS.

Также поддерживаются селекторы CSS, такие как :hover и :active. Например, document.querySelectorAll(':hover') вернет коллекцию с элементами, над которыми сейчас находится указатель (в порядке вложенности: от самого внешнего <html> к самому вложенному).

3-) getElementsBy*

1-) getElementsByTagName = elem.getElementsByTagName(tag) ищет элементы с заданным тегом и возвращает их коллекцию. Параметр tag также может быть звездочкой "*" для «любых тегов».

2-) getElementsByClassName = elem.getElementsByClassName(className) возвращает элементы с заданным классом CSS.

3-)getElementsByName =document.getElementsByName(name) возвращает элементы с заданным атрибутом name для всего документа. Используется очень редко.

<form name="my-form">
  <div class="article">Article</div>
  <div class="long article">Long article</div>
</form>

<script>
  // find by name attribute
  let form = document.getElementsByName('my-form')[0];

  // find by class inside the form
  let articles = form.getElementsByClassName('article');
  alert(articles.length); // 2, found two elements with class "article"
</script>

Все методы "getElementsBy*" возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и «автообновляются» при его изменении.

В приведенном ниже примере есть два скрипта.

  1. Первый создает ссылку на коллекцию <div>. На данный момент его длина составляет 1.
  2. Второй скрипт запускается после того, как браузер встречает еще один <div>, поэтому его длина равна 2.

Напротив, querySelectorAll возвращает статическую коллекцию. Это как фиксированный массив элементов.