안녕! 반가워, 나는 평범한 컴공 대학생이야.
오늘은 웹 개발의 기초 중 하나인 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";
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을 활용하면 웹 페이지를 동적으로, 더 재미있게 만들 수 있어. 더 많은 기능을 알아보고 싶다면, 계속해서 연습해보는 걸 추천할게! 😊
'웹개발 > JavaScript' 카테고리의 다른 글
| 자바스크립트 개발자라면 꼭 알아야 할 표준 내장 객체! (0) | 2024.07.27 |
|---|---|
| 자바스크립트 이벤트 모르면 나가라. (2) | 2024.07.20 |
| 자바스크립트의 함수 선언 및 표현 방법을 알려줄게! (0) | 2024.07.18 |
| ProtoType(프로토타입) 그게 뭐죠? (0) | 2024.07.18 |
| 생성자 함수란 무엇일까? (0) | 2024.07.18 |