[Javascript] 선택자, DOM 특정 요소(element) 찾기

 

Javascript에서 DOM의 특정 요소(element)를 찾는 방법을 정리합니다.

 

1. getElementById()
2. getElementsByClassName()
3. getElementByTagName()
4. querySelector()
5. querySelectorAll()

 

 

1. getElementById()

 

document.getElementById();

파라미터로 찾으려는 id를 전달하여, 해당 element를 찾을 수 있습니다.

id는 유일한 값이므로, 하나의 element만 리턴합니다.

 

 

2. getElementsByClassName()

 

document.getElementsByClassName('my_class');

클래스 이름으로 element를 찾아서,

이 클래스 이름을 가지는 모든 element 목록을 리턴합니다.

이 함수의 이름을 자세히 보면 getElementsByClassName으로

Element's'가 복수 형태인 것은 이 함수가 목록을 리턴하기 때문입니다.

 

 

 

document.getElementsByClassName('red blue');

다수의 클래스 이름을 모두 포함하고 있는 element를 찾을 때는

파라미터로 클래스 이름을 스페이스로 구분하여 넘겨줍니다.

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

 

 

3. getElementByTagName()

 

document.getElementsByTagName('div);

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

이 함수 역시, 다수의 element를 리턴하기 때문에

함수명에 복수형의 'elements'가 포함되어 있습니다.

 

 

4. querySelector()

DOM에서 원하는 element를 찾기 위해서 querySelector() 를 사용할 수도 있는데,

이 함수는 파라미터로 입력받은 CSS선택자를 사용해서, element를 찾아줍니다.

 

querySelector() 함수는,

파라미터로 입력받은 CSS 선택자로 찾은 여러개의 element 중 첫번째 element를 리턴합니다.

 

 querySelector() - ID로 찾기 

document.querySelector('#div_1');

id이름 앞에 '#'를 붙여서 파라미터로 넘겨줍니다.

위 예제는 id가 'div_1'인 element를 찾아서 리턴합니다.

 

 querySelector() - Class 이름으로 찾기 

 

document.querySelector('.my_class');

클래스 이름으로 element를 찾기위해서 

클래스 이름 앞에 '.'을 붙여서 파라미터로 넘겨줍니다.

위 예제는 class가 'my_class'인 element 중 첫번째 element를 리턴합니다.

 

 querySelector() - Tag 이름으로 찾기 

 

document.querySelector('div');

태그 이름으로 element를 찾을 때는 태그명을 문자열로 넘겨줍니다.

위 예제는 div태그를 가지는 element 중 첫번째 element를 리턴합니다.

 

 querySelector() - 선택자 ','로 구분하기 

 

document.querySelector('.red, .green');

선택자를 ','로 구분하여 전달하면 여러개의 선택자 중 첫번째로 발견되는 element를 리턴합니다.

이때, 파라미터를 여러개 넘기는 것이 아니라,

선택자를 ','로 구분한 문자열 1개가 파라미터로 넘어간다는 것에 유의하세요.

 

 

5. querySelectorAll()

사용법은 querySelector() 와 같습니다.

다만, querySelectorAll()은 이름에서 알수 있듯이,

CSS선택자(파라미터로 넘겨준)로 찾은 모든 element 목록을 리턴합니다.

 

 querySelectorAll() - ID로 찾기 

 

 querySelectorAll() - Class 이름으로 찾기 

 

 querySelector() - Tag 이름으로 찾기 

 

 querySelectorAll() - 선택자 ','로 구분하기 

 

document.querySelectorAll('.red, .green');

querySelect()와 마찬가지로 선택자를 ','로 구분한 문자열을 넘겨주면

각각의 선택자에 해당하는 모든 element를 리턴합니다.

위 예제는 클래스가 'red'인 element와 'green'인 element를 리턴합니다.

 

---

 

DOM에서 특정 요소(element)를 검색하는 여러가지 방법을 알아보았습니다.