<JavaScript> Get Elements 예제 연습(querySelector(all))

JavaScript를 Backend에서 사용하기 전에 필요한 문법을 예제와 함께 빠르게 정리하고 있다. 일단 예제는 아래와 같은 HTML 코드가 있고, 이를 사용하여 element를 가져오는 querySelector를 연습한다.

1. 로그인 버튼, 가입하기 버튼 눌렀을 때 console 출력

        // #1. 로그인 버튼(btnLogin)을 눌렀을 때 console 출력
        document.querySelector("#btnLogin").onclick=function () {
          console.log(document.querySelector("#domain").value);
          console.log(document.querySelector("#userId").value);
          console.log(document.querySelector("#password").value);
        };


        // #2. 가입하기 버튼 (btnRegister)을 눌렀을 때 console 출력
        document.querySelector("#btnRegister").onclick=function () {
          console.log(document.querySelector("#userName").value);
          console.log(document.querySelector("#userEmail").value);
        };

2. Radio & check box

Radio: 여러 개의 radio 중에 현재 선택된 값을 가져오거나, 특정 radio가 선택되었는지 확인

          console.log("=======radio check=======");
          // #3. Radio check
          // #3-1. 여러 개의 radio 중에 현재 선택된 radio를 가져오고 싶을 때
          console.log(document.querySelector("input[name='gender']:checked").value);

          // #3-2. 특정 radio button (female)이 선택되었는지 확인
          if (document.querySelector("#female").checked) {
            console.log("female is checked!");
          }

checkbox : checkbox에서 선택된 항목 모두 출력, 특정 항목이 선택되었는지 확인

• checkbox에서는 복수 선택이 가능하기 때문에 선택된 항목을 모두 출력하기 위해서 querySelectorAll 사용

          console.log("=======check box=======");
          // #4. checkbox 
          // #4-1. 선택된 hobby모두 출력
          document
              .querySelectorAll("input[name='hobby']:checked")
              .forEach((el) => console.log(el.value));

          // #4-2. 특정 check box (movie)가 선택되었을 때 
          if (document.querySelector("#movie").checked) {
            console.log ("movie is selected!");
          }

3. Select

• HTML 코드에서 select는 복수 선택이 가능하게 만들어 놓았음
  <select name="major" id="major" multiple>

          console.log("=======select=======");
          // #5. select
          // #5-1. 선택된 항목 모두 출력
          document.querySelectorAll ("#major option:checked")
          .forEach((el)=> console.log(el.value));

          // #5-2. 특정 항목이 선택되었는지 확인
          if (document.querySelector("KL").checked) {
            console.log("KL is selected!");
          }

• 특정 항목이 선택되었는지 확인할 때 위와 같이 checked 를 사용했더니 오류가 났다 -> dir을 통해 확인을 해봄 -> selected:true를 확인
  
• selected를 사용하여 특정 항목이 선택되었는지 확인

          if (document.querySelector("#KL").selected) {
            console.log("KL is selected!");
          }

4. key event

• 키보드 입력이 발생했을 때 상황
• e.keyCode==13은 enter key를 의미
• onkeydown이 발생하였을 때 function은 arrow function으로 만들어 봄
• enter key일 때 자동으로 전송하는 부분을 막아주기 위해 e.preventDefault() 사용

        document.querySelector("#searchWord").onkeydown = (e) => {
          console.log("=======key event=======");
          
          console.log(e.keyCode);
          if (e.keyCode == 13) {
            console.log(e.target.value);
            e.preventDefault();
          }
        };