DOM

Jeongyun Heo·2021년 11월 14일
0

DOM (Document Object Model)

DOM이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다.
JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다.
DOM은 HTML인 웹페이지와 스크립팅 언어(JavaScript)를 서로 이어 주는 역할을 한다.
document라는 전역객체를 통해 접근할 수 있다.
JavaScript의 document 객체는 DOM 구조를 접근하는 관문이며,
document 객체는 HTML 문서를 나타낸다고 말할 수 있다.

HTML과 JavaScript를 연결시켜주는 DOM
정적인 HTML 페이지에 JavaScript 코드를 적용하여 동적으로 만들어주는 DOM

브라우저가 HTML 문서를 내부적으로 표현하는 표준 모델

웹 페이지가 적재되면 브라우저는 페이지의 문서 객체 모델(DOM: Document Object Model)을 생성한다.

DOM은 HTML 문서의 계층적인 구조를 트리(tree)로 표현한다.
트리라고 하는 이유는 나무와 비슷하기 때문이다.

트리에 있는 하나의 잎을 노드(node)라고 한다.
DOM에서 노드(node)는 문서 안에 들어 있는 요소나 텍스트를 나타낸다.

트리에는 부모 노드, 자식 노드, 형제 노드의 개념이 있다.

우리는 자바스크립트를 사용하여 DOM 트리를 순회하면서 페이지 안 요소의 내용이나 속성, CSS 스타일을 우리 마음대로 변경할 수 있다. 즉 동적으로 웹 페이지의 내용과 스타일을 변경할 수 있는 것이다. 또 각각의 요소에서 발생하는 이벤트에 반응하는 코드를 작성할 수 있다.

DOM과 BOM
자바스크립트에서는 HTML 문서와 웹 브라우저를 객체로 간주하여 처리하게 된다.
HTML 문서를 객체로 표현한 것을 DOM이라고 하고
웹 브라우저를 객체로 표현한 것을 BOM(Browser Object Model)이라고 한다.

BOM                   DOM
window - document --- forms[], anchors[], layers[], images[]
       - frames[]
       - history
       - location
       - navigator
       - screen

그림에서 알 수 있듯이 BOM이 DOM을 포함하고 있다.

트리의 최상위 노드는 window 객체이다. window 객체는 브라우저 그 자체를 표현한다.
모든 객체는 window 객체 아래에 있다. window 객체 안에는 많은 자식 객체가 있는데 그 중의 하나가 document 객체이다.
브라우저에 있는 모든 것이 객체로 표현되어 있기 때문에 자바스크립트에서는 객체의 속성을 변경하고 객체의 메서드를 호출해주면 웹 브라우저에 대한 거의 모든 것을 제어할 수 있다.

노드의 종류

DOM에 존재하는 노드는 다음과 같이 분류할 수 있다.

  • DOCUMENT_NODE :
    DOM 트리의 루트 노드이며 HTML 문서를 나타낸다.
    window, document가 바로 DOCUMENT_NODE 타입의 노드이다.
  • ELEMENT_NODE :
    HTML 요소를 나타내는 노드이다. <body>, <a>, <p>, <script>, <h1> 등을 나타내는 노드이다.
  • ATTRIBUTE_NODE :
    요소의 속성을 나타내는 노드이다. class="btn"와 같은 속성을 나타내는 노드이다.
  • TEXT_NODE :
    요소 안에 들어 있는 텍스트를 나타내는 노드이다.

HTML 요소 찾기

id로 HTML 요소 찾기
요소를 객체 형태로 반환한다. 요소 자체를 반환한다.
요소가 발견되지 않으면 x는 null이 된다.

const x = document.getElementById("main")

요소의 내용을 추출하려면 innerHTML을 사용하면 된다.
요소의 내용(content)은 innerHTML으로 접근하고 수정할 수 있다.
innerHTML은 요소가 가지고 있는 contents를 가져온다.
innerHTML은 요소의 시작 태그와 종료 태그 사이에 놓여진 모든 HTML 코드와 텍스트를 의미한다.

alert(document.getElementById("main").innerHTML)

HTML 변경하기

createElement / innerHTML / querySelector / appendChild

HTML 문서가 직접 변경되는 것은 아니고 DOM만 변경된다.

  • 요소의 내용 변경하기
  • 요소의 속성 변경하기
  • 요소의 스타일 변경하기

요소의 내용 변경하기

DOM을 사용하면 자바스크립트로 HTML 요소의 내용을 쉽게 변경할 수 있다.

요소의 속성 변경하기

요소의 스타일 변경하기

DOM 노드 삭제와 추가

새로운 HTML 요소 생성

  1. 추가하기를 원하는 노드를 생성한다.
  2. 문서 내에서 추가할 위치를 찾는다.
  3. 새로운 노드를 기존의 노드에 연결한다.

노드 생성
document 객체의 createTextNode() 메서드를 호출하면 된다.
document.createTextNode()는 텍스트 데이터를 가진 노드를 생성하여 반환한다.

const node = document.createTextNode("동적으로 추가된 노드");

// 텍스트 데이터를 가진 노드를 생성한다.

노드가 생성되면 문서 트리에서 노드를 추가할 위치를 찾아야 한다. 가장 많이 사용되는 방법이 id를 이용해서 탐색하는 방법이다. id로 찾으려면 document.getElementById()를 호출한다. 이 메서드는 객체를 반환한다.

const parent = document.getElementById("target");

// id가 target인 요소를 찾아서 반환한다.

노드를 다른 노드의 자식 노드로 추가하려면 appendChild()를 사용한다. 

parent.appendChild(node);

기존의 HTML 요소 삭제

HTML 요소를 삭제하려면 부모 노드를 알아야 한다.

브라우저 객체 모델 (BOM)

브라우저 객체 모델은 웹 브라우저가 가지고 있는 모든 객체를 의미한다.

최상위 객체는 window이고 그 아래로 navigator, location, history, screen, document, frames 객체가 있다.

window 객체
window 객체는 BOM에서 최상위 객체로서 웹 브라우저 윈도우를 나타내고 있다.
모든 전역 자바스크립트 객체, 함수, 변수는 자동적으로 window 객체의 멤버가 된다.
모든 전역 변수는 윈도우 객체의 속성이다.
모든 전역 함수는 윈도우 객체의 메서드이다.
다음 2개의 문장은 동일하다. alert() 함수가 window 객체의 메서드이기 때문이다.
alert("Hello World") ⟷ window.alert("Hello World")

이벤트 처리

이벤트가 발생했을 때 특정 동작을 실행
interaction은 HTML이나 CSS만으로 구현할 수 없고 자바스크립트 코딩이 필요하다.
이렇게 특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 합니다.

  • 클릭 이벤트
  • 마우스 이벤트
  • 스크롤 이벤트
  • 터치 이벤트
  • resize(화면 크기 변화) 이벤트

등 다양하다.

JavaScript에서 이벤트를 감지하고 그에 맞는 결과를 내어줄 수 있도록 프로그래밍을 작성해야 한다.

addEventListener
addEventListener는 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 특정 이벤트가 발생하면 인자로 받은 함수를 실행시켜줍니다.

addEventListener(이벤트 종류, 이벤트 trigger 시 실행될 함수)

특정 요소에 addEventListener 함수를 붙이고(호출하고), 인자로 이벤트 종류와 이벤트가 발생했을 때 실행할 함수를 전달한다. 인자로 전달된 함수를 콜백 함수라고 한다.

요소.addEventListener(이벤트종류, function() {
  // 이벤트가 일어났을 때 실행할 내용
});

클릭 이벤트

키 이벤트

DOMContentLoaded 이벤트

DOMContentLoaded 이벤트 : 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트

DOMContentLoaded 상태가 되었을 때 콜백함수를 호출한다.

document.addEventListener('DOMContentLoaded', () => {})

document라는 문서 객체의 DOMContentLoaded 이벤트가 발생했을 때, 매개변수로 지정한 콜백 함수를 실행하라는 의미

문서 객체 가져오기

document.body : 문서의 body 요소를 읽어들인다.
document.head
docuemnt.title

document.querySelector(선택자) : 요소를 하나만 추출
document.querySelectorAll(선택자) : 문서 객체를 여러 개 추출

선택자 부분에는 CSS Selector를 입력한다.

태그 선택자 : 태그
아이디 선택자 : #아이디
클래스 선택자 : .클래스
속성 선택자 : [속성=값]
후손 선택자 : 선택자A 선택자B (A 아래에 있는 B를 선택)

innerHTML

Element.innerHTML : 입력된 문자열을 HTML 형식으로 넣는다.
Element.textContent : 입력된 문자열을 그대로 넣는다.

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const a = document.querySelector('#a')
            const b = document.querySelector('#b')
            
            a.innerHTML = '<h1>innerHTML 속성</h1>'
            b.textContent = '<h1>textContent 속성</h1>'
        })

    </script>
</head>

<body>
    <div id="a"></div>
    <div id="b"></div>
</body>

textContent 속성의 경우는 글자가 그대로 들어갔지만,
innerHTML 속성은 <h1>~</h1>을 h1 요소로 변환해서 들어갔다.

속성 조작하기

문서 객체의 속성을 조작할 때는 다음과 같은 메소드를 사용한다.

Element.setAttribute(속성이름, 값) : 특정 속성에 값을 지정한다. 없으면 속성을 추가한다.

Element.getAttribute(속성이름) : 특정 속성을 추출한다.

HTML 표준에 정의된 속성은 더 간단하게 속성을 조작할 수 있다.
메소드를 사용하지 않고도 점.을 찍고 속성을 바로 읽어들이거나 지정할 수 있다.

스타일 조작하기

문서 객체의 스타일을 조작할 때는 style 속성을 사용한다.
style 속성은 객체이며, 내부에는 속성으로 CSS를 사용해서 지정할 수 있는 스타일들이 있다.

자바스크립트에서는 - 기호를 식별자에 사용할 수 없으므로, 두 단어 이상의 속성은 camelCase로 나타낸다.

const header = document.querySelector('h1')

header.style.color = 'white'
header.style.backgroungColor = 'black'
header.style.padding = '10px'

문서 객체 생성하기

document.createElement(문서 객체 이름)

문서 객체를 만들었다고 문서 객체가 배치되는 것은 아니다. 문서를 어떤 문서 아래에 추가할지를 지정해줘야 한다. 이러한 그림을 프로그래밍에서는 트리(tree)라고 부른다. 어떤 문서 객체가 있을 때 위에 있는 것을 부모(parent)라고 부르고, 아래에 있는 것을 자식(child)라고 부른다.

문서 객체에는 appendChild() 메소드가 있으며, 이를 활용하면 어떤 부모 객체 아래에 자식 객체를 추가할 수 있다. 

부모객체.appendChild(자식객체)

이벤트 설정하기

document.addEventListener('DOMContentLoaded', () => {})

document라는 문서 객체의 DOMContentLoaded 이벤트가 발생했을 때, 매개변수로 지정한 콜백 함수를 실행해라

모든 문서 객체는 생성되거나 클릭되거나 마우스를 위에 올리거나 할 때 이벤트(event)라는 것이 발생한다. 그리고 이벤트가 발생할 때 실행할 함수는 addEventListener() 메소드를 사용한다.

문서객체.addEventListener(이벤트 이름, 콜백 함수)
// 콜백 함수를 '이벤트 리스너' 또는 '이벤트 핸들러'라고 부른다.

이벤트가 발생할 때 실행할 함수를 이벤트 리스너 또는 이벤트 핸들러라고 부른다.

이벤트를 제거할 때는 removeEventListener() 메소드를 사용한다.

문서객체.removeEventListener(이벤트 이름, 이벤트 리스너)

이벤트 리스너 부분에는 연결할 때 사용했던 이벤트 리스너를 넣는다. 변수 또는 상수로 이벤트 리스너를 미리 만들고, 이벤트 연결과 연결 제거에 활용한다.

이벤트를 제거하려면 이벤트 리스너를 변수 또는 상수로 가지고 있어야 한다.

이벤트 모델

이벤트를 연결하는 방법을 이벤트 모델이라고 부른다.

이벤트를 연결할 때 addEventListener() 메소드를 사용했다. 이 방법이 현재 표준으로 사용하고 있는 방법이므로 표준 이벤트 모델이라고 부른다.

과거에는 문서 객체가 갖고 있는 on으로 시작하는 속성에 함수를 할당해서 이벤트를 연결했다. 이와 같은 이벤트 연결 방법을 고전 이벤트 모델이라고 부른다.

고전 이벤트 모델은 이벤트 리스너를 하나만 연결할 수 있다는 단점이 있다. 표준 이벤트 모델이 등장해서 이벤트 리스너를 여러 개 연결할 수 있게 되었다.

on으로 시작하는 속성을 HTML 요소에 직접 넣어서 이벤트를 연결하는 것을 인라인 이벤트 모델이라고 부른다.

인라인 이벤트 모델은 HTML 요소의 on 속성에 자바스크립트 코드를 넣는 것이다.

모든 이벤트 모델의 이벤트 리스너는 첫 번째 매개변수로 이벤트 객체를 받는다. 이벤트 객체에는 이벤트와 관련된 정보가 들어있다.

키보드 이벤트

keydown : 키가 눌릴 때 실행된다. 키보드를 꾹 누르고 있을 때도, 입력될 때도 실행된다.
keypress : 키가 입력되었을 때 실행한다.
keyup : 키보드에서 키가 떨어질 때 실행된다.

이벤트 발생 객체

기본 이벤트 막기

어떤 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것을 기본 이벤트라고 부른다.

링크를 클릭했을 때 이동하는 것, 제출 버튼을 클릭했을 때 이동하는 것 등이 모두 기본 이벤트의 예이다. 이러한 기본 이벤트를 제거할 때는 event 객체의 preventDefault() 메소드를 사용한다.

localStorage 객체

웹 브라우저에 데이터를 저장하는 localStorage 객체

localStorage 객체는 웹 브라우저가 기본적으로 제공하는 객체이다. 이 객체는 다음과 같은 메소드를 가지고 있다.

localStorage.getItem(키) : 저장된 값을 추출한다. 없으면 undefined가 나온다. 객체의 속성을 추출하는 일반적인 형태로 localStorage.키 또는 localStorage[키] 형태로 사용할 수도 있다.

localStorage.setItem(키, 값) : 값을 저장한다. 마찬가지로 객체에 속성을 지정하면 일반적인 형태를 사용할 수도 있다.

localStorage.removeItem(키) : 특정 키의 값을 제거한다.

localStorage.clear() : 저장된 모든 값을 제거한다.

profile
Jeongyun Heo
이전 포스트

자바스크립트

다음 포스트

2021-11-15(월) 6일차

0개의 댓글