HTML 요소 선택 JS 함수 정리

1. document 객체 

 

JavaScript 에서 사용되는 전역 객체로, 현재 페이지의 DOM을 나타낸다. (최상위 객체)

DOM을 조작하고 제어하기 위해 사용한다.

 

2. document.getElementsByTagName(태그이름)

 

 해당 태그 이름의 요소를 모두 선택하며, NodeList를 리턴한다. 

1. document.getElementsByTagName('div'); 
/* 
	1. html페이지에서 div 태그를 모두 가져온다.  
*/

3. document.getElementById(아이디)

 

해당 아이디의 요소를 선택하며 아이디속성은 1개의 값을 가지므로 단일 객체를 리턴하고 해당 ID를 가진 요소가 없으면 null을 반환한다.  

1. document.getElementById('ElementID');
/* 
	1. html페이지에서 ID값이 ElementID를 요소로 선택한다. 
*/

4. document.getElementsByClassName(클래스이름)

 

해당 클래스의 요소를 선택하며 클래스 속성은 여러 개의 값을 가질 수 있어, NodeList를 리턴한다. 

1. document.getElementsByClassName('clName');
/* 
	1. html페이지에서 clName의 이름을 가진 클래스를 모두 가져온다. 
*/

5. document.getElementsByName(name속성값)

 

해당 name에 이름을 가진 요소를 선택하며, 여러 개의 값을 가질 수 있어 NodeList를 리턴한다.

1. document.getElementsByName('clName');
/* 
	1. html페이지에서 name속성값이 clName인 요소를 모두 가져온다. 
*/

6. document.querySelectorAll(선택자)

 

HTML 문서 내에서 지정된 CSS 선택자와 일치하는 모든 요소를 선택하며 NodeList를 리턴한다.

1. document.querySelectorAll('.test');
/* 
	1. test 이름을 가진 클래스를 모두 선택한다. 
*/

2. document.querySelectorAll('p *');
/* 
	2. p 태그 내의 모든 요소를 선택한다. 
*/

 

※ NodeList로 리턴하는 객체는 배열을 인덱스로 접근하며 사용한다. 

var test = document.querySelectorAll('.test');
/*
	1. test[0] --> 리턴받은 배열을 인덱스로 접근하며 첫 번째 test클래스 요소에 접근한다.
*/