All geek questions in one place

No getElementById for the body?

This question bothered me for a long time. Sorry if this is a stupid question.

Before that, I knew that you could get elements with a class name

document.body.getElementsByClassName("foo");

And I was so lazy, so I just copied and pasted the code to another part to do this

 document.body.getElementById("bar");

I accidentally discovered that this would not work. I tested and he says

TypeError: Object # <HTMLBodyElement> does not have a getElementById method

So why does it have getElementsByClassName and getElementsByTagName and all these similar methods, but only getElementById ?

 typeof document === typeof document.body //true

Their types are the same, so they must have the same thing. But this does not seem to be the case.

+6
source share
4 answers

You can have multiple elements with the same class name as narrowing your search to start with a specific node meaning.

This does not make sense with id, because it must be unique.

There can only be one id in document , so getElementById is the document method.

Example:

 <body> <div id="start"> <span class="a"> </div> <div class="a"> </div> </body>

Starting a class search from node <div id="start"> will give you one element,
Although, if you started with the top node document, it would end with two elements.

Regarding typeof comparison:

 typeof 1 == typeof 2 == "Number" // true 1 !== 2 // true.

typeof only checks 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 use the same type, but do they have the same methods ...? NOT

+5
source

Identifiers are unique for the entire document, so it makes no sense to distribute them to the child nodes of the document.

Class names are not unique, and there are examples that make sense to find elements that have class names under another element.

body.getElementsByClassName('foo') will receive elements that have the class name 'foo' but are contained in the body.

document.getElementsByClassName('foo') will get all elements with the class name 'foo' in the entire document, including <head> .

+4
source

typeof document and typeof document.body same since they are both object . Types do not work the way you think they do in JS regarding objects. So no, they are not the same, and there are no special reasons why they will have to support the same set of functions. (Even objects with the same prototype should not support the same set of functions, but that is another matter.) Just call getElementById in document and it will work.

("Doctor, doctor, it hurts me when I hold my hand by the head and quickly rotate it in figure-8!" "Yes, so knock it down.")

+1
source

Your typeof example does not compare that they are one and the same, but they are the same "type" for which both return an object :

Exiting Firebug Console:

 >>> typeof document "object" >>> typeof document.body "object"

More information on typeof can be found at:

https://developer.mozilla.org/en/JavaScript/Reference/Operators/typeof

0
source

Source: https://habr.com/ru/post/919191/

More articles:


All Articles