| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
- over()
- continue 사용법
- SQL Mapper
- 중첩 break
- spring security 설정
- 붕대 감기
- 멀티프로세싱
- 자바의 정석
- 캡슐화
- 입출력
- 쿠키
- hackerrank
- 다형성
- 멀티태스킹
- 프로그래머스
- break 사용법
- 오버로딩
- 혼공얄코
- 오버라이딩
- spring security
- 붕대 감기 자바
- 리눅스
- java
- 객체지향
- 오블완
- 티스토리챌린지
- 프로그래머스 붕대 감기
- 자바의정석
- CPU
- contiune
- Today
- Total
쉽게 쉽게
BOM과 DOM이란? 본문
공부한 개발 관련 지식을 정리하며 쓴 글입니다.
자바스크립트는 4가지로 세분화할 수 있다.
| 분류 | 설명 |
| 자바스크립트 Core | 문법기본문법, 데이터타입, 조건문 등이 포함자바스크립트 |
| Core 라이브러리 | 내장함수들이 포함되어있음, Date, Math 등 |
| 자바스크립트 DOM | 노드(node), 스타일, 속성, 이벤트 등을 다룰 수 있는 다양한 기능 포함 |
| 자바스크립트 BOM | 브라우저와 관련된 Window, Navigator, Location, History, Document, Screen 객체가 포함 |
자바스크립트를 사용하면서 document.ready, getElementById, location.href 등의 기능을 많이 사용했을 것이다.
이런 기능들을 특별히 정의하지 않았는데도 사용할 수 있었던 이유는 바로 BOM과 DOM 객체를 포함하고 있기 때문이다.
1. BOM(Browser Object Model)이란?
BOM(브라우저 객체 모델)은 브라우저와 컴퓨터 스크린에 접근할 수 있는 객체의 모음을 말한다.
BOM은 window를 제어하며, window 객체를 통해 접근이 가능하다.
- navigator : 브라우저명과 버전정보를 속성으로 가짐
- window : 최상위 객체로, 각 프레임별로 하나씩 존재
- document : 현재문서에 대한 정보
- location : 현재 URL에 대한 정보, 브라우저에서 사용자가 요청하는 URL
- history : 현재의 브라우저가 접근했던 URL history
- screen : 브라우저의 외부환경에 대한 정보를 제공
2. DOM(Document Object Model)이란?
DOM(문서 객체 모델)은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
DOM은 nodes(노드)와 objects(객체)로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜 주는 역할을 담당한다.(MDN 사이트의 정의)
정리하면
브라우저들은 사용자가 띄운 웹문서를 그 구성과 내용에 맞게 객체화하여 각 요소별(텍스트, 버튼, 이미지 등)로 구조화한다.
이 요소들은 상,하위 구조나 병렬구조로 체계화되는데 이 웹문서(document)에 대한 모든 내용을 담고 있는 객체를 DOM이라고 한다.
즉 웹페이지는 <html>이 모든 태그들을 감싸고 있으며, 다시 <head>와 <body>로 나누어진다.
<body>태그에는 <header><main><section><footer>의 구조로 나뉘고, 그 하위 구조에 <div>, <p>, <ul>, <form> 등의 요소들이 배치된다. 이러한 구조들을 종합하여 DOM이라고 한다.
DOM은 HTML 문서를 데이터의 상하위 계층을 나타내는 노드를 이용한 노드트리(node tree)로 표현한다.
자바스크립트 내에 DOM을 이용해 이러한 속성들에 접근하여 내용변경, 수정, 제어 등을 실행할 수 있다.
(DOM은 웹페이지의 내용을 제어한다.)
DOM에는 document 객체를 통하여 접근할 수 있다.
- getElementById()
- getElementByTagName()
- getElementByClassName()
- querySelector()
참고
https://be-a-weapon.tistory.com/144
[Web] DOM, 그리고 BOM이란?
수도 없이 사용했던 document.ready, getElementById, location.href .. '이런 접근은 어떻게 가능한 것일까?'를 한번도 생각해 본 적이 없었던 나를 반성하며 정리하는 글 DOM ◽ DOM(Document Object Model) - 단어 그
be-a-weapon.tistory.com
https://goddino.tistory.com/71
[js] DOM과 BOM의 차이점
자바스크립트의 기본 DOM 과 BOM 에 대하여 알아보겠습니다. DOM(Document Object Model, 문서 객체 구조) 브라우저들은 사용자가 띄운 웹문서를 그 구성과 내용에 맞게 객체화하여 각 요소별(텍스트, 버
goddino.tistory.com
DOM 소개 - Web API | MDN
이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한
developer.mozilla.org
https://heecheolman.tistory.com/35
[Javascript] BOM 과 DOM 이란?
BOM Javascript Javascript 는 4가지로 세분화할 수 있다 분류 설명 자바스크립트 Core문법 기본문법, 데이터타입, 조건문 등이 포함 자바스크립트 Core라이브러리 내장함수들이 포함되어있음, Date, Math 등
heecheolman.tistory.com
| 잘못된 내용이 있다면 지적부탁드립니다. 방문해주셔서 감사합니다. |
'CS > CS' 카테고리의 다른 글
| 컴퓨터 구성요소 (0) | 2023.05.07 |
|---|---|
| XML, JSON (0) | 2023.04.05 |
| API, REST, REST API (0) | 2023.04.01 |
| 쿠키, 세션, 토큰, 캐시 (0) | 2023.03.26 |
| 서버 서비스 구조와 관련 용어 (0) | 2023.03.15 |
