Bagaimana cara membuat log elemen HTML sebagai objek JavaScript?

90

Menggunakan Google Chrome, jika Anda console.logadalah objek, ini memungkinkan Anda memeriksa elemen di konsol. Sebagai contoh:

var a = { "foo" : "bar", "whiz" : "bang" };
console.log(a);

Hasil cetak ini Objectyang dapat diperiksa dengan mengklik panah di sebelahnya. Namun jika saya mencoba untuk mencatat HTMLElement:

var b = goog.dom.query('html')[0];
console.log(b);

Hasil cetak <html></html>ini tidak dapat diperiksa dengan mengklik panah di sebelahnya. Jika saya ingin melihat objek JavaScript (dengan metode dan kolomnya) daripada hanya DOM elemen, bagaimana cara melakukannya?

javascript google-chrome google-closure-library developer-tools Ben Flynn
sumber

Jawaban:

164

Penggunaan console.dir:

var element = document.documentElement; // or any other element
console.log(element); // logs the expandable <html>…</html>
console.dir(element); // logs the element’s properties and values

Jika Anda sudah berada di dalam konsol, Anda cukup mengetik diralih-alih console.dir:

dir(element); // logs the element’s properties and values

Untuk membuat daftar nama properti yang berbeda (tanpa nilai), Anda dapat menggunakan Object.keys:

Object.keys(element); // logs the element’s property names

Meskipun tidak ada console.keys()metode publik , jika Anda sudah berada di dalam konsol, Anda cukup memasukkan:

keys(element); // logs the element’s property names

Ini tidak akan berfungsi di luar jendela konsol.

Mathias Bynens
sumber
Saat saya menggunakan console.dir () secara langsung di konsol, ini berfungsi. Tetapi jika saya menulisnya dalam file .js saya yang sebenarnya di VS Code, konsol dev chrome hanya mencatat nama file yang tertulis di dalamnya dan nomor barisnya. Apakah kebetulan tahu mengapa?
Maiya
27

coba ini:

console.dir(element)

Referensi
[Video] Paul Irish tentang menjadi pengguna kekuatan konsol.

Ross
sumber
+1 Saya selalu menggunakan [[element]]untuk membuat larik sehingga Chrome terpaksa menampilkannya sebagai objek ... Terima kasih!
pimvdb
Jawaban langsung yang bagus. Jenis 'tertua' datang setelah yang lain, oleh karena itu diterima, tetapi banyak terima kasih!
Ben Flynn
Tidak ada masalah. Saya tidak keberatan mana yang diterima, tetapi jawaban yang diterima harus menjadi yang paling membantu orang lain nanti.
Ross
1

Browser hanya mencetak bagian html, Anda dapat meletakkan elemen dalam objek untuk melihat struktur kubah.

console.log({element})
Navid Shad
sumber