ブログBlog

複数のname属性の要素を取得方法

投稿日:2022年04月27日 テクノロジー ビジネス

こんばんは、東郷です。

Javascriptでname属性を持つhtml要素を取得するメソッドとして、

getElementsByName()メソッドがあります。

取得したいhtml要素が1つ、或いは複数のhtml要素が1つのname属性で統一されている場合は

上記のメソッドで対応できますが、

getElementsByName()では複数のname属性を指定しても

最初に指定したname属性の要素しか取得できません。

HTML <form> <input type="text" name="one" value="1"/> <input type="text" name="one" value="2"/> <input type="text" name="two" value="3"/> <input type="text" name="two" value="4"/> </form>
Javascript let elems = document.getElementsByName('one', 'two'); for (let i = 0; i < elems.length; i++){ console.log(elems[i].value); } console.log(elems); //実行結果 1番目の引数'one'の要素のみ取得 1 2

そのため、取得したいhtml要素が複数ありそれぞれ別のname属性を持っている場合は、

querySelectorAll()メソッドを使います。

Javascript let elems = document.querySelectorAll('[name="one"], [name="two"]'); for (let i = 0; i < elems.length; i++){ console.log(elems[i].value); } console.log(elems); //実行結果 [name="one"]、[name="two"]の要素を全て取得 1 2 3 4
PAGE TOP