File APIでファイル情報を取得するコードの意味がわかりません

Question

window.onload = function(){
            $("#afile").addEventListener(
            'change', afile_changeHandler);
        }

        function afile_changeHandler(evt){
            var files = evt.target.files;
            var s = "";
                for(var i = 0; i < files.length; i++){
                    var f = files[i];
                    s += 
                        'name;' + escape(f.name) + '<br>' +
                        'size;' + f.size + ' Bytes<br>' +
                        'type;' + f.type + '<br>' +
                        'date;' + f.lastModifiedDate + '<hr>';
                 }

                $('#info').innerHTML = s;

上記コードでファイル情報を取得した後の

```javascript
function $(id) {
        return document.querySelector(id);
    }

こちらのコードの意味が理解できません...
よろしくお願いいたいます。

追記
```HTML
<div id="video_wrap_wrap">
        <div id="video_wrap">
            <video id="myvideo" controls width="640" height="360"></video>    
        </div>
    </div>
    <input id="afile" type="file" multiple>
        <br>
        <div id="info"></div>

Answer 1

functionは後先は関係ありません。
$という名前の関数を定義している、という意味です。
その中で、document.querySelectorを呼び出しています。

querySelectorについてはリンク先をご覧ください。

Comments

[yuzusenbei]

idを与えられた要素の内最初のものを返す、であっていますか？
間違った理解であればご指摘お願いします。
また$という関数の名前を変更すると動作しなくなってしまいます。
関数名を変えた場合の不都合な点はなんでしょうか...?

[shi_ue]

id だけではありません。# から始まれば、id ですし、ピリオドから始まればクラスです。
cssのセレクタと同じ書き方です。

ソース内のすべての $ を別の名前に変えれば動作するはずですよ？

[yuzusenbei]

ありがとうございます。セレクタ内でということですね。
仰る通り動作致しました。
追記の場合最初のidはvideo_wrap_wrapかと思ったのですが、最初の要素とはどれにあたるのでしょうか？

[shi_ue]

？？？
最初の要素？　例えばクラスでしたら、同じクラスを複数付けられますから、その最初の要素です。divタグを指定すれば、ご指摘のようにvideo_wrap_wrapが返りそうです。

id は一意（他とダブっちゃいけない）なので、必ず指定したものが返ります。
なのでidの場合、参照先にもありますが、document.getElementByIdの方が高速に要素を特定できます。

[yuzusenbei]

idが一意であるということを考えずにdocument.querySelectorを見ていました。関数を呼び出す際に指定がなされておりました。
document.getElementByIdについてもしらべて両パターンでできるようにし学習を深めていきたいと思います。
丁寧な回答と返信ありがとうございました。