Как мне просмотреть свой HTML DOM в firebug?

Кажется, это должно быть очень просто, но это заставило меня победить.

Я хочу иметь возможность исследовать дерево DOM (визуально) в консоли firebug так же, как я могу исследовать html-страницу. Когда я нажимаю на панель DOM (со всеми параметрами, установленными на «отображение»), я вижу свои объекты jQuery и Javascript. (Они выделены в верхней части списка), но я не вижу узлы своей страницы (например, элементы div заголовка, div нижнего колонтитула, элементы h1).

Есть и другие записи, такие как окно, документ и т. д., которые выглядят многообещающе, но, кажется, никуда меня не ведут (кроме как в цикле).

Если я выбираю элемент на панели HTML, а затем в правой части экрана выбираю DOM, он говорит, что «для этого объекта нет свойств для отображения». Мне это тоже не кажется правильным.

Что мне не хватает?


html dom dom-traversal firebug
person DatsunBing    schedule 27.06.2013    source источник
comment
В firebug используйте вкладку HTML для просмотра дерева DOM.   -  person    schedule 27.06.2013
comment
Джефф, это дает мне доступ только к информации о прототипе. Например, если я просматриваю поле выбора, я хочу знать, каково его значение в настоящее время (в DOM), а не то, что это HTMLSelectElement. Я что-то упускаю?   -  person DatsunBing    schedule 27.06.2013
comment
Может быть, вкладка DOM на правой панели даст вам необходимую информацию?   -  person    schedule 27.06.2013

Ответы (2)


arrow_upward
2
arrow_downward

Когда вы переходите на панель DOM, по умолчанию вы видите свойства window глобального объекта. Чтобы найти здесь свои HTML-узлы, вы должны выбрать document из потомков window, затем либо head, либо body, а затем на каждом уровне вы можете расширить дальше childNodes или children.

Следующее, когда вы выбираете что-то на панели HTML, вы можете щелкнуть по нему правой кнопкой мыши и выбрать «Проверить на панели DOM».

И последнее, но не менее важное: когда у вас есть элемент, скажем, textarea или input, выбранный на панели HTML, вы можете сослаться на него с помощью $0 в Firebug. Затем вы можете проверить все его свойства DOM, написав $0.value и т. д. Обратите внимание на кнопку «Показать всплывающее окно командной строки» слева от имен панелей, которая позволяет одновременно видеть консоль и панель HTML.

Кроме того, вы можете просто перейти на панель DOM и использовать кнопку Firebug «Проверить элемент», чтобы указать на странице с помощью мыши конкретный элемент, который вы хотите видеть на панели DOM.

person jakub.g    schedule 27.06.2013
comment
Я не понимаю почему, но вчера я не мог перейти от окна к документу без того, чтобы снова вернуться к окну (и попасть в петлю). Однако сегодня, кажется, все хорошо. Спасибо! - person DatsunBing; 28.06.2013

arrow_upward
2
arrow_downward

Перейдите к кнопке DOM в Firebug. В области поиска введите «document». Нажмите символ «+» и откройте его. Нажмите «body» и так далее. Все начинается с 'window'.

Намекать:

В большинстве случаев window подразумевается, поэтому вам не нужно говорить window.document.getElementById(); или даже window.onload = function(){*stuff here*/}. Однако вам нужно сказать window.onload, если вы тестируете, существует ли он. document является свойством window и имеет ряд собственных свойств и методов.

person StackSlave    schedule 27.06.2013