console.log（variable）; VS console.log（[variable]）; /一个提供信息，另一个不提供？

Question

In Chrome, this gives the HTML tag:

var image = document.getElementsById('image');

console.log(image);

In Chrome, this gives all kinds of info such as clientWidth etc:

console.log([image]);

Why is this?

Answer 1

console.log is a finicky method. It's implemented however the browser team decides, since there's no formal spec ( last I checked ).

In the first .log(image) Chrome.console seems to run .toString (or equivalent) method on your HTMLElement and gives you the string output.

In the second .log([image]) Chrome.console outputs the contents of the array as indexed objects/primitives. It won't try to process the children of the array the same as a first-level argument to log , so it gives you the actual HTMLElement Object, not the string output.

Answer 2

console.log(image);

This logs the direct reference to the HTMLELement in your document, showing the actual <img> (or any other element) tag.

console.log([image]);

Here you pass an Array as argument, which will log an array. The array simply shows you the Object of the HTMLElement .