javascript - Using two getElementByIds - Stack Overflow

admin管理员组

文章数量:1022864

Is it possible to do something like:

this.getElementById('first-id').getElementById('second-id')? 

When I do this, I get an error "getElementById(...).getElementById is not a function.

The reason I'm trying to do this is because I am able to console log the first-id element, but not the second (when I do this.getElementById('second-id')). I assume it is because my DOM is not pletely loaded.

However, I thought since it loaded the first-id element, I'll be able to do another getElementById as the first part is loaded and the next element is nested/a child of the first-id element.

Can someone explain why this logic doesn't work?

Is it possible to do something like:

this.getElementById('first-id').getElementById('second-id')? 

When I do this, I get an error "getElementById(...).getElementById is not a function.

The reason I'm trying to do this is because I am able to console log the first-id element, but not the second (when I do this.getElementById('second-id')). I assume it is because my DOM is not pletely loaded.

However, I thought since it loaded the first-id element, I'll be able to do another getElementById as the first part is loaded and the next element is nested/a child of the first-id element.

Can someone explain why this logic doesn't work?

• javascript
• html
• getelementbyid
• lit-element

Share Improve this question Follow asked Jun 14, 2021 at 4:41 webdesignnoobwebdesignnoob 39111 gold badge44 silver badges2020 bronze badges 4

• getElementById is not a scoped function (unlike querySelector), so no. getElementById is a member of the Document object, not the HTMLElement object. – Dai Commented Jun 14, 2021 at 4:42
• 1 "I assume it is because my DOM is not pletely loaded." - no, I think it's because you don't yet understand how method-chaining works. A method-chain is not a promise-chain, but a promise-chain is a method-chain, – Dai Commented Jun 14, 2021 at 4:43
• Are you trying to access children of the element? Try childNodes instead, and refer to CertainPerformance answer below why what you are doing is not going to work, or why you should not do it in the first place. – iismaell Commented Jun 14, 2021 at 4:47
• Are you just trying to select two elements with different Ids? In what context are you using this.getElementById('second-id')? It might help to include a working example of your code that demonstrates the issue. – showdev Commented Jun 14, 2021 at 4:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

An element with a given ID is supposed to be absolutely unique in a document. There should never be more than one element with the same ID. So, calling getElementById on an element to search among its children, if it were possible (which it isn't), wouldn't make a whole lot of sense - instead, search from the whole document. You should only need

document.getElementById('second-id')

Most answers here are correct and will help the OP implement the solution. This will try to answer Is it possible to do something like:, which is what OP asked originally:

this.getElementById('first-id').getElementById('second-id')

getElementById() is a Document interface method and is only available on the Document object. It is not available on the Element, and this.getElementById('first-id').getElementById will be equal to undefined. undefined is not a function and can't be invoked, hence the error. It makes sense that getElementById() is only available in the Document interface as an ID is (ideally) supposed to be a unique in the DOM. So, providing the function inside other elements is not as useful.

querySelecetor() is both a document and element method and is available on both the objects.

That is why you can do something like :

document.querySelector('#first-id').querySelector('#second-id')

(Searches for #second-id child of #first-id)

You could possibly chain it using Document.querySelector(), but you should never need to use this as ids should be unique.

E.g, something like this:

var selected = document.querySelector('#first-id #second-id');
console.log(selected);

<div id="first-id">
  <div id="second-id">1</div>
</div>
<div id="second-id">2</div>
<!-- Don't use duplicate ids - this is just for demonstration -->

You could do something weird like the following, but it's silly.

<script>
    window.addEventListener("load", function() {
        alert(document.getElementById("parent").ownerDocument.getElementById("child").textContent);
    }, false);
</script>

<div id="parent">
    <div id="child">Yo</div>
</div>

Is it possible to do something like:

this.getElementById('first-id').getElementById('second-id')? 

When I do this, I get an error "getElementById(...).getElementById is not a function.

The reason I'm trying to do this is because I am able to console log the first-id element, but not the second (when I do this.getElementById('second-id')). I assume it is because my DOM is not pletely loaded.

However, I thought since it loaded the first-id element, I'll be able to do another getElementById as the first part is loaded and the next element is nested/a child of the first-id element.

Can someone explain why this logic doesn't work?

Is it possible to do something like:

this.getElementById('first-id').getElementById('second-id')? 

When I do this, I get an error "getElementById(...).getElementById is not a function.

The reason I'm trying to do this is because I am able to console log the first-id element, but not the second (when I do this.getElementById('second-id')). I assume it is because my DOM is not pletely loaded.

However, I thought since it loaded the first-id element, I'll be able to do another getElementById as the first part is loaded and the next element is nested/a child of the first-id element.

Can someone explain why this logic doesn't work?

• javascript
• html
• getelementbyid
• lit-element

Share Improve this question Follow asked Jun 14, 2021 at 4:41 webdesignnoobwebdesignnoob 39111 gold badge44 silver badges2020 bronze badges 4

• getElementById is not a scoped function (unlike querySelector), so no. getElementById is a member of the Document object, not the HTMLElement object. – Dai Commented Jun 14, 2021 at 4:42
• 1 "I assume it is because my DOM is not pletely loaded." - no, I think it's because you don't yet understand how method-chaining works. A method-chain is not a promise-chain, but a promise-chain is a method-chain, – Dai Commented Jun 14, 2021 at 4:43
• Are you trying to access children of the element? Try childNodes instead, and refer to CertainPerformance answer below why what you are doing is not going to work, or why you should not do it in the first place. – iismaell Commented Jun 14, 2021 at 4:47
• Are you just trying to select two elements with different Ids? In what context are you using this.getElementById('second-id')? It might help to include a working example of your code that demonstrates the issue. – showdev Commented Jun 14, 2021 at 4:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

An element with a given ID is supposed to be absolutely unique in a document. There should never be more than one element with the same ID. So, calling getElementById on an element to search among its children, if it were possible (which it isn't), wouldn't make a whole lot of sense - instead, search from the whole document. You should only need

document.getElementById('second-id')

Most answers here are correct and will help the OP implement the solution. This will try to answer Is it possible to do something like:, which is what OP asked originally:

this.getElementById('first-id').getElementById('second-id')

getElementById() is a Document interface method and is only available on the Document object. It is not available on the Element, and this.getElementById('first-id').getElementById will be equal to undefined. undefined is not a function and can't be invoked, hence the error. It makes sense that getElementById() is only available in the Document interface as an ID is (ideally) supposed to be a unique in the DOM. So, providing the function inside other elements is not as useful.

querySelecetor() is both a document and element method and is available on both the objects.

That is why you can do something like :

document.querySelector('#first-id').querySelector('#second-id')

(Searches for #second-id child of #first-id)

You could possibly chain it using Document.querySelector(), but you should never need to use this as ids should be unique.

E.g, something like this:

var selected = document.querySelector('#first-id #second-id');
console.log(selected);

<div id="first-id">
  <div id="second-id">1</div>
</div>
<div id="second-id">2</div>
<!-- Don't use duplicate ids - this is just for demonstration -->

You could do something weird like the following, but it's silly.

<script>
    window.addEventListener("load", function() {
        alert(document.getElementById("parent").ownerDocument.getElementById("child").textContent);
    }, false);
</script>

<div id="parent">
    <div id="child">Yo</div>
</div>

本文标签： javascriptUsing two getElementByIdsStack Overflow