DOM

by 코린’s 2024. 1. 26. 21:05

728x90

DOM (Document Object Model)은 웹 페이지의 콘텐츠와 구조를 프로그래밍적으로 조작할 수 있게 해주는 인터페이스입니다.

간단히 말해서, DOM은 웹 페이지를 브라우저가 이해할 수 있는 구조로 변환하는 방법입니다.

이를 통해 자바스크립트와 같은 스크립팅 언어들이 웹 페이지의 텍스트, 스타일, 구조를 동적으로 변경할 수 있게 됩니다.

웹 페이지가 브라우저에 로드될 때, 브라우저는 HTML 문서를 읽고 DOM을 생성합니다.

DOM은 문서의 구조를 나무(tree) 형태로 표현합니다.

각 요소, 속성, 텍스트 등은 노드(node)로 표현되며, 이들은 서로 계층적인 관계를 가집니다.

예를 들어, <html> 태그는 최상위 노드가되고, 그 안의 <body>, <head> 태그들은 자식 노드가 됩니다.

이와 같은 구조 덕분에 개발자들은 특정 요소를 찾아내고, 수정하고, 추가하거나 삭제할 수 있습니다.

DOM 조작은 주로 자바스크립트를 통해 이루어집니다.

자바스크립트를 사용하여 DOM의 요소를 찾을 수 있고 (document.getElementById, document.querySelector 등),

요소의 콘텐츠를 변경하거나 (element.textContent, element.innerHTML), 스타일을 바꾸거나 (element.style),

이벤트 리스너를 추가하는 등 다양한 조작을 할 수 있습니다.

DOM을 사용하는 예시로는 사용자의 행동에 따라 페이지의 내용을 바꾸거나, 폼 데이터를 검증하고,

페이지 로딩 없이 새로운 콘텐츠를 동 적으로 표시하는 것 등이 있습니다.

이러한 동적인 웹 페이지는 사용자 경험을 향상시키고, 더욱 상호작용적인 웹 애플리케이션을 만들 수 있게 도와줍니다.

프론트엔드 개발자로서 DOM을 이해하고 사용하는 것은 매우 중요합니다.

DOM을 통해 사용자 인터페이스를 동적으로 관리하고, 사용자의 상호작용에 반응하여 애플리케이션의 상태를 업데이트할 수 있기 때문입 니다.

728x90

콜백함수 (0)	2023.06.27
화살표 함수 (0)	2023.05.17
javascript underscore 언더스코어 (0)	2023.05.16
원시자료형과 참조 자료형 (0)	2023.05.01
객체 (0)	2023.04.25

코딩하는 짱구