This question has disturbed me for a long time. Sorry if it is a stupid question.
Before, I have known that you can get the elements with a class name
document.body.getElementsByClassName("foo");
And I was so lazy, so I just copied and pasted the code to the other part to do this
document.body.getElementById("bar");
I accidentally found it won't work. I tested and it says
TypeError: Object #<HTMLBodyElement> has no method 'getElementById'
So why does it have getElementsByClassName andgetElementsByTagName and all those similar methods, but only no getElementById?
typeof document === typeof document.body //true
Their types are the same, so they should have the same thing. But it does not seem to be the case here.
This question has disturbed me for a long time. Sorry if it is a stupid question.
Before, I have known that you can get the elements with a class name
document.body.getElementsByClassName("foo");
And I was so lazy, so I just copied and pasted the code to the other part to do this
document.body.getElementById("bar");
I accidentally found it won't work. I tested and it says
TypeError: Object #<HTMLBodyElement> has no method 'getElementById'
So why does it have getElementsByClassName andgetElementsByTagName and all those similar methods, but only no getElementById?
typeof document === typeof document.body //true
Their types are the same, so they should have the same thing. But it does not seem to be the case here.
Share Improve this question edited Jun 27, 2012 at 22:15 Derek 朕會功夫 asked Jun 27, 2012 at 22:01 Derek 朕會功夫Derek 朕會功夫 94.3k45 gold badges195 silver badges253 bronze badges 3 |4 Answers
Reset to default 5You can have multiple elements with the same class name so narrowing down the search to start with a specific node make sense.
It doesn't make sense with id because it it should be unique.
You can have only one id in the document, this why getElementById is a method of document.
Example:
<body>
<div id="start">
<span class="a">
</div>
<div class="a">
</div>
</body>
Start searching for class a from the node <div id="start"> will give you one element,
While if you would have start from the top node- document, it would have ended with two elements.
Regarding to the typeof comparing:
typeof 1 == typeof 2 == "Number" // true
1 !== 2 // true.
typeof only checks for the type, not the value, document and document.body are both objects, but different objects.
typeof document === typeof document.body === typeof null === "object" // true
document === document.body // false!!!
As you can see, null and document share the same type, but do they have the same methods...? NO
Ids are unique to the entire document, therefore it makes no sense to scope them to children nodes of the document.
Class names are not unique and there are use cases that make sense to find elements that have classnames below another element.
body.getElementsByClassName('foo') will get the elements that have classname 'foo' but are contained within the body.
document.getElementsByClassName('foo') will get all elements with classname 'foo' in the entire document, including the <head>.
typeof document and typeof document.body are the same because they're both object. Types don't work the way you think they do in JS with regard to objects. So no, they're not the same, and there's no particular reason they would have to support the same function set. (Even objects with the same prototype don't have to support the same function set, but that's another matter.) Just call getElementById on document and it will work.
("Doctor, doctor, it hurts when I hold my arm over my head and rotate it rapidly through a figure-8 pattern!" "Yeah? So knock it off.")
Your typeof example is not comparing that they are the same thing but that they are the same 'type', for which both return object:
Output from Firebug console:
>>> typeof document
"object"
>>> typeof document.body
"object"
Further details on typeof can be found at:
https://developer.mozilla.org/en/JavaScript/Reference/Operators/typeof
typeofis"object"for both which means they can be any kind of objects. It doesn't tell you much about the methods they have. – pimvdb Commented Jun 27, 2012 at 22:03typeof document === typeof document.body === typeof null === typeof [] === "object"– nicosantangelo Commented Jun 27, 2012 at 22:07