JavaScript - DOM (1) — THE DEVELOPER

이번 포스팅에서는 JavaScript의 DOM에 대해 알아보도록 하겠다.

< DOM이란? >

DOM은 문서객체모델(DOM, Document Object Model)을 일컫는 말로 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 해당 객체 모델은 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공해 준다. 쉽게 말해 <html>이나 <body> 같은 html 문서의 엘리먼트들을 JavaScript가 이용할 수 있는 객체로 만든 것을 문서 객체라 하는데 이러한 문서객체를 인식하는 방식이 DOM이라고 할 수 있다.

DOM에 대해 조금 더 알아보고자 하는데 그 전에 window 객체에 대해 알아볼 필요가 있다. window 객체는 JavaScript의 최상위객체이자 전역객체이면서 모든 객체가 소속된 객체이다. 아래 사진을 보면서 이해해 보자.

위 사진에서 볼 수 있듯이 DOM, BOM, JavaScript는 최상위객체인 window 객체 밑에 소속되어 있는 객체들이라고 생각하면 된다. 이러한 객체들은 서로 계층적인 관계로 구조화 되어 있는데 DOM과 BOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다. 실제로 console.log( ) 사용해 window 객체를 살펴보면 아래와 같이 객체화되니 수많은 요소들로 구성되어 있는 것을 확인할 수 있다.

JavaScript를 이용하면 이러한 객체들을 제어할 수 있고 더 나아가 웹 브라우저를 제어할 수 있게 된다. HTML, CSS와 연결지어 설명해보면 JavaScript를 통해 원하는 엘리먼트들을 가져와서 속성값을 추가하거나 css를 부여하거나 하는 기능들을 수행할 수 있게 되는 것이다. 이러한 과정 속에서 등장하는 것이 바로 DOM, 즉 문서 객체 모델이고 이는 구조화된 문서를 표현하는 형식이라 할 수 있다.

< JavaScript를 이용해 브라우저 조작해보기 >

DOM을 통해 우리는 브라우저에 어떤식으로 문서객체들이 존재하는지 알 수 있었다. 간단한 코드를 구현해 보면서 어떤식으로 JavaScript가 문서객체들을 조작하는지 살펴보도록 하자.

<!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>Document</title>
</head>
<body>

    <button id='btn'>버튼</button>
 
</body>
</html>

html의 <button>엘리먼트를 이용해 버튼을 하나 만들고 해당 버튼을 클릭할 때마다 아래 사진에서와 같이 "hello world!"가 콘솔창에 출력되도록 JavaScript 코드를 작성해보고자 한다.

<button>엘리먼트 아래에 다음과 같이 JavaScript 코드를 작성해주면 된다.

<!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 , BOM</title>
</head>
<body>
    <button id='btn'>버튼</button>

    <script type="text/javascript">
    
        function clickBtn(){
            console.log('hello world!')
        }
        
        let btn = document.querySelector("#btn")      
        btn.addEventListener('click', clickBtn)

    </script>
</body>
</html>

이제 하나하나 코드를 뜯어보면서 이해해보도록 하자.

우선 clickBtn( ) 이라는 함수를 정의해서 해당 함수가 실행될 때마다 console.log("hello world!")가 실행되도록 하였다. 그리고 변수 btn을 선언하고 document.querySelector("#btn")을 btn에 할당하였다. 여기서 우리는 document.querySelector( )가 어떠한 기능을 수행하는지 자세히 알아볼 필요가 있다.

브라우저의 주소창에 url을 입력하게 되면 해당 텍스트 파일을 서버로부터 가져와서 브라우저에 랜더하게 된다. 즉, 우리가 url을 입력하고 엔터를 치는 순간 브라우저에는 HTML, CSS, JavaScript의 코드들이 내려받아지게 되는데 이런 코드들이 실행되는 페이지를 통틀어서 document라고 한다. window 객체 안에 존재하는 문서 객체라고 생각하면 편할 것 같다. 중요한 것은 이 document가 객체라는 사실이다. 브라우저의 window 객체 안에는 document라는 객체가 이미 존재하고 있고 이 document 객체의 안에는 querySelector( )라는 메소드가 존재하고 있는 것이다.

document 객체 안에 존재하고 있는 querySelector( ) 메소드는 인자값으로 css 선택자를 받는다. 위의 적혀 있는 코드를 자세히 보면 <button>엘리먼트에 id="btn"으로 id값을 부여해 준것을 확인할 수 있다. 이 id값과 querySelector를 이용해 <button id="btn">엘리먼트를 가져오게 되는 것이다. 이 때 querySelector( ) 메소드가 반환하는 값의 데이터 타입은 객체 형태라는 사실을 명심해야 한다. 정리해보면, document.querySelector("#btn")을 통해 id="btn"인 html 내용을 객체 형태로 반환해서 가져오고 변수 btn에 할당하게 되는 것이다.

let btn = document.querySelector("#btn")

document.querySelector("#btn") : html 문서에서 id="btn"인 element를 가져온다.
가져온 element의 데이터 타입은 object(객체)이다.

다음으로는 btn.addEventListener("click", clickBtn)에 대해 알아야 한다. btn 변수에 할당된 것이 객체이기 때문에 해당 객체 안에는 여러 속성과 메소드가 존재할 것이고 우리는 그 중 addEventListener( ) 메소드를 사용한 것이다. 주의해야 할 것은 html에 관련된 객체(object)이여야만 addEventListener( )를 사용할 수 있다는 점이다. 또한 여기서 짚고 넘어가야할 핵심 포인트는 addEventListener( ) 메소드가 어떠한 행동을 하는지와 어떠한 인자값을 받는지를 파악하는 것이다. addEventListener의 주요한 인자값은 2개이며 첫번째 인자값은 이벤트명을 string 형태로 넣어주고 두번째 인자값으로는 콜백(callback) 내용을 넣는다.

btn.addEventListener("click", clickBtn)

첫번째 인자값으로 "click"이라는 텍스트를 string 형태로 넣어주었다. 이 부분은 어떠한 이벤트를 넣고 싶은지에 따라 그 값이 달라지게 된다. 웹 브라우저에서 일어날 수 있는 사건들을 이벤트(event)라고 하는데 예를 들어 뭔가를 클릭한다거나, 내용이 변했을 때 체크를 한다거나 같은 것들을 이야기 한다. 여기서 우리는 "click"이라는 이벤트를 넣어 준 것이다. 두번째 인자값으로는 앞서 정의했던 함수 clickBtn( )의 함수명을 넣어줌으로써 해당 함수를 콜백하도록 하였다. 이로써 버튼을 클릭하는 이벤트인 "click"이 발생했을 때 btn.addEventListener("click", clickBtn)에 의해 clickBtn( ) 함수가 콜백되고 clickBtn( ) 함수의 console.log("hello world!")가 실행되게 되는 것이다.

'JavaScript' 카테고리의 다른 글

JavaScript ES6 - 템플릿 리터럴 , 객체 리터럴 , 구조분해 할당 (0)	2022.01.27
JavaScript - DOM (2) (0)	2022.01.12
JavaScript - 콜백(callback) (0)	2022.01.10
JavaScript - 얕은복사 , 깊은복사 (0)	2022.01.07
JavaScript기초 - 정리(4) 배열(array) , 객체(object) (0)	2022.01.04

< DOM이란? >

< JavaScript를 이용해 브라우저 조작해보기 >

'JavaScript' 카테고리의 다른 글

티스토리툴바