DOM & 이벤트: HTML/CSS/JS 문서 객체 조작, 클릭률 높이는 핵심 기술!
웹 브라우저랑 친해지기: HTML 요소 가지고 놀기!
우리가 웹 브라우저한테 "이거 보여줘!" 하고 시키면, 브라우저는 HTML 코드를 읽어서 화면에 예쁘게 보여줘. 근데 그냥 보여주는 게 아니라, 머릿속으로 HTML 구조를 그림처럼 그려놓고, 그 그림 속에서 우리가 원하는 부분을 딱딱 골라낼 수 있게 준비해 둔다는 거야.
이제 우리는 그 그림 속에서 원하는 부분을 골라내는 방법도 배웠고, 오늘은 그 골라낸 부분을 가지고 이것저것 바꿔보는 방법을 배울 거야! 마치 레고 블록을 조립하고 분해하는 것처럼 말이지.
1. 글자 바꾸기 대장들: textContent, innerText, innerHTML
우리가 어떤 글자를 보여주고 싶을 때, 이 세 가지 친구들을 쓸 수 있어. 이름은 비슷비슷해 보이지만, 조금씩 다른 점이 있거든.
예시 코드:
<p id="content">
Hello <span>JavaScript</span>
</p>
이 코드에서 <span>JavaScript</span> 부분은 CSS 때문에 화면에 안 보이게 숨겨놨다고 생각해보자.
-
textContent: 이 친구는 숨겨진 글자까지 전부 다 가져와. 그러니까Hello JavaScript이렇게 다 보여주는 거지. HTML 태그는 그냥 글자로 취급해. -
innerText: 이 친구는 딱 우리 눈에 보이는 것만 가져와. CSS 때문에 숨겨진 건 안 보여주지. 그래서 이 경우에는Hello만 가져올 거야. -
innerHTML: 이 친구는 HTML 태그까지 그대로 가져와. 그러니까Hello <span>JavaScript</span>이렇게 태그까지 전부 다 보여주는 거지.
글자 바꾸기도 가능!
이 친구들은 글자를 가져오기만 하는 게 아니라, 새로운 글자를 넣어줄 수도 있어.
// textContent로 글자 바꾸기
document.getElementById('content').textContent = 'Hello New World';
// innerText로 글자 바꾸기
document.getElementById('content').innerText = 'Hello New World';
// innerHTML로 글자 바꾸기 (태그도 같이 넣을 수 있어!)
document.getElementById('content').innerHTML = 'Hello <strong>New World</strong>';
이렇게 바꾸면 화면에 보이는 글자가 바뀌겠지?
근데 잠깐! 글자를 바꿀 때 textContent랑 innerText는 비슷해 보이지만, 기존 내용에 글자를 더할 때 조금 다른 점이 있어.
textContent는 원래 있던 글자 사이의 띄어쓰기까지 그대로 인식해서 더해줘.innerText는 눈에 보이는 것만 가져오기 때문에, 원래 있던 글자 끝에 띄어쓰기가 있어도 그걸 인식 못하고 바로 붙여버릴 수 있어.
그래서 나중에 프로젝트 할 때는 textContent를 더 많이 쓰게 될 거야!
2. 스타일 바꾸기 대장: style
이제 글자 색깔을 빨간색으로 바꾸거나, 글자 크기를 키우고 싶을 때 쓰는 방법이야.
<p id="myText">이건 내 글씨야!</p>
const myTextElement = document.getElementById('myText');
// 글자 색깔을 빨간색으로 바꾸기
myTextElement.style.color = 'red';
// 글자 크기를 20px로 바꾸기
myTextElement.style.fontSize = '20px';
주의할 점! CSS에서 background-color처럼 하이픈(-)이 들어가는 속성은 자바스크립트에서는 backgroundColor처럼 카멜 케이스(단어마다 첫 글자를 대문자로)로 바꿔서 써야 해.
3. 클래스로 스타일 덩어리 옮기기: classList
만약에 스타일을 20개나 바꿔야 한다면, style 속성을 20번이나 쓰는 건 너무 귀찮잖아? 이럴 때는 미리 CSS 파일에 "스타일 덩어리"를 만들어 놓고, 자바스크립트로 그 덩어리를 요소에 붙였다 뗐다 하는 게 훨씬 편해.
<p id="myParagraph">이건 내 문단이야!</p>
/* CSS 파일에 이렇게 미리 만들어 놓는 거야 */
.highlight {
color: blue;
font-weight: bold;
}
const myParagraphElement = document.getElementById('myParagraph');
// 'highlight' 클래스 추가하기
myParagraphElement.classList.add('highlight');
// 'highlight' 클래스 삭제하기
myParagraphElement.classList.remove('highlight');
// 'highlight' 클래스가 있으면 없애고, 없으면 추가하기 (토글!)
myParagraphElement.classList.toggle('highlight');
classList를 쓰면 이렇게 클래스를 쉽게 추가하고 삭제할 수 있어.
4. 나만의 속성 만들기: dataset
HTML에서는 data- 라는 접두사를 붙여서 나만의 속성을 만들 수 있어. 이걸 자바스크립트에서 가져오거나 바꿀 때 dataset을 사용해.
<button data-id="123">버튼 1</button>
<button data-id="456">버튼 2</button>
const buttons = document.querySelectorAll('button'); // 모든 버튼을 가져와
buttons.forEach(button => {
// data-id 값 가져오기
console.log(button.dataset.id);
// data-id 값 바꾸기
button.dataset.id = 'newId';
});
이렇게 dataset을 사용하면 나만의 속성을 쉽게 다룰 수 있어.
5. 속성 조작의 만능 도구: setAttribute, getAttribute, removeAttribute
이 세 가지 메서드는 HTML에 있는 거의 모든 속성을 다 조작할 수 있는 만능 도구야.
<a id="myLink" href="https://www.google.com">구글 링크</a>
const myLinkElement = document.getElementById('myLink');
// href 속성 값 가져오기
console.log(myLinkElement.getAttribute('href')); // https://www.google.com
// href 속성 값을 네이버로 바꾸기
myLinkElement.setAttribute('href', 'https://www.naver.com');
// 새로운 속성 추가하기 (target 속성)
myLinkElement.setAttribute('target', '_blank'); // 새 창으로 열리게 함
// href 속성 삭제하기
myLinkElement.removeAttribute('href');
classList와 setAttribute의 차이점?
클래스를 추가할 때 myElement.classList.add('red') 와 myElement.setAttribute('class', 'red') 는 비슷해 보이지만, 중요한 차이가 있어.
classList.add(): 기존 클래스를 유지하면서 새로운 클래스를 추가해줘.setAttribute('class', ...): 기존 클래스를 싹 지우고 새로운 클래스로 덮어써버려.
그래서 기존 클래스를 유지하고 싶을 때는 classList를, 완전히 새로운 값으로 바꾸고 싶을 때는 setAttribute를 쓰는 게 좋아.
이제 우리는 HTML 요소를 선택하고, 그 안의 글자를 바꾸거나, 스타일을 바꾸거나, 나만의 속성을 추가하는 등 다양한 방법으로 요소를 조작할 수 있게 되었어! 다음 단계에서는 이런 조작들을 더 멋지게 활용하는 방법을 배울 거야!