Выбор элементов в JavaScript

Каждая задача в программировании начинается с сбора данных, в данном случае с поиска необходимых элементов dom для последующей работы над ними. В этой статье приведены основные способы обращения к элементам.

Самые популярные способы поиска элементов:

document.querySelector() элемент
document.querySelectorAll() массив элементов

let wrap = document.querySelector(«.wrap»);
// Возможно ограничить поиск не по всему объекту document
wrap.querySelector(«.block»);

Есть и другие варианты:

document.getElementById(«идентификатор») — выбор элемента по id
document.getElementsByTagName(‘div’) — выбор тегов
document.getElementsByName(‘атрибут name’) — выбор по атрибуту name
elem.getElementsByClassName(className) — выбор элементов по классу

Относительный поиск элементов

childNodes — коллекция дочерних элементов
document.body.childNodes

firstChild — первый элемент в наборе (или elem.children[0])
lastChild — последний элемент в наборе (или elem.children[elem.children.length — 1])

previousSibling — предшествующий элемент
nextSibling — последующий элемент

parentElement – родительский элемент.
children – только дочерние элементы

Приведение коллекции к массиву

1
2

var elems = document.documentElement.childNodes;
Array.prototype.slice.call(elems);

Выбор перебор дочерних элементов для body:

1
2
3

for (var i = 0; i < document.body.children.length; i++) {
      alert( document.body.children[i] ); // DIV, UL, DIV, SCRIPT
}