Element(div,p,span 등)의 내용을 불러오고, 그 내용을 변환경는 법을 알아보자.
Element의 내용 불러오기
<div class="name"> Apple </div>;위와 같이 class로 정의된 Element가 있다.
이 Element는
document.querySelector('.name');위와 같이 document.querySelector() (쿼리 셀렉터) 를 이용해서 불러낼 수 있다.
class를 불러올 때는 class 이름 앞에 ' . '를 붙여주고,
id를 불러올 때는 id 이름 앞에 ' # ' 를 붙여준다.
이렇게 불러온 Element를
const iLike = document.querySelector('.name');위와 같이 할당 또한 가능하다.
Element의 내용 변경하기
Element의 내용을 불러왔으면, 내용도 변경할 수 있다.
iLike.textContent = '변경할 내용'
위와 같이 불러온 Element에 .textContent를 붙인 뒤 내용을 변경한다.
console.log(iLike);
// Apple 출력
iLike.textContent = 'Iphone';
console.log(iLike);
// Iphone 출력
가보자!