X

Здравствуйте, гость ( Вход | Регистрация )

Скрыть объявления

Объявления

querySelectorAll, описание метода и примеры  
 Saveliy
сообщение 28.4.2016, 23:04
Сообщение #226103


Special

Группа: Главные администраторы

Сообщений: 13256
Спасибо сказали: 2025 раз

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>
  Пользователя нет на форуме
 
Ответить
3 чел. читают эту тему (гостей: 3, скрытых пользователей: 0)
Пользователей: 0
Режим отображения: ·


  Сейчас: 28.3.2024, 12:10