如何使用getElementByClassName访问特定元素

Question

我想访问类型为“复选框”的输入元素，并忽略具有“文本”类型的输入标签。

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

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");

Answer 2

您可以使用querySelectorAll ，它使用类似CSS的语法来过滤类和复选框：

document.querySelectorAll('.outerField input[type=checkbox]')

Answer 3

document.getElementByClassName("outerField");

应该

document.getElementsByClassName("outerField"); //s was missing:typo

而externalField是一个数组，像

outerField[0].getElementsByTagName("input");

Answer 4

方法名称是getElementsByClassName而不是getElementByClassName。 您将获得一个元素集合作为回报

Answer 5

document.querySelector[All] （请参阅MDN ）使您的生活更加轻松：

 var cbxs = document.querySelectorAll('.outerField > input[type=checkbox]'); // demo: show length of cbxs within 'div.outerField') document.querySelector('.outerField') .appendChild(document.createTextNode('length of checkboxes ' + cbxs.length)); 

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