jQuery: обход объектной модели документа онлайн урок.


Обход DOM - это процесс перехода от выбранного элемента DOM к другому. Он позволяет "путешествовать" по объектам и выполнять над ними определенные действия.

Следует заметить, что эта тема является одной из самых важных в вопросе оптимизации скорости выполнения скрипта JS. Это вызвано тем, что существует несколько методов обхода по объектной модели документа, и каждый из них имеет свои преимущества и недостатки.

Переход по DOM осуществляется горизонтально и вертикально. Эти направления могут комбинироваться.

Вертикальный переход по DOM означает перебор дочерних родительских элементов. Горизонтальный переход осуществляется между элементами одного уровня (например по наследникам одного и того же родителя).

Для уточнения целевого элемента(ов) используются функции фильтрации.


Рассмотрим основные методы обхода элементов DOM:

  • Вертикально

    • Вверх по дереву
      • parent() - находит непосредственного родителя
      • parents() - находит всех родителей

    • Вниз по дереву
      • children() - находит всех непосредственных потомков
      • find() - находит потомков на всех уровнях ниже

  • Горизонтально
    • siblings() - находит всех соседних потомков своего родителя
    • next(), nextAll() - находит одного или всех потомков своего родителя, следующих за текущим - т.е. следующих
    • prev(), prevAll() - находит одного или всех потомков своего родителя, предшествующих текущему - т.е. предыдущих

  • Фильтрация
    • first() - возвращает первый найденный элемент
    • last() - возвращает последний найденный элемент
    • eq( n ) - возвращает элемент с индексом n

Список не является исчерпывающим. Мы указали самые основные, на наш взгляд, функции.

Рассмотрим несколько примеров по применению этих методов. Пусть дан фрагмент кода веб-страницы (тело).



Тогда, к примеру, код

var element = $('.user-menu').parent();
console.log(element);

выведет в консоль данные про объект div#container, т.к. это прямой родитель элемента с классом menu.

Код

var elements= $('.user-menu').find('*');
console.log(elements);

выведет в консоль данные про коллекцию объектов ul.user-menu, li, li, li поскольку все одни являются дочерними для элемента с классом user-menu.

Код

var elements= $('.content').prevAll();
console.log(elements);

выведет в консоль данные про коллекцию объектов div.menu, div.header поскольку они являются предыдущими перед элементом с классом content потомками общего родителя. Если применить к той же коллекции метод first(), то получим первый найденный элемент в списке, т.е. div.menu

var elements= $('.content').prevAll().first();
console.log(elements);


К найденным элементам, естественно, можно применять как JS функции и методы, так и методы jQuery:

$('.content').prevAll().first().css('background', 'yellow');


Этот скрипт применяет к найденному объекту стилевое правило background: yellow.