I want to display an object's values in chrome's console - javascript

It's something I'm missing in Chrome's console. I'm following a screencast where a javascript object is displayed in a browsable tre-like structure like this:
(arrow here) Object
When typing this for example, I'm only getting an empty array:
jQuery()

If you want to browse the elements within the jQuery object, you'll have to select something first.
$() returns an empty jQuery object.
If, on the other hand, you want to browse the methods/properties of the object created, you should use the console.dir method, which will give you a more in-depth view of your object:
console.dir(jQuery());
Here's the fiddle: http://jsfiddle.net/asYay/

The Object you are getting by typing
jQuery()
is an empty jQuery Object, which is represented by the same syntax as an empty array
[]
jQuery Objects are Array-like objects of html elements you select from the body. In your case, the selector (the first argument of the function which you would normally write into the function) is empty, so there is nothing to search for for jQuery and it returns an empty object.
If you would pass an argument with a DOM element (for example the body), it would return the body within the array
jQuery('body') //=> Array with the body html element inside
Note that HTML elements within the jQuery Object are normally not represented the same as standard objects in the Google Console. For standard objects, you will get the Object with its properties as a tree structure with an arrow before it to expand it (like the one you see in the screencast), with HTML elements, you get the DOM node, but no properties or methods to expand.
To see the difference, try this:
Display of an instance or a standard object in the Chrome console:
var object = {
hi: 'im an object',
and_i: 'am represented as a tree like structure',
i_can_haz: function() { return 'this is great, it shows all the stuff' }
};
If you type again:
object
You will get the Chrome Console Object representation.
For a HTML Object, just do this
var object = document.getElementsByTagName('body');
And if you want to access its properties and functions, use the dir method
dir(object);
You can use dir on virtually any object to access the properties
And object will be a representation of the body element. As said before, all jQuery does when selecting is putting these elements into an array, essentially.

Related

why is the elements in HTMLCollection is different from what HTMLCollection.item() returned in Chrome

I apologize if the title makes you confused. Let me explain that.
In Chrome dev tool, if I use, for example:
document.getElementsByClassName("login")
I get get an HTMLCollection which As you can see the 0-indexd property represents an typical Element object.
However, if I use
document.getElementsByClassName("login").item(0);
I got something like this:
As you can see this is not an element object. Instead, it is an HTML Div element(correct me if I named it incorrectly).
My question is that why item() method does not return the same object in the HTMLCollection? To my understanding, HTMLCollection is an object, what is retrieved from item() method is a property of the object, so they are supposed to be the same. Why is the result is unexpected?
Thank you!
This is just the Chrome console formatting the object in a "pretty" way:
By default, DOM elements are logged into the console as representation of their HTML
(From https://developers.google.com/web/tools/chrome-devtools/console/console-write#formatting_dom_elements_as_javascript_objects)
If you want to view the actual object, you can obtain a JavaScript representation of it with:
console.dir(document.getElementsByClassName("login").item(0))
(You can optionally drop the console.)
See: https://developers.google.com/web/tools/chrome-devtools/console/console-reference for info on the various console functions that are available.

Saving an element as a index in a object

I'd like to save a DOM element in a object. But not as a value, i want save it as a key of the object. But i think the core of javascript is not able to do that.
data={}
data[$('div#a')] = 'A';
data[$('div#b')] = 'B';
console.log(data[$('div#a')]); //return B
Do you know some way to save the element in a index object?
Imagine i have XXXXXX elements on my document. If i want to access to the element properties when some event happen on it i dont want to iterate XXXXXX elements to find it.
Why i don't use data of jquery for two reasons:
I want to do it on native javascript
I dont want another array to iterate separate data from the elementid
So the perfect way to do it was have only one object with the elements on the key to acces them easy. And if i want iterate them i only have to do for i in data
JavaScript objects will only accept strings as keys, and JS will use .toString() if you try to use anything else as a key, typically resulting in everything being stored under the (single) key "[object Object]".
Is there any reason you can't use $('#a').data() to store the data associated with that element directly on the element?
Failing that, assuming that every such element has an ID, just use the element ID as the object key.
NB: ES6 has a Map object which can use arbitrary keys, but that's only an experimental feature in current browsers. However even then you would have to use the actual element as the key rather than a jQuery wrapped $(element) object, since $('#a') !== $('#a') - you would have to use the exact same original jQuery object each time you access the map, not a newly constructed object.
Javascript objects only accept string as key.
So if you try to give key value other than string, javascript will internally call .toString() method of that object and use return value of it as key.
Object keys have to be stings.
You can use the data method to associate anything to the element:
$('div#a').data('name', 'A');
$('div#b').data('name', 'B');
console.log($('div#a').data('name')); //return B

Why does JavaScript's getElementsByClassName provide an object that is NOT an array?

I'm trying to get a list in JavaScript (not using jQuery) of all the elements on the page with a specific class name. I therefore employ the getElementsByClassName() function as follows:
var expand_buttons = document.getElementsByClassName('expand');
console.log(expand_buttons, expand_buttons.length, expand_buttons[0]);
Note that I have three anchor elements on my page with the class 'expand'. This console.log() outputs
[] 0 undefined
Next, for kicks, I threw expand_buttons into its own array as follows:
var newArray = new Array(expand_buttons);
console.log(newArray, newArray.length);
This suddenly outputs
[NodeList[3]] 1
and I can click through the nodelist and see the attributes of the three 'expand' anchor elements on the page. It's also worth noting that I was able to get my code working in a w3schools test page.
It may also be of note that my use of document.getElementsByName actually does output (to the console) an array of elements, but when I ask for its length, it tells me 0. Similarly, if I try to access an array element using array_name[0] as normal, it outputs 'undefined', despite there clearly being an element inside of an array when I print the object to the console.
Does anybody have any idea why this might be? I just want to loop through DOM elements, and I'm avoiding jQuery at the moment because I'm trying to practice coding with vanilla JavaScript.
Thanks,
ParagonRG
It's not so much a JavaScript thing as it is a web browser thing. That API is supplied by a native object (the document object), and by the DOM spec it returns a NodeList object. You can treat a NodeList like an array, and it's similar, but distinctly different (as you've noticed).
You can always copy a NodeList to a new array:
var nodeArr = Array.prototype.slice.call(theNodeList, 0);
or in modern ES2015 environments:
var nodeArr = Array.from(theNodeList);
JavaScript always exists in some runtime context, and the context can include all sorts of APIs that provide facilities to JavaScript code. A web browser is one of those contexts. The DOM is specified in a way that's not especially partial to JavaScript; it's a language-neutral interface definition.
I guess the short version of this answer would be, "because it just does."
It doesn't return an array because the object it returns is "live", specifically it is a live NodeList:
In most cases, the NodeList is a live collection. This means that changes on the DOM tree are going to be reflected on the collection.

How is $('h1') logging to the web console as an array in jQuery?

If you do console.log($('some selector')) in the browser, it returns what looks like an array (first line):
But notice that it's not an instanceof Array, but it's actually the jQuery object.
When you do console.dir($('h1')), it shows it's actually the jQuery object.
The question is, how are they making it look like it's an array in the web console? I noticed in the jQuery source here they add reference to a few Array and Object methods, and here they add toArray (and slice and others) to the jQuery object. Is the web console somehow checking for these methods and if it finds one (toArray, indexOf, slice, etc.), it prints it as an Array? I would like to get this behavior out of any custom object, such as the Ember.ArrayProxy. Currently when you log the Ember.ArrayProxy it shows > Object or whatever, but it would be nice to show it as an array.
Any ideas?
You make your object inherit Array using the prototype, like so:
function SomeType() {
this.push(16);
}
SomeType.prototype = [];
SomeType.prototype.constructor = SomeType; // Make sure there are no unexpected results
console.log(new SomeType()); // Displays in console as [16]
And, of course, all jQuery objects are instances of the jQuery function/constructor, so that's how jQuery does it. As a bonus, because of the inheritance, you get all the methods from Array, and the indexing that comes with it too!

How do I recognise if a variable's object type?

I am trying to learn debugging Javascript in Chrome's Javascript console. However, I don't understand how the console displays the data type of an object . For instance, in the Javascript Console, it shows this:
In this picture, I am using JQuery. I tried to do a console.log on a few variables but how do I know if a particular variable is a JQuery object or a raw DOM object? Is the HTMLDivElement or the other one that shows the div tag listed in the console a JQuery object or a raw DOM object?
In general, how should I know the data type of an object or variable in Javascript in a debugger console like the Chrome's Javascript console? In languages such as Java, the data type of a variable is shown clearly in the debugger; I can know from the debugger what kind of object the variable is, whether it is an instance of Class A or instance of Class B, etc.
if (variable instanceof jQuery) // Or variable.jquery
// jQuery object.
Live DEMO
instanceof docs on MDN:
The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor.
The way jQuery checks for DOM elements is with nodeType:
// Handle $(DOMElement)
if ( selector.nodeType ) {
The way jQuery checks for jQuery object is with the jquery property:
// HANDLE: $(expr, $(...))
else if ( !context || context.jquery ) {
Those are both jQuery objects.
The console recognizes them as array-like objects containing DOM elements.
you can view the type in the debugger if you go to Scripts tab.
then on the right press on the + sign under Watch Expressions and add whatever you like.
JQuery objects are actually arrays of DOM elements, Weile DOM elements are just DOM elements.

Categories