자바스크트 선택자 질문입니다.

인풋안에 값이 없는것을 체크하는 강의를 듣다가 질문이 있습니다.

만약 인풋안에 값이 없을 때 얼럿을 출력한다면

html 
                    <input type="text" class="form-control" id="eid">

script
        $('form').on('submit', function (e) {
            if (document.querySelector('#eid').value == '') {
                alert('아이디 입력하세요');
                e.preventDefault();
            }
        });


위 경우에는 얼럿이 실행되지만

           if (document.querySelectorAll('#eid').value == '')

document.querySelectorAll 을 하면 실행이 안되는데 왜 그런건가요?