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

Выбрать элементы можно через методы querySelector() и querySelectorAll().

document.querySelectorAll(".block");  // выборка по классам
document.querySelectorAll("article"); // выборка тегов <article>
document.querySelectorAll("ul a");    // выборка ссылок в теге <ul>

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

Данные методы появились в стандарте ES 5.

Если надо выбрать элемент по атрибуту «id», то вместо querySelector() можно использовать getElementById().

document.getElementById("elem"); // выборка по атрибуту "id"

Метод getElementById() работает немного быстрее, т.к. сразу ищет элемент по атрибуту «id».

Также в целях оптимизации можно искать элементы только внутри указанного объекта.

let form = document.querySelector("#form");
form.querySelectorAll("input"); // ищет теги <input> только внтури формы

На примере выше происходит поиск тегов <input> только внутри формы, вместо того, чтобы искать по всей странице.

Причём сама форма сохранена в переменную «form», этим самым код не будет каждый раз искать форму также по всей странице.

Если в querySelector() будет введено неверное значение CSS, то JavaScript вернёт ошибку «Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '!@' is not a valid selector».

Данные, которые возвращает querySelectorAll() называется «NodeList».

getElementsBy (устаревшие)

Методы ниже являются устаревшими, и их не рекомендуется использовать:

• getElementsByTagName()
• getElementsByClassName()
• getElementsByName()

Данные методы использовались до появления querySelector().

Об этом также упоминается в спецификации WHATWG (цитата ниже).

«HTMLCollection — это исторический артефакт, от которого мы не можем избавиться в сети. Хотя разработчики, конечно, могут продолжать его использовать, новые разработчики стандартов API не должны его использовать»

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

let articles1 = document.getElementsByTagName('article');
let articles2 = document.querySelectorAll('article');

articles1; // [article]
articles2; // [article]

// тег <article> удалён

articles1; // []
articles2; // [article]

При этом метод getElementById() сохраняет результат выборки в переменной, если сам элемент будет удалён на странице.

let article = document.getElementById("article");

article; // [article]

// тег <article> удалён

article; // [article] (элемент в переменной не удаляется)