Подготовка к использованию dojo.query

Давайте подготовимся к использованию dojo.query на примере простой страницы с разметкой простой структуры, содержащей сценарий. Для краткости в текст примера включена только одна сцена:


Once upon a time, long ago...



...


At the table in the kitchen, there were
three bowls of porridge. >Goldilocks was hungry. She tasted the porridge span> from the first bowl.



"This porridge is too hot!" she exclaimed.



So, she tasted the porridge from
the second bowl.



"This porridge is too cold," she said



So, she tasted the last bowl of porridge.



"Ahhh, this porridge is just right,"
she said happily and she ate it all up.



...


Как было продемонстрировано в более раннем примере, функция 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")
//Вернет []

Несмотря на всю краткость этого примера, важно отметить, что макси мально возможное сужение области поиска за счет выбора как можно более конкретного критерия может оказывать существенное влияние на производительность..



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
NodeList
Анимация
Аргументы в стиле «функции в виде строк»
Длинный и нестабильный способ
Методы, напоминающие методы массивов

Вернуться в раздел: Dojo / Манипулирование узлами