Jak mogę zarejestrować element HTML jako obiekt JavaScript?

90

Używając przeglądarki Google Chrome, jeśli jesteś console.logobiektem, możesz sprawdzić element w konsoli. Na przykład:

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

To wydrukuje, Objectktóre można sprawdzić, klikając strzałki obok niego. Jeśli jednak spróbuję zalogować HTMLElement:

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

Jest to wydruk, <html></html>którego nie można sprawdzić, klikając znajdujące się obok strzałki. Jeśli chcę zobaczyć obiekt JavaScript (z jego metodami i polami) zamiast tylko DOM elementu, jak mam to zrobić?

— Ben Flynn
źródło

164

Zastosowanie 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

Jeśli jesteś już w konsoli, możesz po prostu wpisać dirzamiast console.dir:

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

Aby po prostu wymienić różne nazwy właściwości (bez wartości), możesz użyć Object.keys:

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

Nawet jeśli nie ma console.keys()metody publicznej , jeśli jesteś już w konsoli, możesz po prostu wpisać:

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

To nie zadziała jednak poza oknem konsoli.

— Mathias Bynens
źródło

Kiedy używam console.dir () bezpośrednio w konsoli, to działa. Ale jeśli zapiszę go w swoim rzeczywistym pliku .js w VS Code, chrome dev console rejestruje tylko nazwę pliku, w którym został zapisany, i numer wiersza. Czy wiesz, dlaczego?

— Maiya

27

Spróbuj tego:

console.dir(element)

Zobacz
[Wideo] Paul Irisha na temat zostania zaawansowanym użytkownikiem konsoli.

— Ross
źródło

+1 Zawsze używałem [[element]]do tworzenia tablicy, aby Chrome był zmuszony wyświetlić ją jako obiekt ... Dzięki!

— pimvdb

Świetna, prosta odpowiedź. Przez „najstarszy” gatunek był we włosach po drugim, stąd akceptuję, ale wielkie dzięki!

— Ben Flynn,

Bez problemów. Nie mam nic przeciwko temu, która zostanie zaakceptowana, ale zaakceptowana odpowiedź powinna być później najbardziej pomocna dla innych.

— Ross

1

Przeglądarka drukuje tylko część html, możesz umieścić element w obiekcie, aby zobaczyć strukturę kopuły.

console.log({element})

— Navid Shad
źródło