如何從JavaScript的表單樹中挑選出所有輸入子級？

Question

我正在處理使用Java進行驗證的表單。 為了組織和格式化輸入，我需要使用div ， table ， span等。這在我嘗試獲取所有表單信息時給我造成了問題。 現在，我有一個腳本，該腳本循環遍歷父級（窗體）的所有子級，並相應地執行操作。 不幸的是，由於現在已經涉及到那些討厭的span ， div ， table ， tr和td元素，因此我無法使用.childNodes來獲取輸入。 我應該怎么做呢？

Answer 1

表單元素的“ elements”屬性給出了表單中所有輸入（等）的列表。 那是，

var form = document.forms[0]; // or getElementById() ..
var elements = form.elements;
for (var i = 0; i < elements.length; ++i) {
  var element = elements[i];
  // do something with form element
}

表單中有多少個非表單包裝器元素都沒有關系，因此無論您的HTML標記如何，此方法都有效。 編輯 -在不支持“ querySelector” API的舊瀏覽器中也可以使用。

Answer 2

使用:input選擇器：（ http://api.jquery.com/input-selector/ ）

Answer 3

如果您使用的是jQuery： $('#parentElement').find('input')

Answer 4

使用querySelectorAll ：

document.querySelector('#parentElement').querySelectorAll('input')

文檔： querySelector ， querySelectorAll 。

這兩個函數也可以在元素上運行。 瀏覽器兼容性在文檔中。