Why document.body.getElementById(idOfElem) and document.body.getElementsByName(nameOfElem) not working?
and
Why document.body.getElementByTagName(tagOfElem) and document.body.getElementByClassName(classOfElem) working?
When using the first, the browser throw this error:
TypeError: document.body.getElementById is not a function[Learn More]
Why document.body.getElementById(idOfElem) and document.body.getElementsByName(nameOfElem) not working?
and
Why document.body.getElementByTagName(tagOfElem) and document.body.getElementByClassName(classOfElem) working?
When using the first, the browser throw this error:
Share Improve this question edited Feb 10, 2017 at 17:45 ibrahim mahrir 31.7k5 gold badges49 silver badges77 bronze badges asked Feb 10, 2017 at 17:21 hamidb80hamidb80 2943 silver badges17 bronze badges 3TypeError: document.body.getElementById is not a function[Learn More]
-
3
Drop the
bodypart. It's justdocument.getElementById– j08691 Commented Feb 10, 2017 at 17:22 -
Use
document.getElementById()and ifidOFelemis not a variable use"idOFelem"– Maher Fattouh Commented Feb 10, 2017 at 17:25 -
1
@Teemu the OP isn't asking what the methods do. Instead the OP is confused about why
getElementByIdis not available on thebodyobject, but the others are. – evolutionxbox Commented Feb 10, 2017 at 17:31
3 Answers
Reset to default 6Since IDs are unique you have to use document.getElementById as it is the only DOM element that have that function.
Elements other than document have these functions: getElementsByTagName, getElementsByClassName, querySelector and querySelectorAll but not the getElementById.
Why not define it on elements other than document?
An element with an ID is unique no matter what its parent is. Therefore, it's uncessary to know the parent of an element before getting that element using its ID. So, there's no need to put the function getElementById on all elements, putting it only on document will suffice.
Why are the other functions defined?
Because you sometimes need to get the <div>s or <p>s or elements with some class .cls only if they're inside a known element. Then if you use document as the root, the result will be all the elements in the document not just the ones inside your desired element.
Conclusion:
document.getElementById will always return at most one element, hence why redefining it on every DOM element (it will be useless). But other functions like getElementsByTagName, getElementByClassName, ... could return as many as there could be. So we put them on all elements so that we can narrow the search by specifying a root to start the search from.
getElementById is a method of document, not of document.body. The same goes for getElementsByName.
On the other hand, getElementByTagName and getElementByClassName can be called on any element including body.
document.body.getElementById() does not exist.
Use document.getElementById() gets the element with the matching ID from the document.
document.getElementsByTagName() - gets all the elements which match the tag name from the document.