HTML 요소 접근

JavaScript에서의 HTML 요소 접근

JavaScript에서 HTML의 요소를 제어하기 위해서 특정 Web API를 이용하여 요소를 선택해야한다. 

 

Document.querySelector()

선택된 선택자 또는 선택자 그룹과 일치하는 문서 내 첫 번째 Element를 반환한다.

일치하는 요소가 없으면 null을 반환한다.

 

let a = document.querySelector('.txt');
console.log(a);

txt라는 class를 가진 요소 중 첫 번째 요소를 반환한다.

---

Document.querySelectorAll()

선택된 선택자 그룹에 일치하는 document의 element list를 나타내는 NodeList를 반환한다.

 

let a = document.querySelectorAll('.txt');
console.log(a);

txt라는 class를 가진 모든 요소를 NodeList로 반환한다.

let a = document.querySelector('.txt');
console.log(a[0]);

요소를 배열 형태로 받아오기 때문에 index를 이용하여 특정 요소를 선택하는 것이 가능하다.

 

let a = document.querySelector('.txt');

function textColorChange(){
	for(var i = 0; i < a.lenght; i++) {
    	a[i].style.color = "red";
    }
}

배열 형태로 받아오는 document.querySelectorAll() 메서드의 특성과 for 구문을 이용하여 같은 class를 가진 요소들을 동시에 제어할 수 있다.