Простейший dom
Построим, для начала, дерево DOM для следующего документа.
1 |
<html> |
|
2 |
<head> |
|
3 |
<title>Заголовок</title> |
|
4 |
</head> |
|
5 |
<body> |
|
6 |
Прекрасный документ |
|
7 |
</body> |
|
8 |
</html> |
|
Самый внешний тег - <html>, поэтому дерево начинает расти от него.
Внутри <html> находятся два узла: <head> и <body> - они становятся дочерними узлами для <html>.
Теги образуют узлы-элементы (element node). Текст представлен текстовыми узлами (text node). И то и другое - равноправные узлы дерева DOM.
Корневым элементом иерархии является html. У него есть два потомка. Первый -head, второй - body. И так далее, каждый вложенный тег является потомком тега выше:
На этом рисунке синим цветом обозначены элементы-узлы, черным - текстовые элементы.
Дерево образовано за счет синих элементов-узлов - тегов HTML.
А вот так выглядит дерево, если изобразить его прямо на HTML-страничке:
Кстати, дерево на этом рисунке не учитывает текст, состоящий из одних пробельных символов. Например, такой текстовый узел должен идти сразу после <ol>. DOM, не содержащий таких "пустых" узлов, называют "нормализованным".
Метод up() Данный метод применяется для поиска элементов по структуре дерева DOM документа. Если вызвать функцию up() без каких-либо параметров, то в качестве результата будет возвращен родительский элемент по отношению к текущему. Если вам нужно извлечь не прямого родителя объекта, а какой-либо из элементов более высокого уровня, стоит в качестве аргумента функции задать индекс нужного элемента. К примеру, up(0) извлечет родительский элемент, up(1) - вернет элемент на уровень выше родительского, up(2)– на 2 уровня выше родительского. В качестве альтернативы можно использовать CSS метки, чтобы получить доступ к нужному объекту. В этом случае, функция вернет первый элемент соответствующий критериям выборки. Например, у вас есть картинка внутри таблицы (<table><tr><td> <img /> </td></tr></table>), можно воспользоваться imgElt.up('table') для извлечения объекта таблицы, в то время как вызов функции без параметра imgElt.up()привел бы нас к элементу <td>. Допускается совместное использование числовых индексов и CSS меток. К примеру, если существует изображение внутри двух div-тегов и стоит задача получить доступ к внешнему div’у. Такую задачку можно решить вызвав up() со следующими параметрами: imgElt.up('div', 1). Если бы вместо 1 был указан 0, то функция вернула бы внутренний div, т.е. ближайший к изображению.
Метод down() Назначение метода down() противоположно up(). Данный метод производит поиск потомков текущего элемента. Т.е. поиск производится не вверх по дереву DOM, а вниз – вглубь. Как и метод up(), этот метод может быть вызван без параметров, с параметром в качестве числового индекса или CSS метки, либо в комбинированном режиме. Принцип работы метода down() очень похож на метод select(), рассмотренный ранее, за тем лишь исключением, что down() возвращает только один единственный объект. Потому, стоит отметить, что someElt.down('.foo') более эффективный способ получить доступ к единичному объекту, нежели someElt.select('.foo')[0]. Важно знать, что если попытаться обратиться через метод select() к какому-то конкретному элементу и так окажется, что он не существует,select() вернет ошибку. При использовании для этих целей метода down(), подобное не произойдет.
Методы next() и previous() Для работы с элементами одного уровня используются методы next() и previous(). Суть их работы вытекает из названия – next() осуществляет переход к следующему элементу по отношению к текущему, в то время как previous() возвращает элемент, который находится перед текущим. Оба метода поддерживают те же аргументы, что и методы up() и down().
Совместное использование Поскольку вызов любой из функции up(), down(), next() или previous() приводит к обращению к одному элементу, допускается использование цепочечных вызовов этих методов. Например, если выполнить такой код elt.down().up(), то в результате получим текущий элемент elt, но данное утверждение неверно для такого вызова: elt.up().down(). В этом случае результатом не всегда может оказаться текущий элемент; все зависит от порядка следования элементов включенных в объект elt. Аналогично, elt.next().previous() так же вернет elt. Существуют примеры и более полезного применения цепочечных вызовов. Например, если вам необходимо найти все элементы одного уровня можно воспользоваться elt.next(someSelector) для извлечения всех предшествующих элементов текущему, а конструкциейelt.previous(someSelector) найдем все последующие элементы этого уровня. Стоит отметить, что следует аккуратно подходить к вопросу использования цепочечных команд. Так как довольно часто, при не продуманном написании кода, одна из функций цепочки может приводить к возникновению ошибки. Как правило, в тех случаях, когда происходит обращение к несуществующему элементу.