document에서 요소를 찾을 때

querySelector

• 클래스명, 아이디명 모두 검색 가능하다.
• 때문에 아이디인지 클래스인지 선택자를 명확하게 구분해주어야 한다.
• 더 구체적인 엘리먼트를 선택할 때 사용하면 좋다.

element = document.querySelector('#selectors');
element = document.querySelector('.selectors');

 

getElementById

• 아이디명으로 요소를 찾기 때문에 선택자 표시를 하지 않아도 된다.

element = document.getElementById('id');

 

selectElementByClassName

• 클래스명으로 요소를 찾기 때문에 선택자 표시를 하지 않아도 된다.

var products = document.getElementsByClassName("product");