Робота з DOM з консолі

Досліджувати та змінювати DOM можна за допомогою інструментів розробки, вбудованих у браузер. Подивимося кошти на прикладі Google Chrome.

Доступ до елемента

Відкрийте документ losi.html і в інструментах розробника перейдіть у вкладку Elements.

Щоб проаналізувати будь-який елемент:

  • Виберіть його у вкладці Elements.
  • …Або внизу вкладки Elements є лупа, при натисканні на яку можна вибрати елемент кліком.
  • …Або, що зазвичай найзручніше, просто клацніть на потрібному місці на сторінці правою кнопкою та виберіть у меню «Перевірити Елемент».

консолі

Праворуч буде різна інформація про елемент:

Computed Style Підсумкові властивості CSS елемента, які він придбав у результаті всього каскаду стилів, включаючи зовнішні CSS-файли та атрибут style . Style Каскад стилів, застосований до елемента. Кожне стильове правило окремо, тут можна змінювати стилі кліком. Metrics Розмір елемента. … І ще деякі рідше використовувані вкладки, які стануть зрозумілими з вивчення DOM.

З іншого боку, в Elements можна побачити CSS-псевдоелементи, такі як :: before, :: after. Це також зроблено для зручності, у DOM їх не існує.

Вибрані елементи $0 $1…

У вкладці Elements відкрийте консоль натисканням Esc (або перейдіть на вкладку Console).

Останній елемент, вибраний у вкладці Elements, доступний у консолі як $0 , попередній – $1 тощо.

Запустіть на елементі команду, яка робить його червоним:

У браузері це може виглядати приблизно так:

Elements

Є й зворотна стежка. Будь-який елемент із JS-змінної можна подивитися у вкладці Elements, для цього:

  1. Виведіть цю змінну в консолі,наприклад за допомогою console.log.
  2. Клацніть на виведенні в консолі правою кнопкою миші.
  3. Виберіть пункт меню.

робота

Таким чином можна легко переміщатися з Elements в консоль і назад.

Ще методи консолі

Для пошуку елементів у консолі є два спеціальні методи:

  • $$("div.my") – шукає всі елементи в DOM за цим CSS-селектором.
  • $("div.my") – шукає перший елемент DOM по даному CSS-селектору.

Більш повна документація за методами консолі доступна на сторінках Console API Reference для Chrome та Command Line API для Firebug, а також на firebug.ru.

Інші браузери реалізують схожий функціонал, освоївши Chrome / Firebug, ви легко з ними розберетеся.