프로그래밍 일기 — React를 알아보자 4

15 min readJan 20, 2024

DOM(Document Object Model) 파헤치기

JavaScript에 대한 기초 적인 문법과 자료 구조, 함수 및 반복문에 대한 규칙에 대해서는 이해하였다. 여기서 한발 더 나아간다면 무엇이 기다리고 있을까? 바로 DOM(Document Object Model)이라는 것이다. “문서 객체 모델”이라고 번역되는 이 용어는 오늘날 JavaScript가 프론트엔드 웹 개발 언어로써 널리쓰이는 중요한 이유 중 하나라고 할 수 있다. 그렇다면 긴 말 필요없이 과연 이 마법문서가 무엇인지 한번 알아보자.

DOM(Document Object Model)

웹 문서의 프로그래밍 인터페이스(API)이다.
HTML혹은 XML 형태의 문서를 트리같은 구조로 표현하며, 각 노드는 HTML/XML 문서의 각각 다른 부분을 나타낸다.
JavaScript로 노드를 선택하거나, 크기나 색등 속성을 변경하거나, 노드를 추가하고 삭제하는 방식으로 DOM을 조작할 수 있다.
W3C DOM 표준은 크게 3가지로 나뉘어 진다

W3C DOM 표준

Core DOM: 모든 문서 타입에 대한 표준 모델
XML DOM: XML 문서에 대한 표준 모델
HTML DOM: HTML 문서에 대한 표준 모델

가장 널리 쓰이는 DOM 접근 방식

document.getElementById(id) : id 로 접근
document.getElementsByClassName(className) : class 로 접근
document.getElementsByTagName(tagName) : 태그 이름으로 접근
document.querySelector(selector) : 입력한 CSS Selector와 매칭되는 첫 번째 부분을 리턴
document.querySelectorAll(selector) : 입력한 CSS Selector와 매칭되는 모든 부분을 리턴

<!-- DOM 요소 접근 예제-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
    <h1>
        DOM Selectors
    </h1>
    <div id="hello"> <!-- DOM요소에 Id 부여 -->
        Hello World!
    </div>
    <div>
        Hi There!
    </div>
    <ul>    <!-- DOM요소에 class 부여 -->
        <li class="green">item 1</li>
        <h2>item 2</h2> 
        <h3 class="blue">item 3</h3>
        <h3 class="blue">iten 3</h3> 
        <h3 class="red">item 4</h3>
        <h3 class="red">item 4</h3>
    </ul>
    <script>
        console.log(document.getElementById('hello'));  // id로 DOM 요소 접근
        let items = document.getElementsByClassName('green');   // class로 DOM 요소 접근
        console.log(items);
        let tags = document.getElementsByTagName('h2'); // tag 이름으로 DOM 요소 접근 
        console.log(tags);
        let query = document.querySelector('.blue');   // css selector = "blue" 를 갖는 첫 번째 요소 리턴(console 확인시)
        console.log(query);
        let queryAll = document.querySelectorAll('.red'); // css selector = "red" 를 갖는 모든 요소 리턴(console 확인시)
        console.log(queryAll);
    </script>
</body>
</html>  

>> 개발자 도구의 console 출력

<div id="hello"> <!-- DOM요소에 Id 부여 -->
        Hello World!
    </div>
<li class="green">item 1</li>
<h2>item 2</h2>
<h3 class="blue">item 3</h3>
<h3 class="red">item 4</h3>
<h3 class="red">item 4</h3>

DOM 조작하기

웹 페이지 전체를 다시 불러오지 않고도, 특정 웹 페이지에 대해 동적으로 DOM요소를 추가, 삭제, 수정 등의 조작을 할 수 있다.
먼저, 조작하고자하는 DOM요소를 selector를 통해 선택한다.
이후, 선택된 요소의 속성에 접근해 내용, 속성, 스타일 등을 수정한다.

<!-- DOM 요소 조작 예제 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
    <h1>
        DOM Selectors
    </h1>
    <script>
        console.dir(document);  // 전체 웹 페이지의 속성과 사용가능한 메서드를 볼 수 있다.
        console.log(document.domain);  // 웹 페이지의 도메인 주소
        console.log(document.URL);  // 웹 페이지의 URL
        console.log(document.body); // 웹 페이지의 body
        document.title = "dom manipulation";  // 웹 페이지의 타이틀 명기
        
        const body = document.body;  // 웹 페이지의 body를 변수에 저장
        body.append('hello');  // body에 새로운 문자열 더하기
        
        const div = document.createElement('div');  // 새로운 DOM 요소 생성
        console.log(div);   // DOM 요소 출력
        div.innerText = 'JavaScript';   // div요소에 넣을 문자열 정의
        body.append(div);    // body에 div요소 넣기

        // body.removeChild(div);  // body에서 요소 삭제
        // body.remove();   // 웹 페이지의 모든 요소를 삭제
    </script>
</body>
</html>

console.dir(document)로 웹 페이지의 모든 구성 요소와 사용가능한 메서드를 볼 수 있다.

웹 페이지와 콘솔에서 JavaScript상에서 코딩한 내용으로 DOM요소를 조작 및 출력할 수 있다.

웹 페이지 속성 및 스타일 조작

웹 페이지 요소의 외형과 행위를 동적으로 조작할 수 있다.
스타일을 조작하려면, 특정 요소의 style 속성에 접근하여 CSS 스타일을 수정할 수 있다. 주로 document.getElementById(id).style.property={적용하려는 스타일} 의 문법을 쓴다.
setAttribute 메서드를 활용해 특정 요소에 속성을 추가 혹은 수정할 수 있다.

<!--DOM 요소 조작 예제 - 속성 및 스타일-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
    <h1>
        DOM Selectors
    </h1>
    <div> <!--div 요소-->
        <span id="one" name="First">First Span</span>   <!--Span 요소--> 
        <span id="two" name="Second">Second Span</span> <!--Span 요소-->
    </div>
    <script>
        const div = document.querySelector('div');  // div 요소 선택
        const spanOne = document.getElementById('one'); // id='one'인 요소 선택
        const spanTwo = document.getElementById('two'); // id='two'인 요소 선택

        console.log(spanOne.getAttribute('name'));  // spanOne의 name 이라는 속성을 선택해 출력 
        spanOne.setAttribute('name', 'abcde');  // spanOne요소의 name 속성 값을 'abcde'로 변경
        // spanOne.removeAttribute('name');    // spanOne의 name 속성 삭제

        spanOne.id = 'any'; // spanOne의 id 속성 값 변경

        spanTwo.classList.add('new-class'); // spanTwo의 새로운 클래스 class의 속성값 "new-class" 정의
        // spanTwo.classList.remove('new-class'); // spanTwo의 새로운 클래스 class의 속성값 "new-class" 정의

        spanOne.style.color = 'red';    // spanOne의 색을 빨간색으로 변경
        spanTwo.style.backgroundColor = 'green';    // spanTwo의 배경색을 초록색으로 변경
    </script>
</body>
</html>

이벤트(Event)/Event Listener

JavaScript에서 이벤트란 웹 페이지 상에서 일어나는 행위나 사건들을 말한다.
동적이고 상호작용 가능한 웹 페이지를 만드는데 있어 필수적인 요소이다.
예를 들어 웹 페이지 상에 버튼이 있다면, 버튼을 누름으로써 어떠한 행위를 하게된다.
Event listener라는 것을 사용해 이벤트를 감지한다.
기본적으로 bubbling progration(DOM 요소의 자녀(child)부터 부모(parent)를 향하는 방향으로)의 형태로 이벤트가 발생한다. HTML 내부 혹은 별도의 JavaScript 파일로 이벤트를 적용할 수 있다.
대표적으로 클릭 이벤트(click event), 입력 이벤트(input event), 로딩 이벤트(load event), 마우스오버 이벤트(mouseover event)등이 있다.
상호작용이 가능한 웹 사이트를 만드는데 있어 버튼 클릭, 키 누름 등의 유저 입력에 응답하는 것은 유저 경험(UX)측면에서 매우 중요하다.
버튼 누름 및 마우스 클릭 등 유저 입력에 대한 이벤트는 DOM요소 인터페이스를 대상으로 트리거되나, 리소스를 불러오는 등의 이벤트는 윈도우 인터페이스를 대상으로 트리거된다.

<!--DOM 요소 조작 예제 - 이벤트 1-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
    <button id="myButton">  <!-- 버튼 요소 -->
        Click me
    </button>
    <input id="searchBox" type="text"/> <!-- 입력 요소 -->
    <script>
        // 버튼 클릭 이벤트
        const button = document.querySelector('#myButton'); // 버튼 요소 선택
        button.addEventListener('click', () => {
            alert('Hello World!') // 인자 1: 이벤트 타입, 인자 2: Callback 함수
        })    
        // 키 누름 이벤트
        const searchBox = document.querySelector('#searchBox');  // 입력 요소 선택
        searchBox.addEventListener('keyup', () => {
            console.log('Event triggered!')  // 인자 1: 이벤트 타입, 인자 2: Callback 함수
        })
    </script>
</body>
</html>

Event Listner를 활용해 사용자 입력에 대해서 다양한 반응 행위를 정의할 수 있다.

<!--DOM 요소 조작 예제 - 이벤트 2-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
    <style>  <!-- toggle 활용시 사용할 효과를 위한 스타일 정의 -->
        .completed{
            text-decoration: line-through;
            color: gray;
        }
    </style>
</head>
<body>
    <h1>Todo List</h1> 
    <ul> <!--unordered list-->
        <li>Buy groceries</li> 
        <li>Do laundry</li>
        <li>Clean house</li>
    </ul>  
    <script>
        const listItems = document.querySelectorAll('li');  // li 요소 모두 선택
        listItems.forEach(item => {  
            item.addEventListener('click', () => {  // 인자 1: 이벤트 타입, 인자 2: Callback 함수
                item.classList.toggle('completed')  //  toggle 버튼
            })
        })
    </script>
</body>
</html>