자바스크립트는 웹 문서 안의 텍스트, 이미지, 표 등 웹 문서 요소를 조작할 수 있는 언어입니다. 자바스크립트가 웹 문서의 요소를 조작할 수 있는 이유는 문서 객체 모델이 있기 때문입니다. 오늘은 바로 이 문서 객체 모델에 대해서 살펴 보려고 합니다.
문서 객체 모델(DOM)
자바스크립트에서 웹 문서나 텍스트, 이미지 등의 요소를 제어하기 위해서는 먼저 문서 객체 모델에 대한 이해가 필요합니다.
문서 객체 모델은 영어로 Document Object Model 이라고 부르며 줄여서 DOM으로 표기합니다. 실무에서는 DOM을 그대로 읽어서 '돔'이라고 부릅니다.
DOM의 정의 먼저 살펴보도록 하겠습니다.
DOM의 사전적 정의는 "문서 객체 모델 (The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 인터페이스"입니다.
좀 더 정확히 설명을 하자면 DOM은 웹 페이지에 대한 인터페이스로, 문서 내의 모든 요소를 정의하고 다양한 프로그램들이 페이지의 컨텐츠, 구조 및 스타일을 읽고 조작할 수 있도록 API를 제공하는 일종의 객체 모델입니다.
DOM을 사용하면 웹 문서의 모든 요소를 객체로 해석할 수 있습니다. 이게 무슨 말인지 좀 더 확실히 이해하기 위해 간단한 실습을 통해 알아보겠습니다.
DOM을 이용한 실습
(해당 소스는 맨 아래 첨부 파일로 달아놓았습니다. 필요하신 분은 다운 받고 직접 실습 해보세요!)
해당 소스는 HTML로 작성한 스마트워치 상품 정보입니다. 여기에서 제품 설명을 보이지 않게 하려면 해당 파일을 열어서 제품 설명이 가려지도록 CSS를 작성하면 됩니다. 하지만 매번 이렇게 작업을 하는 것은 매우 번거롭고 비효율적입니다.
이러한 기능을 효율적으로 사용하려면 DOM을 제어하면 됩니다.
먼저 크롬 브라우저에서 해당 파일을 열고 콘솔 창에서 아래 소스를 입력하게 되면 '제품 설명'이란 제목이 사라지게 됩니다.
설명 내용도 사라지게 만들고 싶다면 콘솔 창에 아래 소스를 입력하면 됩니다.
이렇게 웹 문서를 직접 수정하는 대신 자바스크립트를 이용해서 수정할 수 있습니다. 방금 사용한 document는 웹 문서 자체를 가리키는 DOM 요소 중 하나입니다.
document를 사용하면 자바스크립트에서 웹 문서의 소스 전부를 인식할 수 있기 때문에 수정도 할 수 있게 됩니다. document는 DOM의 여러 요소 중 하나입니다.
DOM 트리
DOM 트리는 웹 페이지의 HTML 구조를 계층적으로 표현한 것입니다. 웹 브라우저가 HTML 문서를 로드할 때 생성됩니다. DOM 트리를 통해 자바스크립트는 웹 페이지의 요소와 콘텐츠와 상호작용하고 조작할 수 있습니다.
DOM 트리에 대한 설명은 다음과 같습니다.
루트 노드:
DOM 트리의 맨 위에는 "document" 노드가 있으며, 이는 전체 HTML 문서를 나타냅니다. 이 노드는 트리의 시작점이며 루트 노드입니다. 다른 모든 요소와 노드들은 이 루트 노드의 자손입니다.
요소를 노드로 표현:
HTML 요소인 <div>, <p>, <h1> 등은 DOM 트리에서 노드로 표현됩니다. 각 요소는 하나의 노드가 되며, HTML 요소의 중첩 구조는 DOM 트리의 계층 구조로 반영됩니다.
부모, 자식, 형제 노드:
DOM 트리에서 요소들은 부모, 자식, 형제 관계를 가집니다. 다른 요소 내부에 있는 요소는 해당 요소의 자식이며, 외부 요소는 부모입니다. 같은 부모를 가지는 요소들은 형제입니다.
텍스트 노드:
HTML 요소 내의 텍스트 콘텐츠는 DOM 트리에서 "텍스트 노드"로 표현됩니다. 예를 들어, <p> 태그 사이의 텍스트 또는 <span> 요소 내부의 텍스트는 텍스트 노드로 취급됩니다.
속성을 프로퍼티로 표현:
HTML 요소의 속성인 "id", "class", "src" 등은 해당 DOM 노드의 프로퍼티로 표현됩니다. 자바스크립트는 DOM API를 통해 이러한 속성들에 접근하고 수정할 수 있습니다.
DOM 메서드와 프로퍼티:
자바스크립트는 DOM API라고 하는 메서드와 프로퍼티의 집합을 제공하여 DOM 트리와 상호작용할 수 있습니다. 개발자는 이러한 메서드를 사용하여 웹 페이지의 요소와 콘텐츠를 동적으로 접근하고 수정하거나 추가하거나 제거할 수 있습니다.
변경과 동기화:
DOM 트리는 동적이며, 자바스크립트 스크립트의 실행이나 사용자 상호작용으로 인해 변경될 수 있습니다. 변경이 발생하면 브라우저는 자동으로 DOM 트리를 업데이트하여 현재 웹 페이지의 상태와 동기화합니다.
전반적으로 DOM 트리는 HTML과 자바스크립트 사이의 인터페이스 역할을 하며, 웹 페이지의 콘텐츠와 구조를 실시간으로 조작하는 강력한 방법을 제공합니다. 이를 통해 인터랙티브하고 동적인 웹 애플리케이션을 만들 수 있습니다.
감사합니다.
틀린 부분이 있거나 더 좋은 내용 훈수 환영합니다!
공감과 댓글 부탁드립니다.
'JavaScript' 카테고리의 다른 글
[자바스크립트] 브라우저 객체 모델 (1) (0) | 2023.08.20 |
---|---|
[자바스크립트] Array 객체의 함수 (2) (0) | 2023.08.03 |
[자바스크립트] Array 객체의 함수 (1) (0) | 2023.08.02 |
[자바스크립트] 배열, Array 객체 (0) | 2023.07.30 |
[자바스크립트] 객체와 객체를 이용한 프로그램 (4) | 2023.07.29 |