web-dev-qa-db-ja.com

フォームオブジェクトにアクセスせずに、JavaScriptを使用してすべての入力オブジェクトのリストを取得します

すべてのinputオブジェクトを取得し、onclickパラメーターを操作する必要があります。

以下は、<a>リンク。 inputタグについてこのようなものを探しています。

for (var ls = document.links, numLinks = ls.length, i=0; i<numLinks; i++){
  var link = unescape(ls[i].href);
  link = link.replace(/\\'/ig,"#");
  if(ls[i].href.indexOf("javascript:") == -1)
  {
    ls[i].href = "javascript:LoadExtern(\\""+link+"\\",\\"ControlPanelContent\\",true,true);";
  }
}
javascripthtmlinputfield
33
Jeremy Gwa

（回答の最後に更新を参照してください。）

NodeListのすべてのinput要素の getElementsByTagName を取得できます（ DOM仕様 、 [〜＃〜] mdc [〜＃〜] 、 [〜＃〜] msdn [ 〜＃〜] ）、単純にループします：

var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

そこで、documentでそれを使用しました。これはドキュメント全体を検索します。また、個々の要素（ DOM仕様 ）にも存在するため、ドキュメント全体ではなく、子孫のみを検索できます。例：

var container, inputs, index;

// Get the container element
container = document.getElementById('container');

// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

...しかし、親formを使用したくないと言ったので、最初の例はあなたの質問により適しています（2番目は、この答えを見つける誰かが知る必要がある場合に備えて、完全性のためだけにあります）。

更新：getElementsByTagNameは上記を行うための絶対に素晴らしい方法ですが、すべてのinput要素の代わりにすべてのチェックボックスを見つけるなど、少し複雑なことをしたい場合はどうでしょうか？

そこで便利なquerySelectorAllが登場します。必要なCSSセレクターに一致する要素のリストを取得できます。したがって、チェックボックスの例では：

var checkboxes = document.querySelectorAll("input[type=checkbox]");

要素レベルでも使用できます。たとえば、div変数にelement要素がある場合、このspan内にあるクラスfooを持つdivをすべて見つけることができます。

var fooSpans = element.querySelectorAll("span.foo");

querySelectorAllとそのいとこquerySelector（リストを提供する代わりにfirstに一致する要素を見つける）は、すべての最新のブラウザー、およびIE8でサポートされています。

88
T.J. Crowder
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
  // ...
}
6
Pointy

querySelectorAll は、独自の forEach メソッドを持つNodeListを返します。

document.querySelectorAll('input').forEach( input => {
  // ...
});

getElementsByTagName は、NodeListの代わりにHTMLCollectionを返すようになりました。したがって、最初にそれを array に変換して、mapや forEach などのメソッドにアクセスする必要があります。

Array.from(document.getElementsByTagName('input')).forEach( input => {
  // ...
});
1
JSON C11