※ '혼자 공부하는 얄팍한 코딩 지식'(고현민) 책을 읽고 작성한 글입니다.
(기초) 웹 사이트에 접속할 때 일어나는 일
네이버 웹사이트 접속
1. 사용자가 웹 브라우저(크롬, 웨일 등등)에 네이버 홈페이지 주소 입력.
2. 웹 브라우저는 네이버 서버에 '네이버 홈페이지에 접속하겠다'는 요청을 보냄.
3. 네이버 서버는 HTML 문서를 비롯해 각종 파일과 데이터를 보내면서 응답.
4. 웹 브라우저는 네이버 서버로부터 받은 문서를 실행해 네이버 홈페이지를 화면에 보여줌.
웹 페이지란?
위 내용에서 알 수 있듯, 우리가 이용하는 웹 페이지는 브라우저(크롬, 웨일 등)가 HTML 문서를 읽어서 브라우저 화면에 나타난 결과이다.
HTML 문서에는 CSS, 자바스크립트 가 첨부되어 사용자에게 더 많은 기능과 디자인의 제공이 가능하다.
HTML은 웹 페이지의 각 요소를 배치하는 역할을 한다면, CSS는 그 요소를 꾸미는 역할, 자바스크립트는 프로그래밍으로 기능들을 넣어주는(시키는) 역할.
웹 브라우저 란?
'HTML 형식의 문서를 읽는 프로그램'
DOM 이란?
브라우저는 'HTML 형식의 문서를 읽는 프로그램'이다.
브라우저가 HTML 형식의 문서를 읽고 만들어내는 것이 바로 DOM(Document Object Model)이다.
아래와 같이 HTML 문서는 다음의 DOM 형식으로 변환된다.
HTML 요소들의 구조가 트리 형식으로 반영이 됨을 알 수 있다.
돔 구조가 트리 형식을 가지고 있기 때문에, 돔 트리라고도 불리기도 한다. 우리가 브라우저에서 보는 웹사이트의 모습은 돔 트리가 시각화되어 나타난 결과물이다.
DOM(돔) 이란 브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체(Object) 모델
브라우저는 왜 DOM을 만들까?
JavaScript가 이 DOM(Document Object Model)을 통해 웹 페이지에 접근하고, 페이지를 수정할 수 있다.
-> JavaScript는 DOM의 document 객체를 통해 HTML 문서에 접근할 수 있다.
DOM은, 자바스크립트가 HTML, CSS를 변경하여 사용자와 상호작용하는 web page(보다 더 interactive한 웹페이지)를 만들 수 있게 하는, browser가 만든 객체이다.
DOM 접근 메서드
document.getElementById("id명")
document.quertSelector("선택자")
document.getElementsByClassName("class명")[i]
document.getElementsByTagName("tag명")[i]
document.quertSelectorAll("선택자")[i]
※ '혼자 공부하는 얄팍한 코딩 지식'(고현민) 02-5 연습 문제 인증샷
참고 자료
https://velog.io/@solmii/TIL-DOM%EC%9D%B4%EB%9E%80
'자기계발 > 책' 카테고리의 다른 글
| [혼자 공부하는 얄팍한 코딩 지식] 프로그래밍 패러다임 (0) | 2022.08.09 |
|---|---|
| [혼자 공부하는 얄팍한 코딩 지식] 관계형 데이터베이스 종류 (0) | 2022.07.24 |
| [혼자 공부하는 얄팍한 코딩 지식] 용어 정리: 디버깅, 빌드 (0) | 2022.07.11 |
| [혼자 공부하는 얄팍한 코딩 지식] 개발자 진로, 개발자 이해하기 (0) | 2022.07.03 |
| 인사이드 자바스크립트 (0) | 2022.06.25 |