Разница между «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] (элемент в переменной не удаляется)