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 a lot of buttons and I only want to get the ones inside the <div> with class="keys", but I can't get it to work, so far I tried:

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

and I just get undefined

Answer 1

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

document.getElementsByClassName() returns an HTMLCollection, an array-like object.

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

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