querySelector() , querySelectorAll

Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다.

일치하는게 없으면 null을 반환합니다.

 

주의할 점 선택자에 해당하는 첫번째 요소만 선택한다

 

고정된?..자주쓰는거는 맨처음에 써주는게좋다

 

 

document.querySelector('li'); 는

• 태그를 의미한다.

document.querySelector('.activiteC); 는

• .이 들어가면 classname을 의미한다.

document.querySelector('#activiteI); 는

• #이 들어가면 ID를 의미한다.

 

 

 

문법

document.querySelector( 'selector' )

 

예를 들어

document.querySelector( '.input_button' )

는 클래스 값이 input_button인 첫번째 요소에 접근합니다.

 

 

예제

 

 

 

---

 

querySelectorAll

querySelector과 기본적인 동작방법은 같지만 모든 객체를 조회한다는 점이 다르다.

 

 

문법

document.querySelectorAll( 'selector' )

예를 들어

document.querySelectorAll( '.abc' )

는 클래스 값이 abc인 모든 요소를 가져옵니다.

document.querySelectorAll( '.abc, .def' );

클래스 값이 abc 또는 def인 모든 요소를 가져옵니다.

 

 

 

 

---

색상 바꿀부분 선택해서 바꾸기

---

class 전체 글씨 색상 바꾸기