javascript - 如何使用 getElementsByClassName 访问特定元素

Question

我想访问类型为“checkbox”的输入元素，并忽略类型为“text”的输入标签。

当我使用下面的代码时，我收到一条错误消息:

TypeError: outerField.getElementsByTagName is not a function

有人对如何解决这个问题有建议吗？

JavaScript:

 outerField = document.getElementsByClassName("outerField");
 checkboxes = outerField.getElementsByTagName("input");

html 标记:

 <section id="images">
  <div class="outerField">
    <input type="checkbox">
        <img src="lorem.jpg">
    <div class="innerField">
         <input type="text" value ="">
    </div> 
  </div> 

Answer 1

你有一个错字。该函数称为“getElementsByClassName”而不是“getElementByClassName”(注意“Elements”中的“s”)。

https://developer.mozilla.org/de/docs/Web/API/Document/getElementsByClassName

您将返回具有“outerField”类的每个元素，而不是单个元素。您必须访问此 HTMLCollection 中的特定元素.

在您的示例中，这应该有效:

 outerField = document.getElementsByClassName("outerField");
 checkboxes = outerField.item(0).getElementsByTagName("input");