자바스크립트 - 웹페이지를 조작하는 DOM

웹이란

웹이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미합니다.(출처 - 위키백과)

이러한 웹에서 HTML로 작성된 페이지를 웹 페이지라고 하고,

이 웹페이지들이 여러개 모여있는 집합을 웹사이트라고 부릅니다.

 

웹 사이트란, http://google.com/과 같은 주소, url에 접속해서 볼 수 있는 웹 페이지들을 통틀어 말하는 말로, 흔히 말하는 홈페이지라고 할 수 있습니다.

 

 

 

HTML과 CSS

HTML : Hyper Text Markup Language의 약자로, 쉽게 말하면 브라우저에게 웹 페이지의 요소들이 어떻게 구성되어있는지를 알려주는 역할

CSS : Cascading Style Sheets의 약자로, 말 그대로 웹 페이지의 요소들을 꾸며주는 역할을 하는 sheet 입니다.

 

네이버 메인페이지를 예시로 보면,

초록색,이미지,아이콘,폰트 등은 css를 통해 설정

검색창, 글자, 로그인 버튼 등은 html을 통해 생성

로그인 버튼 클릭, 검색하기, 다른페이지로 이동하기 등의 동적인 기능은 자바스크립트로 개발

 

즉, HTML은 웹 요소들을 구성하고, CSS는 웹 요소들을 꾸며주고, Javascript는 웹 요소들을 생성, 삭제, 변형 

 

 

 

DOM란

DOM이란 Document Object Model문서 객체 모델로, HTML로 작성된 여러 요소들에 자바스크립트가 접근할 수 있도록 브라우저가 변환시킨 객체입니다. 

쉽게 말해, 브라우저가 우리가 작성한 HTML을 자바스크립트가 이해하고 조작할 수 있게 "객체로 변환"한 것 입니다.

 

웹 브라우저는 HTML문서를 불러 온 다음 트리구조로 나타내는데, 이를 DOM Tree라고 부릅니다.

Dom Tree에서 아이템 하나하나를 노드(Node)라고 부르며, 이 노드들은 하나의 객체로 이루어져 있고,

웹 브라우저는 이 Dom Tree를 통해 웹 요소들을 웹 페이지에 나타낼 수 있습니다. 

 

이러한 DOM은 자바스크립트가 자신에게 접근해 DOM을 조작하고 수정할 수 있는 방법을 제공

이 방법을 DOM API라고 부르며, 자바스크립트는 DOM이 제공하는 DOM API를 통해 웹 요소들을 수정하고 조작할 수 있습니다.

 

 

---

참고자료

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의