웹개발/JavaScript

DOM(Documents Object Model)이 뭐야!?@!??

튼튼발자 2024. 7. 20. 17:33
728x90

안녕! 반가워, 나는 평범한 컴공 대학생이야.

오늘은 웹 개발의 기초 중 하나인 DOM에 대해 알려줄게. 혹시 웹 페이지를 꾸밀 때 HTML과 CSS만 써봤다면, 이제는 자바스크립트를 통해 페이지를 동적으로 제어하는 방법도 알아두면 좋아!

이를 위한게 바로 Documents Object Model => DOM이야!

DOM이 뭐야?

**DOM(Documents Object Model)**은 웹 페이지를 자바스크립트로 제어하기 위한 모델이야. 웹 브라우저에 표시되는 HTML 태그들을 자바스크립트가 이해할 수 있게 객체로 변환한 거라고 생각하면 돼. 이를 통해 자바스크립트가 웹 페이지의 요소들을 선택하고, 수정하고, 삭제할 수 있는 거지.

다시 말해서, 웹 브라우저가 HTML 문서를 파싱해서 객체 형태로 변환한 결과물이 DOM이야. HTML을 객체화한 것이라고 생각하면 돼. 그래서 자바스크립트를 통해 이 객체들에 접근하고 조작할 수 있는 거지.

더보기
더보기

피슝파슝?? 파싱이 뭐에요??

**파싱(parsing)**은 브라우저가 HTML 문서를 읽고 해석하는 과정을 말해.
HTML 파일은 그냥 문자들로 이루어진 텍스트일 뿐이야. 브라우저는 이 텍스트를 읽어서 이해할 수 있는 구조로 변환하는데, 이 변환 과정을 파싱이라고 해. 파싱을 통해 브라우저는 HTML 태그들을 객체로 변환해서 DOM을 만들어내는 거야.

DOM 구조 설명

DOM은 웹 페이지의 구조를 객체의 트리 형태로 나타내. HTML 문서가 브라우저에 의해 파싱되면 이 구조가 만들어지고, 이를 통해 개발자가 자바스크립트로 요소들을 조작할 수 있게 되는 거야. 트리 형태라는 건 부모-자식 관계로 이루어진 구조를 말하는데, 예를 들어 HTML의 <html> 태그가 최상위(root) 노드이고, 그 아래에 <head>, <body> 등의 자식 노드가 있는 식이야.

DOM의 핵심

DOM의 핵심은 두 가지야: 문서 객체의 선택과 문서 객체의 제어. 객체를 잘 선택해야 그걸 제어할 수 있겠지?

더보기
더보기

🤚🏻코드의 실행은 documnet. 으로 시작하는 이유!!
-> 우리가 자바스크립트에서 웹 페이지를 조작할 때 가장 먼저 접근하는 객체가 바로 document야. document는 현재 웹 페이지의 전체 내용을 나타내는 객체로, DOM의 진입점이라고 할 수 있어. 그래서 **document.**로 시작해서 웹 페이지의 요소들을 선택하고 조작하는 거야.

1. 문서 객체 선택

문서 객체를 선택하는 다양한 방법을 소개할게 :)

1. id 속성값으로 선택(단일)

document.getElementById("id");

id 속성은 유일해야 하니까 하나의 요소만 선택할 수 있어.

2. 태그 이름으로 선택(복수)

document.getElementsByTagName("tag");

같은 태그 이름을 가진 여러 요소들을 한 번에 선택할 수 있어.

3. 클래스 속성값으로 선택(복수)

document.getElementsByClassName("class");

같은 클래스를 가진 여러 요소들을 선택할 때 사용해.

4. CSS 선택자 방식으로 선택(단일)

document.querySelector("css_selector");

CSS 선택자를 사용해서 첫 번째로 매칭되는 요소를 선택해.

5. CSS 선택자 방식으로 선택(복수)

document.querySelectorAll("css_selector");

CSS 선택자를 사용해서 매칭되는 모든 요소를 선택해.

2. 문서 객체 조작

이제 선택한 문서 객체를 어떻게 조작할 수 있는지 볼까?

1. 스타일 변경

document.getElementById("p").style.color = "red";

 

2. 속성 추가
document.getElementById("p").setAttribute("class", "red-text");

3. 속성 제거

document.getElementById("p").removeAttribute("class");

4. 콘텐츠 조작

document.getElementById("p").innerHTML = "<h1>hello</h1>";
document.getElementById("p").innerText = "hello";

5. 삭제

document.getElementById("p").remove(); // p 태그 삭제

const div = document.querySelector("div");
const p = document.querySelector("p");
div.removeChild(p); // div의 자식 태그인 p 태그 삭제

예시 코드

이제 실제로 DOM을 조작하는 예시 코드를 볼까?

// 1. 문서 객체 찾을 때
const h1El = document.querySelector(".bye");

// 2. 문서 객체 콘텐츠 바꾸는 법
h1El.innerHTML = "<i>sucoding</i>";
h1El.innerText = "<i>sucoding</i>";

// 3. 스타일 주는 법
h1El.style.color = "red";
h1El.style.fontSize = "90px";

// 4. 클래스 추가하는 법
h1El.classList.add("active");

// 5. 클래스 제거하는 법
h1El.classList.remove("bye");

// 6. 클래스 토글하는 법
h1El.classList.toggle("done");
h1El.classList.toggle("done");

// 7. input value 가져오는 법
setTimeout(() => {
  const inputEl = document.querySelector("input");
  console.log(inputEl.value);
}, 3000);

이제 DOM이 뭔지, 어떻게 사용하는지 조금 더 이해가 됐지? 이렇게 DOM을 활용하면 웹 페이지를 동적으로, 더 재미있게 만들 수 있어. 더 많은 기능을 알아보고 싶다면, 계속해서 연습해보는 걸 추천할게! 😊

728x90