🚀 면접에서 나올 수 있는 DOM Tree 질문 & 답변
1️⃣ DOM Tree란 무엇인가요?
📌 답변:
DOM(Tree)은 HTML 문서를 브라우저가 이해할 수 있도록 트리(Tree) 형태의 구조로 변환한 것입니다.
브라우저는 HTML을 파싱하여 노드(Node)로 이루어진 계층 구조를 만들고, 이를 통해 자바스크립트가 HTML 요소를 조작할 수 있도록 합니다.
2️⃣ DOM Tree의 주요 노드(Node) 종류는 무엇인가요?
📌 답변:
DOM Tree는 크게 3가지 타입의 노드(Node)로 구성됩니다.
- 요소 노드(Element Node) → <div>, <p>, <img> 같은 HTML 태그
- 텍스트 노드(Text Node) → 요소 내부의 실제 텍스트 (<p>Hello</p>에서 "Hello")
- 속성 노드(Attribute Node) → 요소의 속성 (<img src="image.png">에서 src="image.png")
3️⃣ DOM Tree의 루트(Root) 노드는 무엇인가요?
📌 답변:
DOM Tree의 최상위(루트) 노드는 document 객체입니다.
HTML 문서는 document 객체를 통해 접근할 수 있으며, 최상위 요소인 <html> 태그를 포함하고 있습니다.
4️⃣ DOM Tree는 어떻게 생성되나요?
📌 답변:
- 브라우저가 HTML을 읽고 파싱합니다.
- 각 HTML 요소를 노드(Node)로 변환하여 DOM Tree를 생성합니다.
- CSS 파일을 해석하여 CSSOM Tree를 생성합니다.
- DOM Tree + CSSOM Tree를 합쳐 **렌더 트리(Render Tree)**를 만든 후, 화면에 표시합니다.
5️⃣ DOM Tree를 조작하는 방법에는 어떤 것들이 있나요?
📌 답변:
DOM을 조작하는 방법은 주로 JavaScript를 활용하며, 대표적인 방법은 다음과 같습니다.
- 요소 선택하기 → document.getElementById(), document.querySelector()
- 내용 변경하기 → element.textContent = "변경된 내용"
- 속성 변경하기 → element.setAttribute("src", "new-image.png")
- 이벤트 추가하기 → element.addEventListener("click", function() {...})
- 요소 추가/삭제하기 → document.createElement(), parentNode.appendChild(), parentNode.removeChild()
6️⃣ DOM Tree를 조작할 때 성능을 고려해야 하나요?
📌 답변:
네! DOM 조작은 브라우저의 렌더링 성능에 영향을 미치므로 최적화가 필요합니다.
- 불필요한 DOM 변경을 줄이기 (한 번에 여러 요소 변경 시 DocumentFragment 사용)
- Reflow/Repaint 최소화하기 (클래스를 한 번에 변경)
- 이벤트 위임(Event Delegation) 사용 (document.addEventListener() 활용)
📖 DOM Tree 개념 쉽게 설명하기
✅ 1. DOM이란?
DOM(Document Object Model)은 HTML 문서를 브라우저가 이해할 수 있도록 트리(Tree) 구조로 변환한 것을 말해요.
쉽게 말하면, 웹 페이지를 JavaScript가 조작할 수 있도록 만든 "HTML의 지도" 같은 거예요.
✅ 2. DOM Tree는 어떻게 생겼을까?
예를 들어, 아래 HTML을 보자!
<!DOCTYPE html>
<html>
<head>
<title>DOM Tree</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>이것은 DOM Tree 예제입니다.</p>
</body>
</html>
이 HTML 문서는 브라우저에서 아래와 같은 트리(Tree) 구조로 변환돼요!
document
├── html
│ ├── head
│ │ ├── title
│ │ │ └── "DOM Tree"
│ ├── body
│ ├── h1
│ │ └── "Hello, World!"
│ ├── p
│ └── "이것은 DOM Tree 예제입니다."
이렇게 HTML 요소들이 부모-자식 관계를 이루며 트리 형태로 정리되는 거죠!
✅ 3. DOM Tree는 어떻게 만들어질까?
웹 페이지가 로드될 때 브라우저는 아래 과정을 거쳐 DOM Tree를 만듭니다.
- HTML을 읽고 → <html> 태그부터 시작해서 모든 요소를 분석
- 각 태그를 노드(Node)로 변환 → document 객체를 만들고, html, body, p 등을 구조화
- 완성된 DOM Tree를 메모리에 저장
✅ 4. DOM Tree를 조작하는 방법
HTML을 변경하려면 JavaScript로 DOM을 조작하면 돼요!
📌 1) 요소 선택하기
const heading = document.querySelector("h1");
console.log(heading.textContent); // "Hello, World!" 출력
📌 2) 요소 내용 변경
heading.textContent = "DOM 조작 성공!";
🔹 실행하면 <h1>Hello, World!</h1> → <h1>DOM 조작 성공!</h1> 로 변경돼요!
📌 3) 새로운 요소 추가
const newParagraph = document.createElement("p");
newParagraph.textContent = "새로운 문장이 추가됨!";
document.body.appendChild(newParagraph);
🔹 실행하면 <p>새로운 문장이 추가됨!</p>가 화면에 추가돼요!
📌 4) 버튼 클릭 시 내용 변경
document.querySelector("button").addEventListener("click", function() {
document.body.style.backgroundColor = "lightblue";
});
🔹 실행하면 버튼 클릭 시 배경색이 변경돼요!
🎯 마무리: DOM Tree 이해하면 뭐가 좋을까?
- 웹 페이지의 구조를 이해할 수 있다!
- JavaScript로 HTML을 자유롭게 변경할 수 있다!
- 사용자 이벤트(클릭, 입력 등)를 처리할 수 있다!
🚀 이제 DOM Tree의 개념과 조작 방법을 이해했으니, 면접에서 자신 있게 대답할 수 있을 거야! 😎🔥
'[매일CS]' 카테고리의 다른 글
| [Back] 일급 컬렉션에 대해 설명해주세요 (0) | 2025.02.14 |
|---|