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

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

Skaizer, 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». Это сделано для того, чтобы веб-мастера не могли определить ссылки на страницы, посещенные пользователем.

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

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

RSS-лента комментариев к этой статье | Обратная ссылка (trackback link)

code is art