HTML要素をJavaScriptオブジェクトとしてログに記録するにはどうすればよいですか？

90

Google Chromeを使用するとconsole.log、オブジェクトの場合、コンソールで要素を検査できます。例えば：

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

これは、Object横にある矢印をクリックして検査できるものを印刷します。ただし、HTMLElementをログに記録しようとすると、次のようになります。

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

<html></html>横の矢印をクリックしても検査できないものが印刷されます。要素のDOMだけでなくJavaScriptオブジェクト（そのメソッドとフィールドを含む）を表示したい場合は、どうすればよいですか？

— ベンフリン
ソース

164

使用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

すでにコンソール内にいる場合は、次のdir代わりに入力するだけですconsole.dir。

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

さまざまなプロパティ名（値なし）を単純に一覧表示するには、次を使用できますObject.keys。

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

パブリックconsole.keys()メソッドはありませんが、すでにコンソール内にいる場合は、次のように入力できます。

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

ただし、これはコンソールウィンドウの外では機能しません。

— マティアス・ビネンス
ソース

console.dir（）をコンソールで直接使用すると、機能します。しかし、VS Codeで実際の.jsファイルに書き込むと、chrome dev consoleは、書き込まれたファイルの名前と行番号をログに記録するだけです。たまたまその理由を知っていますか？

— 米谷

27

これを試して：

console.dir(element)

参考
[ビデオ]コンソールのパワーユーザーになることについてのPaulIrish

— ロス
ソース

+1私はいつも[[element]]配列を作成するために使用していたので、Chromeはそれをオブジェクトとして表示することを余儀なくされました...ありがとう！

— pimvdb 2012年

素直な答えです。「最も古い」種類が次々と髪の毛になってきたので、受け入れますが、どうもありがとう！

— ベン・フリン

問題はありません。どちらが受け入れられるかは気にしませんが、受け入れられた答えは後で他の人に最も役立つものになるはずです。

— ロス

1

ブラウザはhtml部分のみを印刷し、要素をオブジェクトに配置してドーム構造を確認できます。

console.log({element})

— Navid Shad
ソース