Разница между querySelector и getElementsBy
querySelector (рекомендуется)
В современном стандарте (ES 5) стало возможно использовать методы querySelector()
и querySelectorAll()
, которые ищут элементы по правилам CSS.
document.querySelectorAll(".block"); // выборка по классам
document.querySelectorAll("article"); // выборка тегов <article>
document.querySelectorAll("ul a"); // выборка ссылок в теге <ul>
Метод querySelector()
выбирает только первый найденный элемент, а метод querySelectorAll()
выбирает все указанные элементы.
getElementsBy
Методы, такие как getElementsByTagName()
, getElementsByClassName()
и другие, выбирает только определённый тип элементов (например только по тегам или классам), но их не рекомендуется использовать, т.к. они не сохраняют результат выборки.
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] (элемент в переменной не удаляется)
Поддержать автора
Все статьи создаются и поддерживаются одним человеком,
если вам нравится контент, вы можете поддержать автора сайта