0

いつもお世話になっています。
下記の質問についてご教示を願います。


【質問の主旨】

JavaScriptの関数で使われる仮引数がCSSのidセレクタとして使えることはどういう理由に基づくのでしょうか?

【質問の補足】

1.

【質問の主旨】に関するコードは以下のjsファイルとindex.htmlに基づいています。form_list.jsの1行目で使われているnameがidセレクタの名前(2行目で使われているname)になる理由がよく分かりません。

https://github.com/echizenyayota/ch7/blob/developer/js/form_list.js
https://github.com/echizenyayota/ch7/blob/developer/index.html

let getListBox = function(name) {
  let result = [];
  let elems = document.getElementById(name).options;

  for (let i = 0; i < elems.length; i++) {
    if (elems[i].selected) {
      result.push(elems[i].value);
    }
  }
  return result;
};

const os = document.getElementById('os');
os.addEventListener('change', () => {
  console.log(getListBox('os'));
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>フォームの操作</title>
</head>

<body>
  <h1>フォームの操作</h1>
  <form>
    <div>
      <label>お使いのOSは?</label>
      <select id="os" multiple size="3">
        <option value="windows">Windows</option>
        <option value="macos">Mac OS</option>
        <option value="unix">Unix</option>
      </select>
    </div>
  </form>
  <script src="js/form_list.js"></script>
</body>

</html>

2.

画像の説明をここに入力

githubにUPしたコードをローカル開発環境で実行して、コンソールに表示するとこのような画面が表示されます。


以上、ご確認よろしくお願い申し上げます。

1 件の回答 1

3

getElementById メソッドは DOMString を引数として取ります[1]。また、 getListBox 関数の引数 name には、 os という文字列が与えられています[2]

os.addEventListener('change', () => {
  console.log(getListBox('os'));
});

このことから、「getElementById メソッドの引数として変数 name を渡す」ということは、「getElementById メソッドの引数として os という DOMString を渡す」ことと同じであるとわかります。

そのため、 getListBox 関数の以下の記述は、

let elems = document.getElementById(name).options;

このように書き換えることが出来ます。

let elems = document.getElementById('os').options;

以上より、仮引数 name を getElementById メソッドに渡すことで、 id 属性の値が os である要素が取得出来ることがわかります。

1
  • supaさん。コメントありがとうございます。非常に丁寧な説明で疑問に思っていたことを理解することができました。また let elems = document.getElementById(name).options;let elems = document.getElementById('os').options; に変えても同様の動作をすることも確認できました。今後ともどうぞよろしくお願いします。 github.com/echizenyayota/ch7/commit/… Commented 2019年9月1日 3:41

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。