DOM

[Largopie]

기본 개념 질문

• DOM이란 무엇이며, 웹 개발에서 어떤 역할을 하나요?
• DOM 트리 구조에 대해 설명해주세요.
• DOM과 HTML의 차이점은 무엇인가요?

DOM 조작 관련 질문

• JavaScript를 사용하여 DOM 요소를 선택하는 방법들에 대해 설명해주세요.
• DOM 요소를 생성, 수정, 삭제하는 방법에 대해 설명해주세요.
• innerHTML과 textContent의 차이점은 무엇인가요?

이벤트 처리 관련 질문

• DOM 이벤트 처리 방식에 대해 설명해주세요.
• 이벤트 버블링과 캡처링의 차이점은 무엇인가요?
• 이벤트 위임(Event Delegation)이란 무엇이며, 언제 사용하나요?

성능 최적화 관련 질문

• DOM 조작 시 성능을 최적화하는 방법에 대해 설명해주세요.
• reflow와 repaint란 무엇이며, 이를 최소화하는 방법은 무엇인가요?
• DocumentFragment의 사용 목적과 장점은 무엇인가요?

크로스 브라우저 호환성 질문

• 크로스 브라우저 DOM 조작 시 주의해야 할 점은 무엇인가요?
• 특정 브라우저에서만 지원하는 DOM API를 처리하는 방법에 대해 설명해주세요.

##최신 DOM API 관련 질문

• Shadow DOM이란 무엇이며, 어떤 상황에서 유용한가요?
• MutationObserver API의 용도와 사용 방법에 대해 설명해주세요.

가상 DOM(Virtual DOM) 관련 질문

• 가상 DOM이란 무엇이며, 어떤 장점이 있나요?
• React나 Vue와 같은 프레임워크에서 가상 DOM을 어떻게 활용하나요?

실제 사용 사례 및 경험 관련 질문

• 복잡한 DOM 조작을 요구하는 프로젝트 경험이 있다면 공유해주세요.
• DOM 조작 시 겪었던 어려움과 그 해결 방법에 대해 설명해주세요.

[Largopie]

기본 개념 질문

DOM이란 무엇이며, 웹 개발에서 어떤 역할을 하나요?

DOM은 Document Object Model의 약자로 HTML 문서를 객체로 표현한 인터페이스 입니다.

HTML을 DOM으로 구조화하면 JavaScript와 같은 프로그래밍 언어에서 웹 페이지를 접근할 수 있습니다.
따라서, DOM은 HTML로 구성된 웹 페이지와 스크립트 및 프로그래밍 언어를 연결시켜주는 역할을 합니다.

DOM 트리 구조에 대해 설명해주세요.

DOM트리는 최상위 노드인 document로 시작해 자식 노드가 뻗어나가는 게층적 구조입니다. 계층적 구조를 통해 각 요소간의 관계를 파악할 수 있습니다. 예를 들어 상위 요소와 하위 요소간의 관계를 부모-자식 관계라고 칭하고, 같은 부모 노드를 가진 요소의 관계를 형제 노드라고 합니다.

DOM과 HTML의 차이점은 무엇인가요?

DOM은 HTML을 통해 생성됩니다. 웹 페이지에 나타낼 구조를 문서화하여 HTML 파일에 텍스트로 표현하면 해당 HTML파일을 바탕으로 객체를 생성합니다. 해당 객체를 통해 JavaScript는 웹 페이지에 접근할 수 있고 특정 요소를 조작할 수 있습니다.

[Largopie]

DOM 조작 관련 질문

JavaScript를 사용하여 DOM 요소를 선택하는 방법들에 대해 설명해주세요.

JavaScript를 사용하여 DOM 요소를 선택하는 방법은 총 x 가지가 있습니다.

1. document.querySelector로 선택자를 통해 특정 요소를 선택할 수 있습니다. 선택자로 가져올 수 있기 때문에 모든 요소를 가져오려면 querySelectorAll을 사용하면됩니다.
2. document.getElementById로 일치하는 id값을 가진 요소를 선택할 수 있습니다.
3. document.getElementByClassName으로 일치하는 class명을 가진 요소를 선택할 수 있습니다. 단, class요소는 여러 요소가 있을 수 있기 때문에 같은 class명을 가진 모든 요소가 반환됩니다.

DOM 요소를 생성, 수정, 삭제하는 방법에 대해 설명해주세요.

먼저 JavaScript를 이용해 DOM 요소를 생성하는 방법은 createElement나 innerHTML을 사용하는 방법이 있습니다. createElement로 특정 요소를 생성해 내부 속성을 채워넣은 뒤, 선택한 특정 요소의 위치를 기반으로 요소를 삽입할 수 있습니다. innerHTML은 특정 요소에 innerHTML을 사용하면 html 코드가 그대로 삽입됩니다. 이렇게 되면 기존에 있던 자식 요소는 제거되므로 주의해야 합니다.

DOM 요소를 수정하는 방법은 위에서 querySelector, getElementById와 같은 메서드를 통해서 특정 요소를 선택하여 텍스트, 내부 요소, 이벤트 등을 수정할 수 있습니다.

DOM 요소를 제거하는 방법은 innerHTML에 빈 문자열을 삽입해 자식 요소를 삭제하는 방법, 특정 element를 선택하여 remove 메서드를 사용하여 제거하는 방법이 있습니다.

innerHTML과 textContent의 차이점은 무엇인가요?

innerHTML은 특정 노드에 문자열 형태로 html요소를 함께 삽입합니다. 반면, textContent는 특정 노드의 텍스트 요소만 변경할 수 있습니다.

innerHTML은 XSS 공격에 취약합니다. 예를 들어 input을 통해 동작하는 로직이 innerHTML로 구성되었다면, <script>태그를 삽입해 고려하지 않은 요소를 동작시킬 수 있는 위험이 있습니다.