リストボックスの値を取得する際のoptionsプロパティについて

複数選択できるリストボックスの値を取得する際に、「options」プロパティを使用した場合と使用しない場合とでは、何か違いなどはあるのでしょうか？

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5<title>JavaScript本格入門</title>
6</head>
7<body>
8<form>
9  <div>
10    <label for="food">好きな食べ物は？：</label>
11    <select id="food" multiple>
12      <option value="ラーメン">ラーメン</option>
13      <option value="餃子">餃子</option>
14      <option value="焼き肉">焼き肉</option>
15    </select>
16    <input id="btn" type="button" value="送信" />
17  </div>
18</form>
19<script src="list.js"></script>
20</body>
21</html>

javascript
1document.addEventListener('DOMContentLoaded', function() {
2  var getSelectValue = function(name) {
3    var result = [];
4    var opts = document.getElementById(name).options;
5    console.log(opts);
6    for(var i = 0, len = opts.length; i < len; i++) {
7      var opt = opts.item(i);
8      if (opt.selected) {
9        result.push(opt.value);
10      }
11    }
12    return result;
13  };
14  
15  document.getElementById('btn').addEventListener('click', function() {
16    window.alert(getSelectValue('food'));
17  }, false);
18}, false);

上記コードの「 var opts = document.getElementById(name).options;」の部分で、.optionsとしているのですが、これを取り除いた場合でも、.optionsとした場合と同じように動作します。何か２つの場合において、違いやメリット、デメリットなどがありましたら、教えてください。
お願いいたします。

spookybird

2018/09/17 09:22

勘違いではないですか？同じように動作するはずはないのですが...

newyee

2018/09/17 09:31

自分が試した限りでは、optionsをつけた場合でもつけていない場合でも、同じように、セレクトボックスの中の選択した値がアラートとして表示されるんですよね

spookybird

2018/09/17 13:18

あっ、理解できました。回答します。

回答2件

ベストアンサー

NodeList.item()
HTMLSelectElement.item()

どっち使ってるかが違っても取得結果が同じなんですね。

まず、
var opts = document.getElementById(name).options;
これをやった場合、
optionが3つ入ったNodeListが取得できます。
ので、forの中でvar opt = opts.item(i);とやると、NodeList.item()の方が実行されます。
で、結果的にはNodeListに入ってるoptionが取れます。

次に、
var opts = document.getElementById(name);
これをやった場合、
select要素が取れます。
ので、forの中でvar opt = opts.item(i);とやると、HTMLSelectElement.item()の方が実行されます。
で、これも結果的にoptionが取れます。

.item()という同じ名前のメソッドを持っているおかげで、挙動が同じになっているようです。

投稿2018/09/17 13:21

spookybird

総合スコア1803

回答へのコメント

newyee

2018/09/18 04:14

ご回答ありがとうございます。「.item()」というメソッドを、「NodeList」「HTMLSelectElement」こちらの２つがもっていたために、たまたま、同じ挙動となっていたわけなんですね。理解できました！

こんなふうにすると少しわかりやすいかもしれません

javascript
1<script>
2document.addEventListener('DOMContentLoaded', function() {
3  document.querySelector('#btn').addEventListener('click', function(e) {
4    const t=e.target;
5    const targetid=t.dataset['targetid'];
6    const results =[].map.call(document.querySelectorAll('#'+targetid+' option:checked'),function(x){
7      return x.value;
8    });
9    console.log(results);
10  });
11});
12</script>
13
14<form>
15  <div>
16    <label for="food">好きな食べ物は？：</label>
17    <select id="food" multiple>
18      <option value="ラーメン">ラーメン</option>
19      <option value="餃子">餃子</option>
20      <option value="焼き肉">焼き肉</option>
21    </select>
22    <input id="btn" type="button" data-targetid="food" value="送信" />
23  </div>
24</form>