W3C CSS API селекторы — методы querySelector() и querySelectorAll()

VitaliyRodnenko, 03.11.2008

Методы querySelector() и querySelectorAll() позволяют принимают в качестве аргументов CSS-селектор и возвращают найденные элементы в виде элементов DOM.

Разница между этими методами заключается лишь в количестве возвращаемых элементов — первый найденный или все найденные в документе. Кроме того, что они более универсальны, чем getElementById() и getElementByTagName(), наши 2 метода отличаются невероятной скоростью поиска, так как они используют преимущества тех же механизмов, которые использует браузер для идентификациии элементов стиля во время просмотра CSS страницы.

Если говорить о совместимости с браузерами, то querySelector() и querySelectorAll() поддерживаются в Firefox 3.1+, IE8+ (только в стандартном режиме IE8), и Safari 3.1+.

Метод 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()

Этот метод возвращает не только один элемент, совпадающий с CSS-селектором, но и все остальные, в виде «staticNodeList». «StaticNodeList» — это статичный набор элементов, на которые не влияют последующие изменения, происходящие в дереве документов, например удаление одного из элементов. Метод имеет аттрибут «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" />.
  • IE8 не поддерживает дополнительный параметр «NSResolver», используемый в querySelector() или querySelectorAll() для определения префиксов имен в XHTML документах.
  • По соображениям безопасности, IE8 не будет возвращать элементы, полученные с использованием CSS-селекторов «:visited» или «:link». Это сделано для того, чтобы веб-мастера не могли определить ссылки на страницы, посещенные пользователем.

Подписаться на обновления блога

Вам понравился наш блог, хотите следить за обновлениями? Подпишитесь на RSS рассылку или рассылку по электронной почте. Так же вы можете следить за нами в Twitter.

Категории: CSS, JavaScript | Комментировать

Комментарии

  1. Denis / 24.07.2013 в 23:52

    Отличная статья! Только вот у меня почему то не получается достать значение «src» у «frame»! Был бы признателен, если бы Вы объяснили мне, что не так?))
    Код HTML:

    Код JS:
    onload = function(){
    ss = document.querySelector(‘frameset frame[name="frame_footer"]‘);
    ur = ss.src;
    console.log(ur);
    }

  2. Кирилл / 19.06.2016 в 14:20

    Сегодня закончил перевод официальной спецификации «Selectors API Level 1″ от W3C:
    http://topolyan.com/w3c/selectors-api-ru.html

Оставить комментарий

480×60
480×60