JavaScript #13 DOM(Document Object Model)

2024. 7. 23. 20:48

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 버튼 클릭 시

728x90

저작자표시

'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

기록