HTMLCollectionからnameの集合を取り出したい

だいたい以下のような構成のhtmlとjavascriptがあったとして、
eleColの部分を、inpColを使って生み出したいのです。

const inpCol = document.getElementsByTagName("input");
の「inpCol」を使った記述で、
const eleCol = document.getElementsByName("test");
と同等のeleColを導き出したい。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>radio_check_test</title>
6</head>
7<body>
8  <input type="number"><br>
9  <input type="number"><br>
10  <input type="number"><br>
11  <input type="number"><br>
12  <input type="number"><br>
13
14  <input type="radio" name="test" value="val1">radio1
15  <input type="radio" name="test" value="val2">radio2
16  <input type="radio" name="test" value="val3">radio3
17  <br>
18
19  <input type="number"><br>
20  <input type="number"><br>
21  <input type="number">
22
23  <div id="disp"></div>
24
25<script src="main.js"></script>
26</body>
27</html>
28

javascript
1"use strict";
2
3const inpCol = document.getElementsByTagName("input");
4const divCol = document.getElementsByTagName("div");
5
6// －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
7function rClick() {
8  // const eleCol = document.getElementsByName("test");
9  // と同じeleColをinpColから生み出したい
10
11  const eleCol = [];  // ＜＝ ここから
12  let j = 0;
13  for (let i = 0; i < inpCol.length; i++) {
14    if (inpCol[i].name === "test") {
15      eleCol[j] = inpCol[i];
16      j++;
17    }
18  }  // ＜＝ ここまでの追加作業がなんとなく切ない
19
20  let txt = "";
21  for (let i = 0; i < eleCol.length; i++) {
22    if (eleCol[i].checked) {
23      txt = eleCol[i].value;
24      break;
25    }
26  }
27  divCol["disp"].textContent = txt;
28}
29
30// －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
31document.addEventListener("click", () => {
32  rClick();
33});

（以上のソースだけ見て
const eleCol = document.getElementsByName("test");
でいいじゃん、という回避法は無しでお願いします。）

例えばdivColの部分において

const disp = document.getElementById("disp");
disp.textContent = txt;

みたいな置換を使わずに、既にあるdivColによって
divCol["disp"]という記述で済ませられたのは助かりました。
こういった書き方があればと思います。

const eleCol = inpCol["test"];
ではダメなんですよね。

上記の通り、まともにfor文とif文でまわす方法なら書けましたが
こんな大袈裟な事をしなくちゃいけないのでしょうか。
もっと単純な書き方があるのではと思います。
よろしくお願いします。

maisumakun

2018/06/04 22:06

なぜgetElementsByNameやquerySelectorAllによる引き直しでなく、既存のHTMLCollectionから抽出しなければならないのでしょうか。

himejiy3

2018/06/05 14:21

原文ソースにおいて今後、一部を使いまわす時に、最初のconst宣言の部分を大きな変更無く使えると、都合が良いからです。すみません。

行動規範の内容に同意します

回答3件

ベストアンサー

JavaScript
1const inpCol = document.getElementsByTagName("input");
2const eleCol = Array.from(inpCol).filter(input => input.name === "test");

投稿2018/06/04 23:42

編集2018/06/04 23:44

root_jp

総合スコア4666

himejiy3

2018/06/05 13:18

回答ありがとうございます。この発想は無かったです・・『 Element.getElementsByTagName()で取得したHTMLCollectionは配列ではないから、配列のプロトタイプ関数は利用できないが、Array.from()で配列に変換すれば利用可能、と。』なるほどでした・・このHTMLElementを、どうやればHTMLInputElementとして扱えるんだと、そればかり考えていましたが、コロンブスの卵でした・・こんなアプローチがあるなんて。こちらのコードが、最も原文ソースの修正を少なく済ませることが出来ましたので、ベストアンサーにさせていただきます。

行動規範の内容に同意します

inpCol["test"]がよくてdocument.getElementsByName("test")が
ダメな理由が書かれてないので、ちょっと趣旨がわかりかねます
とりあえずはこう

javascript
1<script>
2document.addEventListener("click",()=>{
3  const eleCol = document.querySelector('input[name=test]:checked')||{value:null};
4  console.log(eleCol.value);
5});
6</script>
7
8<input type="number"><br>
9<input type="number"><br>
10<input type="number"><br>
11<input type="number"><br>
12<input type="number"><br>
13
14<input type="radio" name="test" value="val1">radio1
15<input type="radio" name="test" value="val2">radio2
16<input type="radio" name="test" value="val3">radio3
17<br>
18
19<input type="number"><br>
20<input type="number"><br>
21<input type="number">
22

投稿2018/06/05 00:28

yambejp

総合スコア114769

himejiy3

2018/06/05 14:14

回答ありがとうございます。分かり難い質問で申し訳ありませんでした。 querySelectorの中身、('input[name=test]:checked')||{value:null}はなるほどと思いました。今回の私が求めるものとはちょっと違いましたけど、勉強になりました。

行動規範の内容に同意します

HTMLCollection#namedItem

HTMLCollectionからnameの集合を取り出したい

そこまでキーワードが判明しているのなら、仕様書をあたりましょう。
HTMLCollection#namedItem で初めの要素を得ることが出来ますが、集合は参照出来ません。
https://triple-underscore.github.io/DOM4-ja.html#interface-htmlcollection

form要素

多くの人はquerySelectorAllで解決しますが

JavaScript
1document.querySelectorAll('input[name=test]')

liveが欲しいのなら、~~親要素をform要素に変更するのが手っ取り早いですね~~(確認したところ、form.elements.test はRadioNodeListでしたので、liveではありませんでした)。
でなければ、MutationObserver で監視して自前で疑似liveリストを作り出します。

Re: himejiy3 さん

投稿2018/06/05 00:18

編集2018/06/05 04:34