Jak mogę zarejestrować element HTML jako obiekt JavaScript?

Question 1

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ć?

Question 2

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.

Question 3

Spróbuj tego:

console.dir(element)

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

Question 4

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

console.log({element})

Answer 1

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ć?

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5