ブログBlog
複数のname属性の要素を取得方法
こんばんは、東郷です。
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