57734


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

* * *

## 【質問の主旨】

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>

[code]

    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'));
    });
[/code]

[code]

    <!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>
[/code]

### 2.

[![画像の説明をここに入力](https://i.stack.imgur.com/tWdAn.png)](https://i.stack.imgur.com/tWdAn.png)

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

* * *

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


CC BY-SA 4.0
2019-08-31T08:28:14.487
57732
2019-08-31T15:23:34.110
2019-08-31T15:23:34.110
32986
32232
question
javascript html css
JavaScriptの関数で使われる仮引数がCSSのidセレクタとして使える理由を教えてください


`getElementById` メソッドは `DOMString`
を引数として取ります[[1]](https://dom.spec.whatwg.org/#interface-
nonelementparentnode)。また、 `getListBox` 関数の引数 name には、 `os`
という文字列が与えられています[[2]](https://github.com/echizenyayota/ch7/blob/developer/js/form_list.js#L15)。

[code]

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

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

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

[code]

    let elems = document.getElementById(name).options;
    
[/code]

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

[code]

    let elems = document.getElementById('os').options;
    
[/code]

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


CC BY-SA 4.0
2019-08-31T13:20:06.520
57734
2019-08-31T13:20:06.520
32986
57732
answer