web-dev-qa-db-ja.com

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

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オブジェクト（およびメソッドとフィールド）を表示したい場合、どうすればよいですか？

javascriptgoogle-chromegoogle-closure-librarydeveloper-tools
71
Ben Flynn

_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
_

すでにコンソール内にいる場合は、_console.dir_の代わりに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
_

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

134
Mathias Bynens

これを試して：

console.dir(element)

参照
[ビデオ]コンソールパワーユーザーになるためのポールアイリッシュ。

22
Ross