바닐라 JS에서 dom 요소 불러오는 방법: #class, #id

querySelector는 css 속성자들을 이용하여 dom 요소를 불어올 수 있다. 

하지만 css 변수명을 불러올 수 있는 방법은 다양하다. 다음은 한 html 예시이다.

<form class="login-form">
      <input
        required
        max-length="15"
        type="text"
        placeholder="What is your name?"
      />
      <button>Login</button>
    </form>

 

다음과 같은 예시에서 form, input, button 태그들을 차례대로 불러오기 위해서는 두 가지 방법을 사용할 수 있다.

먼저 하나의 부모 요소를 먼저 선언하고, querySelector를 이용하여 자식 요소들을 또 다른 변수에 선언하여 불러올 수 있다.

 

다른 방법은 각각의 요소들을 'login-form'이라는 class나 id의 변수명을 입력하여 불러오는 것이다. 여기서 주의할 점은 class나 id명을 입력할 때 앞에 '#'을 붙여서 구분을 해야하는 것이다. 전자의 방법보다 후자의 방법이 여러번 변수를 선언할 필요없이 한 번에 원하는 dom 요소로 접근이 가능하기 때문에 가독성이 더 좋은 코드를 작성할 수 있기 때문에 후자를 더 지향한다.

// 부모 요소를 선언하고, 자식 요소를 선언하여 불러오기
const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");

// 직접 id와 class 명을 불러서 요소 불러오기
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");

출처:

1. 바닐라 JS로 크롬 앱 만들기: https://nomadcoders.co/javascript-for-beginners/lectures/2902