[JavaScript] querySelector 함수 사용해보기

🌈  querySelector 함수 사용해보기

 

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

일치하는 요소가 없다면 null을 반환하게 된다.

 

👉 querySelector를 이용하여 신문기사 제목 내 맘대로 바꿔보기

 

 

위 기사 제목을 querySelector를 이용하여 내 맘대로 바꿔보자!

 

 

제목의 class 이름을 먼저 확인해보자. 이 기사의 경우에는 class 이름이 "media_end_head_headline" 으로 설정되어 있다.

 

console 창으로 넘어가 document.querySelector('.media_end_head_headline').textContent = "안녕하세요"; 

다음과 같이 입력하면 기사 제목이 안녕하세요로 바뀌어 있는 것을 확인할 수 있다. 

 

안녕하세요 대신 어떤 재밌는 말을 넣어도 작동하니 함수 사용법도 익힐겸 한 번씩 해보면 좋을 것 같다.