Разница между «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()
и другие, выбирает только определённый тип элементов (например только по тегам или классам), но их не рекомендуется использовать, т.к. они не сохраняют результат выборки.
var articles1 = document.getElementsByTagName('article'); var articles2 = document.querySelectorAll('article'); articles1; // [article] articles2; // [article] // тег <article> удалён articles1; // [] articles2; // [article]
При этом метод getElementById()
сохраняет результат выборки в переменной, если сам элемент будет удалён на странице.
var article = document.getElementById("article"); article; // [article] // тег <article> удалён article; // [article] (элемент в переменной не удаляется)
Авторизуйтесь, чтобы добавлять комментарии