3

So I know that getElementById is available with the document object.

const ELEMENT_BY_ID = document.getElementById('header'); // works fine

Now what I am trying to do is to use getElementById on an HTML node instead of the document object.

const PARENT_ELEMENT = document.getElementById('parent');
const CHILD_BY_CLASS_NAME = PARENT_ELEMENT.getElementsByClassName('ch'); // Works fine
const CHILD_BY_ID = PARENT_ELEMENT.getElementById('child1'); // Error PARENT_ELEMENT.getElementById is not a function

Here with PARENT_ELEMENT I am able to use getElementsByClassName or Tag Name but don't know why getElementById is not available here. Is there a reason why getElementsByClassName is available but getElementById is not available? Below is my HTML

<div id="parent">
    <span id="child1" class="ch ch1">Child</span>
    <span id="child2" class="ch ch3">Child</span>
    <span id="child3" class="ch ch3">Child</span>
</div>
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
Soumyajeet Nayak
  • 37
  • 1
  • 8
  • getElementById() is a method which works only on **document**. Read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById (it is written in the first paragraph) – besciualex Dec 10 '19 at 07:14
  • Your affirmation _"So I know that getElementById is available with the document object."_ should be _getElementById() works only with Document as stated in documentation_". – besciualex Dec 10 '19 at 07:16
  • https://stackoverflow.com/questions/3902671/getelementbyid-doesnt-work-on-a-node – sathish1409 Dec 10 '19 at 07:20
  • Does this answer your question? [chaining getElementById](https://stackoverflow.com/questions/5683087/chaining-getelementbyid) – ErTR Dec 10 '19 at 07:20

3 Answers3

4

getElementById() Usage notes

Unlike some other element-lookup methods such as getElementsByClassName(), Document.querySelector() and Document.querySelectorAll(), getElementById() is only available as a method of the global document object, and not available as a method on all element objects in the DOM. Because ID values must be unique throughout the entire document, there is no need for "local" versions of the function.

Mamun
  • 66,969
  • 9
  • 47
  • 59
2

That's just how things are - getElementById only exists on the document (and on DocumentFragments - both implement the NonElementParentNode interface that has getElementById), as you can see in the DOM standard here.

getElementsByClassName, on the other hand, can be called on either a document or an element, as you can see at the bottom of this section on the same page (search for: collection = document . getElementsByClassName(classNames))

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
0

I think the confusion is in that you are nesting a reference to an element ID. ID's are unique to each element, regardless of how they're nested in the DOM. So you can reference an element inside another element directly ...

<parent id='one'>
    <child id='two'></child>
</parent>

You don't need to access the child by referring to it's place in the parent, like var el = getElementById('one').getElementById('two'). You just reference it directly var el = getElementById('two').

In contrast, many elements can have the same class, so you can get all of the elements of a class within a parent of a particular ID. getElementsByClassName() it iterative. getElementById() is not.

Peter Cullen
  • 896
  • 1
  • 11
  • 23