Question

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

我有很多按钮，我只想get <div>内有class="keys"的按钮，但我无法让它工作，到目前为止我试过了：

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

我得到了未定义的

Answer 1

注意该方法如何命名为“getElements ...”，复数。

document.getElementsByClassName()返回一个HTMLCollection，一个类似数组的对象。

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

您可以使用[0]括号语法访问HTMLCollection的第一个元素。

Answer 2

我喜欢querySelector，如果你知道css选择器，那真的很强大。

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

Answer 3

Javascript返回一个带有'getElementsByClassName'函数的dom元素数组。

因此，如果您使用代码定位了一个元素，则需要指定所需的数组元素。否则你会说，“在这个数组中，给我按钮元素”，当你真正要问的时候，“在这个数组中，给我数组的第一个元素中的按钮元素。”

以上是您上面的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')

你如何只在div内获得按钮？没有JQuery

5 个答案: