Давайте подготовимся к использованию dojo.query на примере простой страницы с разметкой простой структуры, содержащей сценарий. Для краткости в текст примера включена только одна сцена:
<div id="introduction" class="intro">
<p>
Once upon a time, long ago...
</p>
</div>
<div id="scene1" class="scene">...</div>
<div id="scene2" class="scene">
<p>
At the table in the <span class="place">kitchen</span>, there were
three bowls of <span class="food">porridge</span>. <span сlass="person"
>Goldilocks</span> was hungry. She tasted the <span class="food">porridge</
span> from the first bowl.
</p>
<p>
"This <span class="food">porridge</span> is too hot!" she exclaimed.
</p>
<p>
So, she tasted the <span class="food">porridge</span> from
the second bowl.
</p>
<p>
"This <span class="food">porridge</span> is too cold," she said
</p>
<p>
So, she tasted the last bowl of <span class="food">porridge</span>.
</p>
<p>
"Ahhh, this <span class="food">porridge</span> is just right,"
she said happily and she ate it all up.
</p>
</div>
<div id="scene3" class="scene">...</div>
Как было продемонстрировано в более раннем примере, функция getElementsByTagName возвращает массив узлов DOM заданного типа. Чтобы получить тот же результат с помощью dojo.query, ей нужно просто передать строку с именем тега в качестве аргумента. Например, чтобы получить список всех элементов
div в странице, следует использовать dojo.query("div"), как показано ниже:
dojo.query("div")
//Вернет [div#introduction.intro, div#scene1.scene, div#scene2.scene,
//div#scene3.scene]
Обратите внимание: если потребуется отобрать только дочерние узлы определенного элемента, а не все узлы DOM страницы, можно определить второй аргумент, который интерпретируется функцией как корневой узел дерева. Например, чтобы отобрать только элементы параграфов только в элементе с идентификатором scene2, во втором аргументе нужно передать либо сам узел, либо значение атрибута id этого узла, как показано ниже:
dojo.query("p", "scene2")
//Вернет [p, p, p, p, p, p]
Поиск элементов страницы определенного класса также выполняется очень просто, достаточно лишь указать имя требуемого класса с использованием синтаксиса CSS, то есть в соответствии со спецификацией это означает, что имя класса должно предваряться символом точки. Например, можно было бы отобрать все элементы, к которым в настоящий момент применен класс food, как показано ниже:
dojo.query(".food")
//Вернет [span.food, span.food, span.food, span.food, span.food,
//span.food, span.food]
Выполнить поиск по имени тега и по имени класса очень просто: достаточно лишь объединить две конструкции. Представьте ситуацию, когда желательно отыскать элементы span, к которым применен класс place:
dojo.query("span.place")
//Вернет [span.place]
Возможность поиска элементов по имени класса удобна сама по себе, но иногда возникает потребность отобрать элементы сразу по нескольким классам. К счастью, эту задачу можно решить, используя все тот же простой подход, который уже наверняка полюбился вам. Например, можно отобрать все элементы, к которым применены классы food и place, как показано ниже:
dojo.query(".food,.place")
//Вернет [span.food, span.food, span.food, span.food, span.food, span.food,
//span.food, span.place]
В качестве последнего примера гибкости функции query рассмотрим случай поиска потомков определенного узла. Предположим, что в данный момент нам требуется отыскать все узлы с классом food, которые вложены в узел scene2:
dojo.query("#scene2 .food")
//Вернет [span.food, span.food, span.food, span.food, span.food, span.food,
//span.food]
Обратите внимание: в данном случае при использовании оператора был бы получен пустой список, потому что в этой странице нет узлов с классом food, которые являлись бы непосредственными потомками узла scene2:
dojo.query("#scene2 > .food")
//Вернет []
Несмотря на всю краткость этого примера, важно отметить, что макси мально возможное сужение области поиска за счет выбора как можно более конкретного критерия может оказывать существенное влияние на производительность.