[Day6] DOM, BOM 이란?

Posted Feb 3, 2025 Updated Feb 4, 2025

BOM

By yeeun426

11 min read

[Day6] DOM, BOM 이란?

오늘 수업에서 DOM과 BOM에 대해서도 간단히 훑어보았다. DOM은 들어봐서 어느정도 알고 있었지만 BOM이란 용어는 처음 들어봐서 이에 대해 정리해보았다. 정리를 해보니 cookies에 대한 명확한 정리가 필요한 것 같아 이에 대해서 조만간 정리해야겠다 !

✅ : 강사님 부가 설명을 나타낼 때 사용할 때 나타내는 아이콘

DOM(Document Object Model)

객체 지향 모델로써 구조화된 문서를 표현하는 방식
HTML요소를 JavaScript Object처럼 조작할 수 있는 Model
즉, HTML의 작은 부분까지 접근할 수 있는 구조로, DOM을 이용하여 HTML로 구성된 웹페이지를 동적으로 움직이게 만들 수 있다.

DOM의 주요 특징 및 개념

트리 구조: DOM은 트리 구조로 표현되며, 각 노드는 웹 페이지의 다양한 부분 (예: 요소, 속성, 텍스트 등)을 나타낸다.
라이브 (Live) 특성: DOM은 ‘라이브’라는 특성이 있다. 즉, DOM에 대한 변경은 즉시 웹 페이지에 반영된다.
조작 가능: 자바스크립트를 사용하여 DOM 요소를 선택, 수정, 추가 또는 제거할 수 있다. *** DOM에서는 모든 HTML 요소가 객체로 정의된다.

DOM Tree의 객체 구성

DOM 프로그래밍 인터페이스

HTML DOM은 JavaScript(및 다른 프로그래밍 언어)를 통해 액세스할 수 있다.
DOM에서는 모든 HTML 요소가 객체 로 정의된다.
프로그래밍 인터페이스는 각 객체의 속성과 메서드이다.
- 속성 : 가져오거나 설정할 수 있는 작업 (HTML 요소의 내용을 변경하는 것)
- 메서드 : 사용자가 수행할 수 있는 작업(HTML 요소를 추가하거나 삭제하는 것)

getElementById 메서드 : HTML 요소에 접근하는 가장 일반적인 방법은 id요소를 사용하는 것
innerHTML 속성 : 요소의 내용을 가져오는 가장 쉬운 방법은 innerHTML속성을 사용하는 것

DOM - CRUD (Create Read Update Delete)

Read

Method	Description
document.getElementById(id)	Find an element by element id
document.getElementsByTagName(name)	Find elements by tag name
document.getElementsByClassName(name)	Find elements by class name
document.querySelector(name)	첫 번째 인자로 셀렉터를 전달하여 element의 정보를 조회

Update

Property	Description
element.innerHTML = new html content	Change the inner HTML of an element
element.attribute = new value	Change the attribute value of an HTML element
element.style.property = new style	Change the style of an HTML element

Method	Description
element.setAttribute(attribute, value)	Change the attribute value of an HTML element

Create & Delete

Method	Description
document.createElement(element)	Create an HTML element
document.removeChild(element)	Remove an HTML element
document.body.append(element)	HTML element를 부모 노드에 포함하는 방법
document.appendChild(element)	Add an HTML element
document.replaceChild(new, old)	Replace an HTML element
document.write(text)	Write into the HTML output stream
document.querySelectorAll(‘.tweet’).remove()	특정 class 이름을 가진 요소 제거

이벤트 핸들러 추가

Method	Description
document.getElementById(id).onclick = function(){code}	Adding event handler code to an onclick event

BOM (Browser Object Model)

Javascript가 브라우저와 소통하기 위해 만들어진 모델
모든 개별 객체들은 최상위 객체인 window 아래 존재
웹 페이지 내용을 제외한 웹 브라우저 창에 포함
window 속성에 속하며, document 문서가 아닌, window를 제어한다.

BOM 종류

window

최상위 객체로, 모든 브라우저에서 지원된다.
모든 전역 JS 객체, 함수, 변수는 자동으로 window 객체의 멤버가 된다.

  
window.document.getElementById("header");
document.getElementById("header");
// html DOM의 문서 객체도 창 객체의 속성이다. 위의 코드는 동일한 코드이다. 

💡 속성

속성 & method	역할
window.innerHeight	브라우저 창의 내부 높이(px 단위)
window.innerWidth	브라우저 창의 내부 너비(px 단위)
window.open()	새 창을 엽니다
window.moveTo()	현재 창을 이동합니다
window.resizeTo()	현재 창의 크기를 조정합니다

window.location

url 주소에 대한 정보를 제공한다.
window.location을 사용하면 현재 url를 가져오고 브라우저를 새 페이지로 리디렉션한다.

✅ window.location은 꽤 자주 사용함

💡 속성 (window 접두사 생략)

속성 & method	역할
location.href	현재 페이지의 href(URL)을 반환
location.hostname	웹 호스트의 도메인 이름을 반환
location.pathname	현재 페이지의 경로와 파일 이름을 반환
location.protocol	사용된 웹 프로토콜(http: 또는 https:)을 반환
location.assign()	새 문서를 로드

window.screen

브라우저의 외부 환경에 대한 정보를 제공한다.
사용자 화면에 대한 정보를 포함한다.

💡 속성 (window 접두사 생략)

속성 & method	역할
screen.width	방문자의 화면 너비를 픽셀 단위로 반환
screen.height	방문자 화면의 높이를 픽셀 단위로 반환

window.history

브라우저 기록이 포함되어 있다.

💡 속성 (window 접두사 생략)

속성 & method	역할
history.back()	브라우저에서 뒤로 클릭하는 것과 동일
history.forward()	브라우저에서 앞으로 클릭하는 것과 동일

window.navigator

방문자의 브라우저에 대한 정보가 포함되어 있다.

💡 속성 (window 접두사 생략)
|속성 & method|역할| |—|—| |navigator.cookieEnabled|쿠키가 활성화되어 있으면 해당 속성은 true를 반환하고, 그렇지 않으면 false를 반환| |navigator.platform|브라우저의 애플리케이션 코드 이름을 반환| |navigator.userAgent|브라우저에서 서버로 보낸 사용자 에이전트 헤더를 반환|

✅ 서버 입장에서 들어오는 모든 정보는 비신뢰 데이터이므로 최대한 보안해야함.

Javascript Timing Events

setTimeout(function, milliseconds)
지정된 밀리초 동안 기다린 후 함수를 실행합니다.

  
<button onclick="setTimeout(myFunction, 3000);">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
<!-- 버튼을 클릭합니다. 3초 동안 기다리면 페이지에 "Hello"라는 경고가 표시 -->

💡 How to Stop the Execution?
clearTimeout() 메서드는 setTimeout()에 지정된 함수의 실행을 중지한다.

  
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
<script>
function myFunction() {
  alert("Hello");
}
</script>

setInterval(function, milliseconds)
주어진 함수를 주어진 시간 간격마다 반복합니다.

  
<p id="demo"></p>
<script>
setInterval(myTimer, 1000);

function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
<!-- 위 예제는 myTimer라는 함수를 1초에 한번씩 실행한다. --> 

💡 How to Stop the Execution?
clearInterval() 메서드는 setInterval()에 지정된 함수의 실행을 중지한다.

** setTimeout()는 setInterval()모두 HTML DOM Window 객체의 메서드입니다. **

JavaScript Cookies

cookies란 사용자의 컴퓨터에 작은 텍스트 파일로 저장되는 데이터

웹 서버가 웹 페이지를 브라우저로 전송하면 연결이 끊어지고 서버는 사용자에 대한 모든 것을 잊게 된다. 쿠키는 “사용자에 대한 정보를 어떻게 기억할 것인가” 라는 문제를 해결하기 위해 등장.

사용자가 웹 페이지를 방문하면 그 이름이 쿠키에 저장될 수 있다.
다음에 사용자가 페이지를 방문하면 쿠키는 사용자의 이름을 “기억”한다.

JavaScript는 DOM, BOM 요소를 조작할 수 있기 때문에 화면을 동적으로 그리는 역할을 합니다. JS의 DOM 조작

  
// class명이 target인 요소 노드를 선택합니다.
const target = document.querySelector('.target');
// target 노드의 className을 'non-target'으로 변경합니다.
target.className = 'non-target';

JS의 BOM 조작

  
// userAgent 속성을 이용해서 크롬 환경인지 아닌지를 확인합니다.
const userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf('chrome') > -1) {
  console.log('크롬!');
} else {
  console.log('크롬ㄴㄴ');
}

Reference

이 포스트는 아래 게시글의 정보 및 이미지가 사용되었습니다.

w3schools

END

Ureca, Javascript

This post is licensed under CC BY 4.0 by the author.