Question

我想访问类型为＆＃34;复选框＆＃34;的输入元素。并忽略具有＆＃34; text＆＃34;。

类型的输入标签

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

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

你有一个错字。该函数被称为＆＃34; getElementsByClassName＆＃34;不是＆＃34; getElementByClassName＆＃34; （注意＆＃34; s＆＃34; in＆＃34; Elements＆＃34;）。

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

你回来了每个拥有类＆＃34; outerField＆＃34;的元素。不是一个单一的元素。您必须访问此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

和outerField是一个数组，像

一样使用它

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

Answer 4

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

Answer 5

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用getElementsByClassName访问特定元素

5 个答案: