HTML(Hyper Text Markup Language)은 웹 페이지의 구조를 정의하기 위한 마크업 언어입니다. HTML 문서는 브라우저에 의해 해석되어 웹 페이지의 구조와 내용이 표시됩니다.
DOM(Document Object Model)은 HTML 문서를 계층 구조로 표현하는 모델입니다. DOM은 HTML 문서의 모든 요소를 객체로 표현하며, 이를 통해 JavaScript와 같은 스크립트 언어로 HTML 문서의 구조와 내용을 동적으로 조작할 수 있습니다.
JavaScript는 1995년에 브렌던 아이크(Brendan Eich)가 개발한 스크립트 언어입니다. 처음에는 브라우저에서 간단한 검증 기능을 수행하는 데에 주로 사용되었습니다.하지만 현재 웹 페이지의 동적인 기능을 구현하는 데에 필수적인 언어로 성장했습니다. 또한 OS단에서 동작하는 javscript 런타임 Node.js의 등장으로 서버 측에서도 활용될 수 있는 범용적인 프로그래밍 언어로 성장하였습니다.
- 핵심 언어(ECMAScript)
- DOM(Document Object Model)을 포함한 Web API
HTML, DOM, Javscript의 서로간의 관계는,
HTML 문서를 로드하면 브라우저는 문서의 구조를 DOM으로 변환합니다. 이후 JavaScript를 사용하여 DOM에 접근하고 조작할 수 있습니다. 이를 통해, 웹 페이지를 동적으로 변경하거나 이벤트 처리를 수행하는 등의 작업을 수행할 수 있습니다.
1. HTML 문서와 해당 문서의 DOM으로 변환 예시
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<meta></meta>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Us</h2>
<p>...</p>
</section>
</main>
<footer>
<p>© My Website</p>
</footer>
</body>
</html>
위의 HTML 문서를 브라우저가 해석한 결과 DOM은 다음과 같습니다.
HTML ├── HEAD │ ├── TITLE │ └── META └── BODY ├── HEADER │ ├── H1 │ └── NAV │ └── UL │ ├── LI │ ├── LI │ └── LI ├── MAIN │ └── SECTION │ ├── H2 │ └── P └── FOOTER └── P
2. javscript의 DOM 사용
이렇게 변경된 DOM에 JavaScript를 사용하여 접근하고 조작할 수 있습니다.
Javascript를 이용해서 DOM에 접근, 페이지의 제목을 변경하는 예시입니다.
document.querySelector('header h1').textContent = 'My New Website';
이후 변화된 내용은 브라우저를 통해 사용자가 확인할수 있게됩니다.