선택자(Selector)

선택자(Selector)란,

1. 태그(tag)를 이용해서 불러오는 방법

getElementByTagName()
다수의 element를 리턴하기 때문에 함수명에 복수형의 'elements'가 포함되어 있다.
해당 태그를 가진 요소를 모두 가져온다.

document.getElementsByTagName('div');

위 코드는 'div' 태그를 가지는 모든 element 목록을 찾아준다.

2. 아이디(id)를 이용해서 불러오는 방법

getElementById()
파라미터로 찾으려는 id를 전달하여, 해당 element를 찾을 수 있다.
id는 유일한 값이므로, 하나의 element만 리턴합니다.

아래의 코드는 HTML문서에서 id가 box인 요소를 가져온다.

document.getElementById('box');

3. 클래스(class)를 이용해서 불러오는 방법

getElementsByClassName()
클래스 이름으로 element를 찾아서, 이 클래스 이름을 가지는 모든 element 목록을 가져온다.
Element's'가 복수 형태이기 때문에 '모든 목록`을 가져온다.

다수의 클래스 이름을 모두 포함하고 있는 element를 찾을 때는
파라미터로 클래스 이름을 스페이스로 구분하여 넘겨줍니다.

document.getElementsByClassName('green blue');

위 코드는 클래스 이름에 'green'과 'blue' 모두를 포함하는 element를 찾아줍니다.

4. HTML의 요소들 중, 여러개의 태그 중 첫번째 태그 불러오는 방법

querySelector()
CSS 선택자로 찾은 여러개의 element 중 첫번째 element를 리턴한다.
파라미터로 입력받은 CSS선택자를 사용해서, element를 찾아준다.

document.querySelector('.pink);

위 코드는 pink라는 class 요소들 중 첫번째 요소를 가져온다.
물론 Unique한 속성이 있는 id요소에서도 #pink이런식으로 가져올 수 있다.

5. HTML의 요소들 중, 해당 모든 태그 불러오는 방법

querySelectorAll()
CSS 선택자로 찾은 element중 해당 element를 가진 모든 요소들을 리턴한다.

document.querySelectorAll('.blue');

위 코드는 blue라는 class요소들을 모두 가져온다.