Làm cách nào để ghi nhật ký một phần tử HTML dưới dạng một đối tượng JavaScript?

90

Sử dụng Google Chrome, nếu bạn console.loglà một đối tượng, nó cho phép bạn kiểm tra thành phần trong bảng điều khiển. Ví dụ:

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

Bản in Objectnày có thể được kiểm tra bằng cách nhấp vào các mũi tên bên cạnh nó. Tuy nhiên, nếu tôi cố gắng ghi lại một HTMLElement:

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

Điều này sẽ in ra <html></html>mà không thể kiểm tra bằng cách nhấp vào mũi tên bên cạnh nó. Nếu tôi muốn xem đối tượng JavaScript (với các phương thức và trường của nó) thay vì chỉ DOM của phần tử, tôi sẽ làm như thế nào?

— Ben Flynn
nguồn

164

Sử dụng 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

Nếu bạn đã ở trong bảng điều khiển, bạn có thể chỉ cần nhập dirthay vì console.dir:

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

Để chỉ cần liệt kê các tên thuộc tính khác nhau (không có giá trị), bạn có thể sử dụng Object.keys:

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

Mặc dù không có console.keys()phương thức công khai , nếu bạn đã ở trong bảng điều khiển, bạn chỉ có thể nhập:

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

Tuy nhiên, điều này sẽ không hoạt động bên ngoài cửa sổ bảng điều khiển.

— Mathias Bynens
nguồn

Khi tôi sử dụng console.dir () trực tiếp trong bảng điều khiển, nó hoạt động. Nhưng nếu tôi viết nó trong tệp .js thực của mình trong VS Code, bảng điều khiển dành cho nhà phát triển chrome chỉ ghi lại tên của tệp mà nó đã được ghi vào đó và số dòng. Tình cờ biết tại sao không?

— Maiya

27

thử đi:

console.dir(element)

Tham khảo
[Video] Paul Irish về việc trở thành một người dùng thành thạo bảng điều khiển.

— Ross
nguồn

+1 Tôi luôn sử dụng [[element]]để tạo một mảng để Chrome buộc phải hiển thị nó dưới dạng một đối tượng ... Cảm ơn!

— pimvdb

Câu trả lời thẳng thắn tuyệt vời. Loại 'lâu đời nhất' xuất hiện từ tóc này đến tóc kia, do đó chấp nhận được, nhưng cảm ơn rất nhiều!

— Ben Flynn

Không vấn đề gì. Tôi không bận tâm câu trả lời được chấp nhận, nhưng câu trả lời được chấp nhận sẽ là câu trả lời hữu ích nhất cho người khác sau này.

— Ross

1

Trình duyệt chỉ in phần html, bạn có thể đặt phần tử trong một đối tượng để xem cấu trúc mái vòm.

console.log({element})

— Navid Shad
nguồn