Трассировка стека DOM находит все объекты DOM и выводит их список

Question

Есть ли инструмент / утилита, которую я могу подключить к браузеру, который может буквально сканировать все объекты на данной странице и выплевывать читаемый стек элементов? Или есть способ, который я могу даже сделать с JQuery или что-то еще?

Что я хочу иметь или сделать, так это найти буквально все элементы между тегами body и перечислить их, группируя их, где это возможно. Таким образом, я могу создать документ для своей команды и отслеживать, что и где, и т. Д. В будущем, когда нам нужно вернуться к материалу.

Answer 1

Инструменты разработчика, встроенные в большинство браузеров, покажут вам весь DOM в его текущем состоянии.Вы также можете в реальном времени редактировать DOM (как структуру, так и CSS).

Несколько других полезных деталей:

В Chrome (и я считаю, также Firebug) вы можете нажать на элемент вDOM (поэтому он выделен), а затем в представлении консоли все, что вы выбрали, может быть достигнуто с помощью '$ 0'.Они также включают в себя красивую функцию copy (), которая помещает этот DOM-текст в буфер обмена, готовый для вставки в текстовый редактор:

1. В представлении «Элементы» щелкните элемент (например, tag).

2. Перейдите в консоль

   copy($0)
   

3. Откройте текстовый редактор и вставьте.

См. Также:

print($0)

http://code.google.com/chrome/devtools/docs/console.html

Answer 2

Firebug, панель инструментов Firefox, панель инструментов IE (F12), инструменты Chrome Dev (снова F12 ...), есть множество инструментов инспектора DOM (или уже встроенных в браузер)

Answer 3

Если вам нужен только список всех элементов на странице (и их дочерних элементов до одного уровня), попробуйте это:

$("body").find("*").each(function(){
    document.write( this.nodeName.toLowerCase() + "<br>" )
    if( $(this).children().length > 0 ){
        $(this).children().each(function(){
            document.write( "<ul>" );
            document.write( "<li>" + this.nodeName.toLowerCase() + "</li>" );
            document.write( "</ul>" );
        }); 
    }
});

Пример .

Однако, этот ответ предоставляет гораздо лучший метод и перечисляет всех потомков элемента.

Answer 4

В большинстве браузеров есть инструменты для разработчиков.Нажмите F12 в IE и Chrome, но не в Firefox.