Автор: Saveliy 28.4.2016, 23:04
querySelectorAll()
Описание
elementList = baseElement.querySelectorAll(selectors);
querySelectorAll() может быть вызвана для любого элемента (baseElement).
elementList - Будет содержать NodeList, если элементы были найдены.
selectors - строка, содержащая, через запятую, один или более CSS селектор.
Строка указанная в качестве текста селектора, должна соответствовать синтаксису CSS
Помните, что возвращённый в качестве результата список NodeList не рекомендуется для использования в циклах for...in или for each...in в качестве массива, т.к., это не массив в «традиционном» понятии Javascript, а объект типа NodeList, который, хоть и схож по свойствам с массивом, но не является таковым в полной мере (не поддерживает все методы, доступные массиву), так что будьте осторожны.
Не следует использовать конструкции for...in или for each...in для перечисления элементов списка. Эти способы также перечислят
и свойства length и item, что приведёт к логическим ошибкам в случае, если скрипт ожидает только объекты element. Также
for..in может перечислять свойства в любом порядке.
Элементы в NodeList, можно обработать следующим образом:
CODE
for (var i = 0; i < myNodeList.length; ++i) {
var item = myNodeList[i]; // Вызов myNodeList.item(i) необязателен в JavaScript
}
Стандартное поведение. При указании имени классов
нужно ставить впереди имени класса точку.
Если указываете несколько классов, то поиск производится по вариантам:
1. По принципу логического ИЛИ (OR), для этого необходимо указывать классы через запятую.
2. По принципу логического И (AND), для этого указываем классы слитно без запятых и пробелов.
Подробности в примерах ниже.
Полезные ссылкиhttps://developer.mozilla.org/ru/docs/Web/API/Element/querySelectorAll
https://developer.mozilla.org/ru/docs/Web/API/Document/querySelector
https://developer.mozilla.org/ru/docs/Web/API/NodeList
http://froland.ru/samodel/lsn_js33.html
ПримерыСкопируйте данный код в HTML файл
CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>querySelectorAll</title>
</head>
<body>
<div id="example">
<p id="p1" class="aaa bbb"/>
<p id="p2" class="aaa ccc"/>
<p id="p3" class="bbb ccc"/>
<p id="p4" class="ccc"/>
</div>
<script type="text/javascript">
/*
Пример 1
Вернет все элементы, которые содержат указанный класс.
Вернет P1 и P2
*/
var elems = document.getElementById("example").querySelectorAll(".aaa");
/*
Пример 2
Логическое ИЛИ (OR).
Вернет элементы, которые содержат любой из перечисленных классов.
Наличие пробела после запятой не играет роли.
Вернет P1, P2 и P3.
*/
// Для теста раскомментируйте строку ниже.
//var elems = document.getElementById("example").querySelectorAll(".aaa, .bbb");
/*
Пример 3
Логическое И (AND).
Вернет элементы, которые содержат одновременно два класса.
Наличие пробела не допускается.
Порядок указания классов неважен. ".ccc.bbb" и ".bbb.ccc" вернет одно и тоже.
Вернет P3.
*/
// Для теста раскомментируйте строку ниже.
//var elems = document.getElementById("example").querySelectorAll(".ccc.bbb");
/*
Пример 4
Ничего не вернет.
*/
// Для теста раскомментируйте строку ниже.
//var elems = document.getElementById("example").querySelectorAll(".bbb .ccc ");
console.log(' ');
for( var i=0; i<elems.length; i++ )
{
if( elems[i].id != "" && elems[i].id !== undefined)
{
console.log(elems[i].id);
}
}
</script>
</body>
</html>