BOM이란 무엇인가?
Browser Object Model의 줄임말로, 브라우저 객체 모델이다.
웹 서비스는 브라우저를 바탕으로 하는데, 이와 관련한 객체들의 집합이라 할 수 있다.
브라우저와 관련된 기능들은 이 브라우저 객체 모델을 이용해 구성돼 있다.
DOM은 이 BOM중 하나라고 할 수 있다.
BOM의 최상위 객체는 window라는 객체이며,
이 window객체의 하위 객체가 바로 DOM이다.
DOM이란 무엇인가?
Document Object Model 의 약자로 도큐먼트 객체 모델이다.
JS프로그래밍을 해봤다면 알텐데, document 객체를 활용한 메소드등을 이용해본 적이 있을 것이다.
html태그는 수직적 트리구조를 지니고 있으며, 이때 JS에서는 HTML문서의 태그를 document 객체로 접근한다.
이렇게 html문서의 태그들을 JavaScript가 이용할 수 있는 객체로 만들고,
또 역으로 JS를 이용해 html문서의 태그들을 만드는게 DOM이라고 할 수 있다.
JS로 문서 객체를 생성한다는 것은 어떤 의미인가?
문서 객체가 생성되는 방식은 두가지이다.
우선 웹 브라우저가 HTML페이지에 적혀 있는 태그를 읽으며 생성되는 것이고,
반대로 HTML페이지에 없던 객체를 JS를 이용해 생성할 수도 있다.
이런 과정은 동적으로 문서 객체를 생성한다고 하며,
JS로 문서객체를 생성한다는 것은 HTML에 없던 문서 객체를 동적으로 생성한다는 것이다.
예제
<body>
<form id = "todo-form">
<input type="text" placeholder="Write a To Do and Press" required >
</form>
<ul id = todo-list></ul>
</body
const toDoForm = document.querySelector("#todo-form")
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.querySelector("#todo-list");
function paintToDo(newTodo) {
const li = document.createElement("li")
li.id = newTodo.id
const span = document.createElement("span")
span.innerText = newTodo.text;
const button = document.createElement("button")
button.innerText = "❌"
button.addEventListener("click", deleteToDo)
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
function handleToDoSubmit(event){
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
const newTodoObj = {
text:newTodo,
id: Date.now(),
}
toDos.push(newTodoObj)
paintToDo(newTodoObj)
saveToDos();
}'Domain 지식들' 카테고리의 다른 글
| 스키마란 무엇인가? (0) | 2023.04.03 |
|---|---|
| 스크립팅 언어란 무엇인가? (0) | 2023.04.03 |
| SSO란? (0) | 2023.03.15 |
| vagrant란 무엇인가? (0) | 2022.12.06 |
| 릴레이션과 키들의 개념 (0) | 2022.11.21 |
댓글