Помощник
Здравствуйте, гость ( Вход | Регистрация )
![]()
Сообщение
#226103
|
|
![]() Special Группа: Главные администраторы Сообщений: 13264 Спасибо сказали: 2030 раз ![]() |
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> |
![]() ![]() |
|
Ответить |
![]() |
|
4.9.2024, 12:04 Посл. ответ от Ilyamiass |
|
![]() |
|
3.1.2024, 5:58 Посл. ответ от Александр |
|
![]() |
|
25.7.2022, 7:21 Посл. ответ от Fedorov |
|
![]() |
|
16.3.2022, 12:28 Посл. ответ от Saveliy |
|
![]() |
|
22.3.2015, 3:08 Посл. ответ от Saveliy |
![]() |
|
4.9.2024, 12:04 Посл. ответ от Ilyamiass |
|
![]() |
|
4.9.2024, 9:29 Посл. ответ от ypiter |
|
![]() |
|
3.9.2024, 18:20 Посл. ответ от Nikol |
|
![]() |
|
2.9.2024, 15:29 Посл. ответ от Максим |
|
![]() |
|
2.9.2024, 13:08 Посл. ответ от Reanimotor |
Сейчас: 8.9.2024, 4:20 |