DOM
DOM은 HTML 문서의 구조화된 표현이다. 웹 페이지의 각 요소는 객체로 표현되며, 이 객체들은 트리 구조를 형성한다. DOM을 통해 자바스크립트는 문서의 구조, 스타일, 콘텐츠를 동적으로 변경할 수 있다.
요소 선택
DOM 요소를 조작하기 위해서는 먼저 해당 요소를 선택해야 한다.
자주 사용되는 두 가지 방법으로 getElementById와 querySelector가 있다.
getElementById
getElementById 메서드는 문서에서 특정 ID를 가진 요소를 선택한다. ID는 문서 내에서 고유해야 한다.
const element = document.getElementById('myElement');
console.log(element); // 해당 ID를 가진 요소를 출력
querySelector
querySelector 메서드는 제공된 CSS 선택자에 매칭되는 첫 번째 요소를 반환하며 더 유연하게 요소를 선택할 수 있다.
const element = document.querySelector('.myClass');
console.log(element); // 해당 클래스를 가진 첫 번째 요소를 출력
const anotherElement = document.querySelector('#myElement');
console.log(anotherElement); // 해당 ID를 가진 요소를 출력
요소 조작
선택한 요소의 콘텐츠와 스타일을 변경할 수 있다.
getElementById나 querySelector는 요소를 선택하는 방법에만 차이가 있을 뿐 선택한 요소는 동일한 프로퍼티를 통해 조작할 수 있다.
innerHTML
innerHTML 프로퍼티는 요소의 HTML 콘텐츠를 설정하거나 가져온다. 요소 내부의 HTML 구조를 동적으로 변경할 수 있다.
const element = document.getElementById('myElement');
element.innerHTML = '<p>새로운 콘텐츠</p>';
style
style 프로퍼티는 인라인 스타일을 설정한다. 특정 요소의 CSS 스타일을 직접 변경할 때 유용하다.
const element = document.getElementById('myElement');
element.innerHTML = '<p>새로운 콘텐츠</p>';
classList
classList 프로퍼티는 요소의 클래스 목록을 조작하는 메서드를 제공한다. 이를 통해 클래스를 추가, 제거, 토글 할 수 있다.
const element = document.getElementById('myElement');
element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('activeClass');
이벤트 처리
DOM 요소에 이벤트를 처리하기 위해서는 addEventListener 메서드를 사용한다.
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('버튼이 클릭되었습니다!');
});
HTML 예제
간단한 HTML을 작성하고 요소를 가져와서 조작해 본다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Selection Example</title>
<style>
.highlight {
background-color: yellow;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="content">
<h1 id="header">Hello!</h1>
<p class="paragraph">This is a paragraph.</p>
</div>
<button id="changeContent">Change Content</button>
<button id="changeStyle">Change Style</button>
<button id="toggleClass">Toggle Class</button>
<script src="script.js"></script>
</body>
</html>
script.js
// 요소 선택
const header = document.getElementById('header');
const paragraph = document.querySelector('.paragraph'); // 클래스 선택자를 사용
const changeContentButton = document.getElementById('changeContent');
const changeStyleButton = document.getElementById('changeStyle');
const toggleClassButton = document.getElementById('toggleClass');
// 콘텐츠 변경
changeContentButton.addEventListener('click', function() {
header.innerHTML = 'Content has been changed!';
paragraph.innerHTML = 'The paragraph content has been changed!';
});
// 스타일 변경
changeStyleButton.addEventListener('click', function() {
header.style.color = 'blue';
paragraph.style.backgroundColor = 'lightgray';
paragraph.style.padding = '10px';
});
// 클래스 토글
toggleClassButton.addEventListener('click', function() {
paragraph.classList.toggle('highlight');
});
페이지 상태
Change Content 버튼을 클릭 시
Change Style 버튼 클릭 시
Toggle Class 버튼 클릭 시
'Program Language > JavaScript' 카테고리의 다른 글
| JavaScript #15 비동기 자바스크립트 (0) | 2024.07.23 |
|---|---|
| JavaScript #14 ES6+ 문법 (4) | 2024.07.23 |
| JavaScript #11 함수 (0) | 2024.07.23 |
| JavaScript #10 조건문과 반복문 (1) | 2024.07.23 |
| JavaScript #9 데이터 타입 (9) | 2024.07.22 |