CODEWITHSUNDEEP
javascripthtmlcss
phoenixdown
phoenixdown

Reputation: 838

What kind of object is getElementByID outputting to here?

I'm working through How to Learn Javascript Properly and came across this interesting code example in O'Reilly's Javascript the Definitive Guide 6th ed.

Update: A better way of asking the question - what is an element returned by getElementById()? At first it looks like it is the text inside the target <div>, but at other times it looks like [object HTMLDivElement]. What is actually in the elements object?

HTML:

<div id="id1">some text id1</div>
<div id="id2">some text id2</div>

JS:

function getElements( /*ids...*/ ) {
    var elements = {};
    for (var i = 0; i < arguments.length; i++) {
        var id = arguments[i];
        var elt = document.getElementById(id);
        if (elt == null) {
            throw new Error("No element here");
        }
        elements[id] = elt;
    }
    //alert(Array.isArray(elements)); //false
    return elements;
}

var elements = getElements("id1",  "id2");
//alert(Array.isArray(elements)); //false
//alert(elements[0]); //undefined
alert(elements["id1"]); //[object HTMLDivElement]

The code outputs some text id1 and some text id2 on separate lines in JSFiddle's Results pane, so it appears to be working.

I'd like to know what is in the object elements.

You can see various alert()'s I've tried to in order to figure it out in the comments above.

I thought elements was an object whose keys were the id's I was looking for (so, id1 and id2) and whose values were the text in those <div>s, but when I alert(elements["id1"]); on the last line I get a weird output: [object HTMLDivElement]. I thought it would output some text id1.

Since it doesn't, how does JSFiddle know to output some text id1 on the Results pane?

Upvotes: 0

Views: 1872

Answers (2)

phoenixdown
phoenixdown

Reputation: 838

UPDATE: Thanks to @Dr.Molle for pointing out the last paragraph in this answer is bunk. While the stuff above it is correct, the reason the Results pane shows the text inside the <div> blocks is because that is what the formatted HTML looks like, not because the javascript does anything to modify the document. It's still a good idea to read this post to see how someone who doesn't know something can go about researching a plausible answer. That skill, combined with good feedback from SO, helps everyone make progress.

getElementById() returns an object of type Element. So when you try to alert(elements["id1"]) you get [object HTMLDivElement] as the output because alert() calls .toString() behind the scenes. The returned value is [object HTMLDivElement] because the item is an object of reference type HTMLDivElement.

If you tried this line alert(elements["id1"].outerHTML); you would get

<div id = "id1">
    some text id1
</div>

This is because <div id = "id1"> is an Element, and Element.outerHTML is a property of Element objects.

But, if you tried this line alert(elements["id1"].textContent); you would get some text id1. This is because <div id = "id1"> inherits methods and properties from the Node object type.

So what's happening in your code? the getElements() function returns a variable elements, which is in fact an object of objects. As you know, objects are just collections of <key, value> pairs. The <key>'s here are the HTML id's that you passed into getElements(). The values are other objects, namely, the objects of type Element that are returned by getElementById().

When getElements() returns elements, the returned object is evaluated such that .textContent is called behind the scenes to prepare the output, and that is what you are seeing on JSFiddle's Results pane. This is also why trying to alert(elements["id1"]) did not work, since it calls .toString() instead of .textContent.

Upvotes: 0

Oriol
Oriol

Reputation: 288650

document.getElementById returns an object, which is null if there is no element with the given id, or that element otherwise.

What does that object look like?

Well, it's an instance of these constructors:

Depending on the element, it will also be an instance of HTMLDivElement, HTMLUnknownElement, etc.

Why do you get "[object HTMLDivElement]"?

When you attempt to use an object as text (e.g. when using alert), its toString method is called. And this method return the string "[object HTMLDivElement]" when called on a <div> element.

If you want to get more useful data, you should use console.log and you will be able to inspect its properties.

How to get the text of an element?

You can use

Upvotes: 3

Related Questions