DOM이 무엇이고 왜 필요한가?

김zunyange·2023년 2월 2일

1. DOM (JavaScript → HTML)

JavaScript → HTML : 자바스크립트에서 동적 기능 구현을 위해 HTLM 웹 페이지에 접근
자바스크립트 로직을 통해 동적 웹 페이지를 구현하기 위해서는 우선 HTML 요소에 접근해야 합니다.

    <p>Hello students!</p>
    <button id="btn" type="button">Click Me</button>

    // button 요소에 접근 (HTML 요소에 접근)
    const btnElement = document.getElementById('btn');
    
    // button 요소에 이벤트 부여 (클릭시 알림창 출력) >>> 동적 기능 구현
    btnElement.addEventListener('click', function () {
    	alert('Welcome to Wecode Coding Bootcamp!');
    });

이렇게 자바스크립트에서 HTML 페이지에 접근하여 여러가지 조작(ex. 스타일 수정, 요소 생성, 내용 수정, etc)을 할 수 있도록 해주는 것이 DOM 입니다.

2. DOM 정의

💡 DOM의 정의를 이해하고, 개념을 더 깊이 알기위해 노력하지 않아도 괜찮습니다.
우리가 원하는 것은 JavaScript 코드에서 HTML을 조작하여 → Interactive한 웹사이트를 만드는 것 뿐!

DOM이 바로 JavaScript와 HTML을 연결해주는 매개체입니다! DOM을 잘 몰라도 JavaScript 코드를 직접 쳐보면, HTML을 접근하여 화면의 요소들을 변경할 수 있게 됩니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

☝🏻DOM을 통해 HTML 파일의 요소들을 → 위의 그림과 같이 노드(Node)의 계층(Tree) 구조로 표현☝🏻

DOM(Document Object Model) 문서 객체 모델
- D(Document): 웹 페이지 문서(= HTML)
- O(Object): 객체
- M(Model): 모델
DOM은 HTML을 계층화시켜 트리(Tree) 구조로 만든 객체(Object) 모델(Model)입니다.
- document 객체는 DOM 트리의 Root Node, 즉 <html> 요소에 접근하게 해줍니다.
DOM은 웹 페이지 문서, 즉 HTML과 자바스크립트를 서로 잇는 역할입니다.
- 자바스크립트는 DOM을 통해 HTML 페이지에 접근하고 페이지를 수정할 수 있습니다.
- 자바스크립트 코드에서 document라는 변수로 접근할 수 있습니다.

실습) Google 홈페이지 배경색 바꾸기

Google 홈페이지에 접속합니다. www.google.com
개발자 도구 console 패널을 열고, 아래 코드를 입력합니다.
```
document.body.style.backgroundColor = 'red';
```
- 자바스크립트 파일에서 → HTML document에 접근
- body 태그의 style(CSS) backgroundColor
- ’red’ 빨간색 으로 수정

3. DOM 접근하기

시작하기 전에! 왜 DOM에 “접근”할 줄 알아야 할까요? 한 번 생각해보고 펼쳐보세요.
1. 사용자가 (input 태그를 사용한) id와 비밀번호 입력란에 작성한 값을 JavaScript에서 접근해서 가져와야 합니다. → 가져온 값으로 로그인 시도!
2. 사용자가 (input 태그를 사용한) 각종 회원가입 용 정보에 작성한 값을 JavaScript에서 접근해서 가져와야 합니다. → 가져온 값으로 회원가입 시도!
3. 사용자가 회원가입을 할 때 체크한 각종 동의항목의 체크 유무를 가져와야 합니다. → 체크 유무를 JavaScript에서 확인해서 그 다음 페이지로 넘길지 말지 결정!
4. 토스나 신한은행 같은 은행 어플에서 이체하고 싶을 때, 사용자가 입력한 금액의 값을 가져와야 합니다 → JavaScript에서 숫자 값을 가져와서 이체 로직 시도!
5. 등등 아주 많습니다. 오늘 접속한 여러 웹사이트에서 어떤 값들이 JavaScript에서 필요할지 생각해보세요.

3-1. HTML 요소 취득 1) tag

HTML의 구조나 내용 또는 스타일을 동적으로 조작하려면 먼저 HTML 요소를 접근해야 합니다.
DOM은 HTML 요소를 접근할 수 있는 다양한 방법을 제공합니다.
tag - 태그 이름을 이용한 요소 취득
```
const allPtags = document.getElementsByTagName('p');
```
- 해당페이지에 있는 모든 <p> 요소가 배열의 형태로 담겨서 반환됩니다.

3-2. HTML 요소 취득 2) CSS 선택자

querySelector - CSS 선택자를 이용한 요소 노드 취득
```
const el = document.querySelector('.category_item');
```
- category_item라는 클래스를 사용하는 첫 번째 요소가 반환됩니다.
- getElementsByTagName 메서드를 사용한 것과 달리, 배열이 아닌 요소를 반환합니다.

3-3. HTML 요소 취득 3) id

getElementById - id를 이용한 요소 취득
```
const element = document.getElementById('NM_NEWSSTAND_HEADER');
```
- id가 NM_NEWSSTAND_HEADER인 요소가 반환됩니다.

3-4. HTML 요소 취득 4) class

getElementsByClassName - class를 이용한 요소 취득
```
const element = document.getElementsByClassName('category_item');
```
- 해당페이지에 있는 class 이름이 category_item인 모든 요소가 배열의 형태로 담겨서 반환됩니다.

4. DOM 조작하기

시작하기 전에! 왜 DOM을 “조작”할 줄 알아야 할까요? 한 번 생각해보고 펼쳐보세요.
1. 쿠팡사이트에서 검색한 나이키 신발! 사용자가 2페이지로 넘어가고 싶다면? → JavaScript에서 상품 목록의 이미지, 가격, 간단 설명 등 모든 내용을 바꿔줘야 합니다! HTML 조작이 필요하죠.
2. 네이버의 실시간 검색~ 1초에 한 번씩 트렌드 검색어가 바뀌어야 할텐데 → JavaScript에서 1초에 한 번씩 인기 검색어의 텍스트 값을 바꿔줘야 합니다!
3. gmail 페이지에서 아직 안 읽은 메일이 10개에서 11개로 변경되어야 한다면? → JavaScript에서 HTML에 접근하여 10을 11로 바꿔줘야 합니다!
4. 구글 캘린더에서 내 일정을 초록색에서 노란색으로 변경하고 싶다면? → JavaScript에서 해당 스케줄의 HTML에 접근하여 노란색으로 변경해줘야 합니다!

4-1. `innerHTML` - 내용(content) 조작

// HTML body 태그에 접근하여 내용 조작
document.body.innerHTML = '내용 다 바꿈';

innerHTML 을 통해 요소의 내용(content), 즉 시작 태그와 종료 태그 사이의 내용에 접근하여 수정할 수 있습니다.
body 태그에 접근하여 내부 내용을 '내용 다 바꿈'이라는 문자열로 조작했습니다.
body 태그 자식 요소가 많더라도 innerHTML을 사용하면 안의 내용이 전부 교체됩니다.

4-2. `style` - 스타일 조작

// id가 'NM_NEWSSTAND_HEADER'인 요소 취득 >> 변수에 저장
const element = document.getElementById('NM_NEWSSTAND_HEADER');

// 해당 요소의 스타일 조작
element.style.backgroundColor = 'blue';

HTLM 요소의 style에 접근하여 스타일을 조작할 수 있습니다.
HTML 페이지에 접근하여 id가 NM_NEWSSTAND_HEADER인 요소를 취득하였습니다.
해당 요소를 element 변수에 저장하였습니다.
해당 요소의 style 에 접근하여 배경색(backgroundColor)을 ‘blue’ 로 조작하였습니다.
DOM 에 접근하여 스타일을 수정하는 경우 camelCase 를 사용합니다.

4-3. `createElement` - 요소 생성

// h1 요소 생성 및 내용 추가
const item = document.createElement('h1'); // <h1></h1>
item.innerHTML = '제목추가' // <h1>제목추가</h1>

// h1 요소를 추가하고 싶은 위치 취득
const newsHeader = document.getElementById('NM_NEWSSTAND_HEADER'); 

// newsHeader자식으로 item 추가
newsHeader.appendChild(item);

.createElement(tagName) 함수를 사용하면 HTML 요소(element)를 생성할 수 있습니다.
- createElement 함수를 통해 h1 요소를 생성하고 item이라는 변수에 할당했습니다.
생성한 h1 요소에 innerHTML 을 통해 내용(content)을 설정하였습니다.
요소는 생성만 됐을 뿐, HTML에 추가된 상태가 아니라 눈으로 확인할 수 없습니다.
특정 요소의 자식 요소로 append 시키는 방법이 있습니다. (appendChild)
id가 NM_NEWSSTAND_HEADER인 요소를 찾아서, 자식으로 추가해보겠습니다.
해당 요소 내부, 즉 자식 요소로 새롭게 생성한 h1 요소를 추가합니다.

4-4. 요소의 `속성(attribute)` 조작

// 요소에 id 수정(추가)
element.id = 'newId';

// 요소에 class 수정(추가)
element.className = 'newClass';

// 요소 스타일 수정(추가)
element.style.backgroundColor = "red";

document 객체로 특정 요소(element)에 접근할 수 있듯이, 요소의 속성(attribute)에도 접근할 수 있습니다.
특정 요소의 속성에 접근하여 id, 혹은 class도 추가하고 style 값도 수정할 수 있습니다.

5. DOM API

흔히 우리가 HTML에서 제어하는 div, span, input 등의 요소들을 DOM이라고 하고, 프로그램을 사용하기 위한 명령들의 집합을 API(Application Programming Interface) 라고 합니다.

즉, DOM API는 HTML의 요소들을 JS에서 제어하기 위한 명령들의 집합을 뜻함

5-1. document.querySelector()

여기서 document 는 브라우저가 불러온 페이지를 뜻 하며, DOM 요소를 불러오는(진입점) 역할을 합니다.
querySelector()는 document 에 속한 함수, 즉 메소드로써 인수에 CSS의 선택자를 작성하면 해당 HTML 문서에서 일치하는 요소를 1개만 반환합니다.
이때 해당 요소가 2개 이상이라면, 가장 먼저 찾은 요소를 하나만 리턴합니다.

<!--HTML-->
<div class="this">1번 요소</div>
<div class="this">2번 요소</div>
<div class="this">3번 요소</div>

document.querySelector('.this') // 1번 요소 하나만 선택.

5-2. document.querySelectorAll()

HTML 문서에서 일치하는 선택자를 가진 모든 요소를 찾아 선택하며, 이때 반환하는 데이터는 배열데이터의 모양으로 정렬되어 반환된다.
배열과 같은 방법으로 사용하게 되는데, 원하는 데이터를 선택하기 위해서는 몇번째 데이터인지 명시하여야 한다.

<!--HTML-->
<div class="this">1번 요소</div>
<div class="this">2번 요소</div>
<div class="this">3번 요소</div>

document.querySelectorAll('.this') // ["1번 요소", "2번 요소", "3번 요소"] < 배열로 표시
document.querySelectorAll('.this')[1] // 2번 요소를 선택.
//0부터 순서를 지정한다.

그러나 이는 배열과 모양은 유사하나 엄밀히 말해 배열은 아니므로 이를 유사 배열이라고 한다. (array-like)

출처
wecode
https://velog.io/@chl4842/DOM-API

김zunyange

배움은 즐거워 ~(*ૂ❛ᴗ❛*ૂ)

이전 포스트

[JS]Ghost Rain 게임 만들기(2)

다음 포스트

DOM이 무엇이고 왜 필요한가?

1. DOM (JavaScript → HTML)

2. DOM 정의

실습) Google 홈페이지 배경색 바꾸기

3. DOM 접근하기

3-1. HTML 요소 취득 1) tag

3-2. HTML 요소 취득 2) CSS 선택자

3-3. HTML 요소 취득 3) id

3-4. HTML 요소 취득 4) class

4. DOM 조작하기

4-1. `innerHTML` - 내용(content) 조작

4-2. `style` - 스타일 조작

4-3. `createElement` - 요소 생성

4-4. 요소의 `속성(attribute)` 조작

5. DOM API

5-1. document.querySelector()

5-2. document.querySelectorAll()

[JS]Ghost Rain 게임 만들기(2)

사용자 이벤트(event)의 종류와 감지

0개의 댓글

DOM이 무엇이고 왜 필요한가?

1. DOM (JavaScript → HTML)

2. DOM 정의

실습) Google 홈페이지 배경색 바꾸기

3. DOM 접근하기

3-1. HTML 요소 취득 1) tag

3-2. HTML 요소 취득 2) CSS 선택자

3-3. HTML 요소 취득 3) id

3-4. HTML 요소 취득 4) class

4. DOM 조작하기

4-1. innerHTML - 내용(content) 조작

4-2. style - 스타일 조작

4-3. createElement - 요소 생성

4-4. 요소의 속성(attribute) 조작

5. DOM API

5-1. document.querySelector()

5-2. document.querySelectorAll()

[JS]Ghost Rain 게임 만들기(2)

사용자 이벤트(event)의 종류와 감지

0개의 댓글

4-1. `innerHTML` - 내용(content) 조작

4-2. `style` - 스타일 조작

4-3. `createElement` - 요소 생성

4-4. 요소의 `속성(attribute)` 조작