Методы querySelector() и querySelectorAll() находят элементы по строке CSS-селектора. Первый возвращает один Element или null; второй — статический NodeList, который может быть пустым.
Выбирайте метод по нужному результату: один элемент или набор. Для известного идентификатора также подходит getElementById. Нельзя гарантировать преимущество скорости для любого селектора и любой страницы: сначала важны точность выборки и ясность кода.
Первоначальная статья сравнивала поддержку в Firefox 3.1, IE8 и Safari 3.1. Это исторические версии. В современном браузере проверяйте поддержку конкретного нужного селектора, а не переносите ограничения IE8 на весь текущий API.
Метод querySelector()
Этот метод относится как к объектам «Document», так и к «Element». Это позволяет вам запрашивать либо всю цепочку элементов всего документа, либо какую-либо ее часть в поиске нужного вам элемента.
Он принимает в качестве аргумента параметра любой CSS-селектор (IE: "#mydiv img") и возвращает первый совпавший элемент (если их несколько) или null если нет совпадений. Например:
document.querySelector('#myheader') //возвращает элемент с ID="myheader"
document.querySelector('p.description') //возвращает элемент P с class="description"
document.querySelector('#content img:nth-of-type(1)') //возвращает первой изображение, содержащее "#content"
document.querySelector('#myform input[type="radio"]:checked') //выбирает отмеченный пункт из "#myform"
document.querySelector('#biography, #gallery') //вовращает или элемент "#biography" или "#gallery", в зависимости от того, какой из них был найден первым в списке
Обратите внимание на последний пример — вы можете передавать несколько CSS-селекторов, разделяя их запятой («,»). Запятая играет роль логического «или», которое позволяет querySelector() возвратить первый элемент из дерева документов, который совпадает с одним из введенных CSS-селекторов.
Небольшая демонстрация
Нижеописанный HTML-код создает 2 вложенных DIV с изменяющимся цветом фона внутреннего DIV при наведении курсора мыши на внешний DIV.
Пример показывает использование querySelector() одновременно в виде метода «Document» и «Element»:
<div id="outerdiv" style="padding:50px; width:100px; height:100px; border:1px solid black">
<div id="innerdiv" style="width:100%; height:100%; border:1px solid black; background:silver;"></div>
</div>
<script type="text/javascript">
if (document.querySelector){
var outerdiv=document.querySelector('#outerdiv')
outerdiv.onmouseover=function(){
this.querySelector('#innerdiv').style.background="yellow"
}
outerdiv.onmouseout=function(){
this.querySelector('#innerdiv').style.background="silver"
}
}
</script>Метод querySelectorAll()
querySelectorAll() возвращает статический список совпавших элементов в порядке документа. Его состав не обновляется автоматически после добавления или удаления узлов; сами узлы продолжают изменяться. Свойство length сообщает число элементов. Например, document.querySelectorAll(".missing").length равно нулю, если совпадений нет.
document.querySelectorAll('.mygroup'); //вовзращает все элементы с class="mygroup";
document.querySelectorAll('option[selected="selected"]'); //возвращает каждый выбранный по умолчанию пункт меню
document.querySelectorAll('#mytable tr>td:nth-of-type(1)'); //возвращает первый элемент каждой строки таблицы "mytable";
document.querySelectorAll('#biography, #gallery'); //возвращает и элементы "#biography" и "#gallery"Время для демострации!
Давайте используем querySelectorAll() для быстрого определния выставленных чекбоксов:
<form id="myform" onSubmit="return false">
<b>Your hobbies:</b><input name="hobbies" type="checkbox" value="movies" />Movies <input name="hobbies" type="checkbox" value="sports" />Sports <input name="hobbies" type="checkbox" value="reading" />Reading <input name="hobbies" type="checkbox" value="sleeping" />Sleeping
<br />
<input type="submit" />
</form>
<script type="text/javascript">
if (document.querySelector){
document.querySelector('#myform').onsubmit=function(){
var checkedhobbies=this.querySelectorAll('input[name="hobbies"]:checked');
for (var i=0; i<checkedhobbies.length; i++){
alert(checkedhobbies[i].value);
}
return false
}
}
</script>Ограничения IE8
В IE8 есть несколько ограничений, которых нужно придерживаться используя querySelector() и querySelectorAll():
- Ваш документ должен соответствовать стандартному режиму IE8, чтобы эти 2 метода работали. Документ становится нестандартным, если он имеет не четкий тип, или настроен для работы со стандартом IE7 с помощью мета-тега:
<meta http-equiv="X-UA-Compatible" content="IE=7" />.
Некорректный селектор
Оба метода ожидают корректную строку селектора; синтаксическая ошибка вызывает SyntaxError, а не пустой результат. Отличайте эту ошибку от отсутствия совпадений. Значение идентификатора не всегда является готовым CSS-селектором: для подстановки такого значения используйте CSS.escape.
Источники: MDN: querySelector, querySelectorAll.