如何使用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>