И document.querySelectorAll("selector")
и document.body.getElementsByClassName("selector")
возвращают массив найденных элементов по заданному селектору. Какая между ними разница тогда?
2 ответа
Например вот такая вот:
document.querySelectorAll(".div a") // все ссылки в блоке с классом div
document.getElementsByClassName(".div a") // не найдет ничего
Суть в том, что querySelectorAll
понимает валидные css-селекторы ( от сюда и название ), поэтому можете исхитряться, как только умеете
document.querySelectorAll("ul li:first") // первый li в списке
document.querySelectorAll("#id") // поиск по id
document.querySelectorAll("input[name=login]") // и такое умеет
UPD
В комментарии добавили, что тип возвращаемого массива отличается:
document.querySelectorAll() // NodeList
document.getElementsByClass() // HTMLCollection
-
А. То есть существуют такие методы, как getElementsByTagName(), getElementsByClassName(), getElementsById(). И все они для отдельных элементов. А querySelectorAll() может это все комбинировать?– user20535816 мар 2016 в 12:25
-
@Orange_Dream, грубо говоря да + доп ф-ционал, за счет использования всей мощи
css-селекторов
, например, вложенность элементов и тд– ThisMan16 мар 2016 в 12:26 -
Или вот такая : Document.querySelectorAll() - возвращает объект типа NodeList. Document.getElementsByClassName() -возвращает HTMLCollection дочерних элементов.Те можете получить элементы еще и по имени 16 мар 2016 в 12:28
-
Я разобрался. Спасибо)– user20535816 мар 2016 в 12:34
Во-первых, querySelectorAll
принимает селектор, а getElementsByClassName
- имя класса.
Во-вторых, querySelectorAll
возвращает снимок - найденные элементы, а getElementsByClassName
- живую коллекцию, осуществляя поиск при обращении к ней.
var pre = document.querySelector("pre");
var a = document.querySelectorAll(".d"), b = document.getElementsByClassName("d");
pre.textContent += "Before: " + a.length + " and " + b.length + "\n";
document.querySelector(".u").classList.add("d");
pre.textContent += "After: " + a.length + " and " + b.length + "\n";
<div class=d></div>
<div class=d></div>
<div class=d></div>
<div class=d></div>
<div class=u></div>
<pre></pre>