I have the following :

<div id="first">
  <div id="second">
    <button id="third"></button>
  </div>
</div>

The DIV with ID of first will never change it's ID but second and third might change.

If it never changed I'd use something the following to target third :

submission = document.getElementById("third");

However, using first, how would I access it now? I've tried the following but get a different result back than the above (which is what I need)

submission = document.querySelectorAll("div#first div button");

This seems to work but doesn't look clean :

document.getElementById("first").children[0].children[0];

I have the following :

<div id="first">
  <div id="second">
    <button id="third"></button>
  </div>
</div>

The DIV with ID of first will never change it's ID but second and third might change.

If it never changed I'd use something the following to target third :

submission = document.getElementById("third");

However, using first, how would I access it now? I've tried the following but get a different result back than the above (which is what I need)

submission = document.querySelectorAll("div#first div button");

This seems to work but doesn't look clean :

document.getElementById("first").children[0].children[0];

• javascript

Share Improve this question Follow edited Sep 5, 2017 at 14:25 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Sep 5, 2017 at 14:12 pee2peepee2pee 3,7821111 gold badges6565 silver badges147147 bronze badges 4

• In your examples you are using vanilla JS, but you tagged it as jquery? – Thomas Gak-Deluen Commented Sep 5, 2017 at 14:13
• In what way might the "second and third...change"? – David Thomas Commented Sep 5, 2017 at 14:13
• They might be any other value – pee2pee Commented Sep 5, 2017 at 14:16
• 1 @tgdn sorry, I hope you can forgive me – pee2pee Commented Sep 5, 2017 at 14:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You should use querySelector() if you want to get the button element instead of querySelectorAll() that will return a set of elements that fits the selector :

submission = document.querySelector("div#first div button");

Hope this helps.

console.log( document.getElementById("third") );
console.log( document.querySelector("div#first div button") );

<div id="first">
  <div id="second">
    <button id="third"></button>
  </div>
</div>

var btn = document.querySelectorAll('#first> div> button');
var btn1 = document.querySelector('#first> div> button');

console.dir(btn)
console.dir(btn1)

<div id="first">
    <div id="second">
      <button id="third"></button>
    </div>
</div>

If you do document.querySelectorAll then this will return Array of NodeLists and If you do document.querySelector then it will return the specific element

var btn = document.querySelectorAll('#first> div> button');
var btn1 = document.querySelector('#first> div> button');

console.dir(btn)
console.dir(btn1)