Обход DOM
Поиск элементов по идентификатору, типу элемента и имени класса очень полезен, но что, если вы хотите найти элемент по его положению в дереве DOM? Другими словами, у вас есть заданный элемент, и вы хотите найти его родителя, одного из его дочерних элементов и его предыдущий или следующий одноуровневый узел. Например, возьмем следующий фрагментарный HTML-код:
Листинг 1: HTML-фрагмент (таблица)
<таблица>
<голова>
<тр>
<th>Имя</th>
<th>Адрес электронной почты</th>
<th>Действия</th>
</tr>
</тхед>
<тело>
<tr id="row-001">
<td>Джо Леннон</td>
<td>[email protected]</td>
<td><a href="#">Изменить</a>
<a href="#">Удалить</a></td>
</tr>
<tr id="row-002">
<td>Джилл Мак Суини</td>
<td>[email protected]</td>
<td><a href="#">Изменить</a>
<a href="#">Удалить</a></td>
</tr>
</tbody>
</таблица>
В листинге 1 отступы используются для обозначения местоположения каждого узла элемента в дереве DOM. В этом примере элемент таблицы является корневым элементом и имеет два дочерних узла: thead и tbody. У элемента thead есть дочерний узел tr, а у tr три дочерних узла — все элементы th. Элемент tbody имеет два дочерних узла tr, и каждый узел tr имеет три дочерних узла. Третий узел в каждой строке выше также содержит дочерние узлы, оба из которых являются двумя тегами ссылок.
Как вы знаете, вы можете легко выбрать элемент по идентификатору, используя функцию выбора платформы JavaScript . В этом примере есть два элемента с идентификаторами: элементы tr с идентификаторами row-001 и row-002. Чтобы выбрать первый tr с помощью библиотеки Prototype, вы можете использовать следующий код:
вар theRow = $('row-001');
В предыдущей главе вы также узнали об использовании селекторов для извлечения элементов на основе их типа или класса. В этом примере вы можете использовать следующий синтаксис, чтобы получить все элементы td.
вар allCells = $$('td');
Основная проблема при изменении кода заключается в том, что он возвращает каждый элемент td. Но что, если вы просто хотите получить все элементы td из tr с идентификатором row-001? Именно здесь в игру вступают функции обхода DOM. Во-первых, давайте воспользуемся прототипом, чтобы выбрать всех дочерних элементов tr с идентификатором row-001.
вар firstRowCells = theRow.childElements();
Это вернет массив всех дочерних элементов переменной Row (tr, который вы изначально установили с идентификатором row-001).
Далее предположим, что вы хотите получить только первый дочерний элемент строки. В данном случае это элемент td, содержащий текст «Джо Леннон». Для этого используйте следующий оператор:
вар firstRowFirstCell = theRow.down();
Так просто! Это конкретное использование эквивалентно:
вар firstRowFirstCell = theRow.childElements()[0];
Еще это можно выразить так:
вар firstRowFirstCell = theRow.down(0);
Индексы JavaScript начинаются с нуля, поэтому приведенный выше оператор по сути сообщает JavaScript о выборе первого дочернего элемента. Чтобы выбрать второй дочерний элемент (ячейку, содержащую адрес электронной почты [email protected] ), вы должны использовать:
вар firstRowSecondCell = theRow.down(1);
Альтернативно вы можете просматривать DOM между одноуровневыми узлами. В этом примере вторая ячейка является следующей одноуровневой по отношению к первой ячейке. Поэтому вы можете использовать следующее утверждение:
вар firstRowSecondCell = firstRowFirstCell.next();
Точно так же, как работает функция down(), выбор третьей ячейки можно использовать следующим образом.
вар firstRowThirdCell = firstRowFirstCell.next(1);
Помимо использования индексов для поиска определенных узлов, библиотека Prototype также может использовать синтаксис селектора CSS. В листинге 1 мы ищем вторую ссылку (ссылку «удалить»), содержащую сведения о Джилл Мак Суини.
вар SecondRowSecondLink = $('row-002').down('a', 1);
В этом примере используйте функцию $, чтобы найти строку с идентификатором row-002, пройдя вниз до второго потомка элемента (привязки).
Некоторые платформы также допускают функцию последовательного обхода, что означает, что вы можете соединять команды обхода друг с другом. В приведенном выше примере другое выражение библиотеки Prototype выглядит следующим образом:
вар SecondRowSecondLink = $('row-002').down('a').next();
Взгляните на следующий пример:
var domTraversal = $('row-001').down().up().next().previous();
Как видите, последовательное соединение позволяет соединить несколько операторов обхода DOM. Фактически, приведенный выше пример фактически заканчивается выбором элемента tr с идентификатором строки-001, поэтому шлейфовая цепочка возвращается к тому месту, где она началась.
Адрес перепечатки: http://www.denisdeng.com/?p=708 .
Исходный адрес: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html.