프론트엔드 개발자 면접 단골 질문 2 | DOM의 개념

원하시는 기업에 꼭 합격하시길 기원하겠습니다 :)
면접 연습에 스크립트가 필요하신 분들은 아래를 참고해주세요.
*DOM의 개념을 설명해주세요*
HTML이나 XML 같은 마크업 언어로 작성된 문서를 자바스크립트와 같은 프로그래밍 언어가 조작할 수 있도록 하는 인터페이스를 의미합니다. DOM은 계층적 구조를 가진 노드 트리로 구성됩니다.
*DOM은 왜 필요한가요?*
동적인 웹 페이지를 구현하려면 자바스크립트와 같은 프로그래밍 언어가 문서에 접근하고, 제어할 수 있는 수단이 있어야 합니다. 하지만, 마크업 언어로 작성된 문서에는 이러한 수단이 없죠. TV는 있지만, TV를 조작할 수 있는 리모콘이 없는 것과 같은 이치라고 볼 수 있습니다. 따라서, 문서에 접근하고, 제어할 수 있는 수단인 DOM이 필요합니다.
*DOM을 통해 어떤 동작을 할 수 있는지 예를 들어주세요*
button element가 클릭되었을 때, 특정 함수를 호출하도록 Event Handler를 추가할 수 있고, 웹 페이지 내에 새로운 요소를 추가하거나, 삭제, 수정할 수 있습니다.
*DOM은 왜 계층적 구조로 표현하는지 설명해주세요*
계층적 구조에서는 노드들 간의 관계가 부모, 자식, 형제 등으로 명확하게 정의됩니다. 이는 노드의 추가, 제거, 이동 작업을 쉽게 할 수 있도록 도와줍니다. 또한, 이벤트가 발생한 요소로부터 이벤트가 올라가는 이벤트 버블링, 반대로 이벤트가 내려가는 이벤트 캡처링 동작은 계층적 구조에서 효율적으로 동작하기 때문에, DOM을 계층적 구조로 표현하는 것입니다.

[@divakukulza]

이거일편이왜 없어요?

[@user-fw2se9ms4i]

1편 내용에 오류가 있어 영상 비공개처리하였습니다ㅠㅠ debounce와 throttle의 개념에 대한 내용이였어요~내용 수정하여 추후 다시 업로드할 예정입니다