querySelector & textContent

오늘 배운 내용은 짧게 정리해봤다.

해당 부분은 추후 배울 DOM 주제에서 더 살펴볼 예정이다.

 

핵심은, 아래의 방법, querySelector와 textContent를 활용하여 텍스트 조회를하고 텍스트 내용을 변경할 수 있다는 점이다.

 

1. querySelector

 

document.querySelector를 활용하여 웹 페이지의 특정 엘리먼트 (Element) 를 선택/조회할 수 있다.

 

2. textContent

 

textContent를 활용하여 선택한 엘리먼트의 콘텐츠(Content)를 고칠 수 있다.

 

두 가지를 동시에 사용할 수도 있는데, 이를 통해 꽤 재미있는 시도들을 해볼 수 있다.

예를 들어, 기사 제목의 일부를 수정하거나, 네이버 실시간 검색어 1위를 바꿔 볼 수도 있다.

물론, 콘솔창에서 이렇게 수정하는 것은 우리의 화면에만 적용이 되는 것이고, 원본에는 아무 변화를 주지 못한다.