javascript - Why getElementById does not work on elements other than document? - Stack Overflow

admin管理员组

文章数量:1356777

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:

TypeError: document.body.getElementById is not a function[Learn More]

• javascript

Share Improve this question Follow edited Feb 10, 2017 at 17:45 ibrahim mahrir 31.7k55 gold badges4949 silver badges7777 bronze badges asked Feb 10, 2017 at 17:21 hamidb80hamidb80 29433 silver badges1717 bronze badges 3

• 3 Drop the body part. It's just document.getElementById – j08691 Commented Feb 10, 2017 at 17:22
• Use document.getElementById() and if idOFelem is 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 getElementById is not available on the body object, but the others are. – evolutionxbox Commented Feb 10, 2017 at 17:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Since 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.

本文标签： javascriptWhy getElementById does not work on elements other than documentStack Overflow