DOM 소개
페이지 정보
작성자 운영자 작성일 19-06-13 17:28 조회 1,226 댓글 0동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
DOM은 웹사이트를 정적인 것에서 동적인 것으로 변환하는데 필수적 부분입니다.
초기 인터넷 시대에 HTML만으로 정보를 일방적으로 제공하던 때는 DOM의 이해가 그렇게 필요하지 않았습니다.
인터넷 발전과 더불어 사용자와 상호작용하는 부분이 늘어나고 자바스크립트 사용과 동적인 웹사이트가 되면서 DOM의 이해는 필수적입니다.
더욱이 지금은 자바스크립트의 생태계가 인터넷을 점령하고 있고 React, Vue로 대표되는 현대 프론트앤드에서 가상DOM(Virtual DOM)이 주류가 되고 기존 DOM을 이해하지 못하면 한 발자국도 나아가기 힘든 세상이 되었습니다.
DOM이란 프로그래밍 언어가 웹 사이트의 내용, 구조 및 스타일을 조작 할 수 있게 해주는 인터페이스입니다. JavaScript는 인터넷 브라우저에서 DOM에 연결하는 클라이언트 측 스크립팅 언어입니다.
웹 사이트에서 아래는 거의 대부분 Javascript가 DOM에 액세스하고 조작한 결과입니다.
-, 이미지의 슬라이드 쇼간에 회전할 때,
-, 사용자가 불완전한 양식을 제출하려고 할 때 오류를 표시할 때,
-, 탐색 메뉴를 전환하는 등의 작업을 수행할 때
그럼
1. DOM이 무엇인지,
2. 문서 객체(document object)를 사용하여 작업하는 방법,
3. HTML 소스 코드와 DOM의 차이점에 대해 알아 봅니다.
사전학습
DOM이란 무엇입니까?
웹 사이트는 HTML 문서로 구성됩니다. 웹 사이트를 보는 데 사용하는 브라우저는 HTML과 CSS를 해석하고 사용자가 보는 페이지에 스타일, 내용 및 구조를 렌더링하는 프로그램입니다.
브라우저는 HTML과 CSS의 스타일과 구조를 구문 분석하는 것 외에도 문서 객체 모델(Document Object Model)이라는 문서의 표현을 만듭니다. 이 모델을 사용하면 JavaScript가 웹 사이트 문서의 텍스트 내용과 요소에 객체(objects)로 액세스 할 수 있습니다.
아주 간단한 웹 사이트를 만들어 보겠습니다. index.html을 만들고 새 프로젝트 디렉토리에 저장하십시오.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>DOM 배우기</title>
</head>
<body>
<h1>Document Object Model</h1>
</body>
</html>
이 코드는 새로운 웹 사이트 뼈대의 익숙한 HTML 소스입니다. 웹 사이트 문서의 가장 필수적인 면을 포함하고 있습니다.
즉, doctype과 html 태그 안에 head와 body가 중첩되어 있습니다.
선택한 브라우저로 index.html을 엽니다.
"Document Object Model"이라는 제목의 일반 웹 사이트가 표시됩니다. 페이지의 아무 곳이나 마우스 오른쪽 버튼을 클릭하고 "Inspect(검사)"를 선택하십시오.(또는 키보드 F12 또는 CTL + Shift + I) 그러면 브라우저의 개발자 도구가 열립니다.
요소(Elements) 탭에서 DOM을 볼 수 있습니다.
이 경우, 방금 작성한 HTML 소스 코드 (doctype)와 우리가 추가 한 다른 HTML 태그와 완전히 똑같습니다. 각 요소 위에 마우스를 올리면 렌더링 된 웹 사이트의 각 요소가 강조 표시됩니다. HTML 요소의 왼쪽에 있는 작은 화살표를 사용하여 중첩 된 요소의 보기를 전환 할 수 있습니다.
문서 개체 (Document Object)
document 객체는 웹 사이트에 액세스하고 수정할 때 사용할 수 있는 많은 속성과 메서드가 있는 내장 객체입니다. DOM 작업 방법을 이해하려면 JavaScript에서 객체가 작동하는 방식을 이해해야 합니다. 객체의 개념에 익숙하지 않은 경우 JavaScript의 객체 이해를 검토하십시오.
index.html의 개발자 도구에서 콘솔 탭으로 이동하십시오. document를 콘솔에 입력하고 Enter 키를 누릅니다. 결과는 요소 탭에서 볼 수 있는 것과 동일합니다.
DOM과 HTML 소스 코드의 차이점은 무엇입니까?
이 예제에서 HTML 소스 코드와 DOM은 완전히 똑같은 것으로 보입니다.
브라우저에서 생성한 DOM이 HTML 소스 코드와 다른 두 가지 인스턴스가 있습니다.
- DOM은 클라이언트측 JavaScript에 의해 수정됩니다.
- 브라우저가 자동으로 소스 코드의 오류를 수정합니다.
클라이언트측 JavaScript로 DOM을 수정해 보겠습니다.
콘솔에 다음을 입력하십시오.
>document.body;
콘솔은 다음 출력으로 응답합니다.
document는 객체이고 body는 점 표기법으로 액세스 한 객체의 속성입니다. document.body를 콘솔에 제출하면 body 요소와 그 안의 모든 내용이 출력됩니다.
콘솔에서는 본 웹 사이트에서 본문 개체의 일부 라이브 속성을 변경할 수 있습니다. 스타일 속성을 편집하여 배경색을 violet으로 변경합니다. 콘솔에 다음을 입력하십시오.
>document.body.style.backgroundColor = 'violet';
위 코드를 입력하고 제출하면 배경색이 변경 될 때 사이트에 대한 실시간 업데이트가 표시됩니다.
Elements 탭으로 전환하거나 콘솔에 document.body를 다시 입력하면 DOM이 변경된 것을 확인할 수 있을 겁니다.
** background-color CSS 속성을 변경하려면 JavaScript에 backgroundColor를 입력해야 했습니다. 하이픈으로 연결된 모든 CSS 속성은 JavaScript의 camelCase로 작성됩니다.
body의 배경색에 violet을 지정하여 입력 한 JavaScript 코드는 이제 DOM의 일부입니다.
그러나 페이지를 마우스 오른쪽 단추로 클릭하고 "페이지 소스보기"를 선택하십시오. 웹 사이트의 소스에는 JavaScript를 통해 추가 한 새 스타일 속성이 포함되어 있지 않습니다. 웹 사이트의 소스는 변경되지 않으며 클라이언트 측 JavaScript의 영향을 받지 않습니다. 페이지를 새로 고침하면 콘솔에 추가 한 새 코드가 사라집니다.
DOM이 HTML 소스 코드와 다른 출력을 갖는 다른 인스턴스는 소스 코드에 오류가 있는 경우입니다. 일반적인 예로 테이블 태그가 있는데, 표 안에는 tbody 태그가 필요하지만 개발자는 종종 HTML에 태그를 포함하지 않습니다. 브라우저는 자동으로 오류를 정정하고 tbody를 추가하여 DOM을 수정합니다. DOM은 닫히지 않은 태그도 수정합니다.
댓글목록 0
등록된 댓글이 없습니다.
