How do you get buttons inside a div only? no jquery

Question

<div class="keys">
    <button id="a"></button>
    <button id="b"></button>
</div>

I have many buttons, and I want the getones that are inside <div>with class="keys", but I cannot get it to work, so far I have tried:

content = document.getElementsByClassName("keys");
kbButtons = content.getElementsByTagName("button");

and i just get undefined

Answer 1

Notice how the method is called "getElements ...", the plural.

document.getElementsByClassName() returns an HTMLCollection object similar to an array.

content = document.getElementsByClassName("keys")[0];
kbButtons = content.getElementsByTagName("button");

You can access the first element of the HTMLCollection with syntax [0].

Answer 2

I like querySelector, if you know css selectors, this is really powerful.

kbButtons = document.querySelectorAll('div.keys button');

Answer 3

Javascript dom 'getElementsByClassName'.

, , , . : " ", : " ".

javascript ...

content = document.getElementsByClassName("keys");
kbButtons = content[0].getElementsByTagName("button");

for (var iIndex = 0; iIndex < kbButtons.length; iIndex++){
    alert(kbButtons[iIndex].id);
};

Answer 4

document.getElementsByClassName , getElementsByTagName , . :

kbButtons = content[0].getElementsByTagName("button");

Answer 5

kbButtons = document.getElementsByClassName('keys')[0].getElementsByTagName('button')