5

誰/何がの内容をに書く方法を決めるobjectのconsoleですか？

オブジェクトリテラルの折りたたみ可能な表現を取得する場合もあれば、単にDOM構造を出力する場合もあります。

このHTMLを考えると：

<div class="container">
  <video src="low.mp4"></video>
  <video src="high.mp4"></video>
  <video src="mega.mp4"></video>
</div>

console（WebKit / Firebug）を次のようにヒットした場合：

> var firstVideo = document.querySelector('video')

その後：

> firstVideo

それは戻ります：

<video src=​"low.mp4">​&lt;/video>​

一方、次のような別のオブジェクトがあるとします。

var guitar = { name:'Stratocaster', strings:6 }

コンソールに次のことを要求します。

> guitar

私たちに与える：

コンソール出力

私は何度もこの行動に出くわしましたが、通常は他の方法で好奇心をかき消しました。今はちょっと苦痛なので、もう少し調べてみます。問題のオブジェクトが要素DOMであり、検査官が私たちを助けているだけだからですか？

（私の例は（DOMオブジェクトとリテラルを比較して）少し奇妙だと思いますが、問題を説明するための最も簡単で迅速な方法です。）

前の質問の情報を使用して、問題の各オブジェクトに関するもう少し情報を得ることができます。

video.constructor戻り値：

HTMLVideoElementConstructor

一方：guitar.constructor戻り値：

function Object() {
  [native code]
}

なぜそれが重要なのですか？

次のような状況：

> firstVideo.parentElement

この要素を見て、そのプロパティを調べることはできません。単純に、各要素を個別に追跡する必要がある場合（つまり、firstVideo.parentElement.offsetHeight）、これは非常に残念です。

それで、私の理解のギャップはどこにありますか？実際に何が起こっているのですか？

4

2 に答える 2

6

結果がDOM要素の場合、コンソールのログは異なります。それらは、そのプロパティをリストする代わりに、要素のソースHTML（またはXML）を出力します。
-DOMquerySelector要素を返すため、コンソールに要素のソースが表示されます。
-DOMquerySelectorAll要素の配列を返します。これは、通常どおり配列を表示する必要があります。

を使用すると、いつでも出力リストにオブジェクトのプロパティを強制できますdir(object)。

FirebugコマンドラインAPIを確認できます。

于 2011-07-27T14:31:51.687 に答える
2

domノード（querySelectorが要素を返すための状況）をコンソールに記録すると、文字列表現がより明確になり、ログメッセージにカーソルを合わせたり、ログメッセージを取得したりすると、ノードを強調表示するなどの標準機能にアクセスできるようになります。あなたがそれをクリックするならば、ドキュメントへの場所。他のすべてのオブジェクトと同様にDOMノードをログに記録してそのプロパティを検査する場合は、を使用できますconsole.dir(node)。

HTMLVideoElementConstructor他のケースでは、単純なオブジェクトのコンストラクターとdomノードのコンストラクターをログに記録すると、関数をログに記録し、コンソールがその名前を出力するため、結果は同じになります（少なくともFirebugでは）。Object単純なオブジェクトの場合。

于 2011-07-27T14:31:19.180 に答える