- 프론트엔드 공부 26일차 -
DOM ( Document Object Model)
브라우저가 HTML 문서를 파싱(해석)하는 과정에서 생겨나는 객체
DOM 트리
Document
- 문서(document) 노드, DOM에 진입할 수 있는 진입점 역할을 해준다.
HTML
- Document를 제외하고 최상위에 위치, 이러한 노드를 루트(root) 노드라고 한다. 루트 노드는 항상 하나만 존재합니다.
head, body, title, div
- 요소(element) 노드라 부른다. 속성 노드를 가질 수 있는 유일한 node입니다.
src=…, id=”…”
- 속성(attribute) 노드라 부른다. 이들은 요소 노드에 관한 별도의 정보를 담고 있지만, 해당 요소 노드의 child node에는 속하지 않는다.
<h1>A1</h1> … <button>B</button?
A, B
- 텍스트(text) 노드라고 부른다. 텍스트 노드는 child node, 자식 노드를 가질 수 없기 때문에 항상 leaf node가 된다.
Parent Node : 각 node의 바로 위에 위치한 Node를 Parent Node, 부모 노드라 한다.
Chile Node : 각 node의 바로 아래에 위치한 Node를 Child Node, 자식 노드라 한다.
Leaf Node : 트리구조 내에서 가장 끝단에 위치한, Child Node가 없는 Node를 가리킨다.
실습
Todo list 만들기
<HTML>
<!DOCTYPE html>
<html lang="ko">
<head>
<title>오늘 할일</title>
<link rel="stylesheet" href="./index.css" />
<script src="./index.js" defer></script>
</head>
<body>
<h1>ToDo</h1>
<div class="todoContainer">
<input type="text" id="todoInput" onkeydown="keyCodeCheck()" />
<ul id="todoList"></ul>
</div>
</body>
</html>
<JS>
const todoInput = document.querySelector("#todoInput");
const keyCodeCheck = function () {
if (window.event.keyCode === 13 && todoInput.value !== "") {
const todoList = document.querySelector("#todoList");
const newLi = document.createElement("li");
const newSpan = document.createElement("span");
newSpan.textContent = todoInput.value;
newLi.appendChild(newSpan);
todoList.appendChild(newLi);
todoInput.value = "";
}
};
리스트
<ol></ol>
-Ordered List 약자
번호를 가진 리스트 생성
<ul></ul>
- Unorderd List 약자
점을 가진 리스트가 생성
window.event - 키보드 버튼이 누르거나 마우스 클릭 하는 등, 사용자의 액션을 읽는 코드
window.event.keyCode === 13 - 'Enter를 입력했을 경우' 의미
요소를 생성하는 코드
- newLi라는 이름으로 li 형태의 요소를 생성한다.
newSpan을 newLi의 ChildNode(하위노드)로 만든다.
'프론트엔드 공부 > Javascript 기초' 카테고리의 다른 글
| 28일차 프론트엔드 공부 - API (0) | 2024.10.10 |
|---|---|
| 27일차 프론트엔드 공부 - (1) | 2024.10.09 |
| 25일차 프론트엔드 공부 - 함수 (1) | 2024.10.06 |
| 24일차 프론트엔드 공부 - 반복문 (0) | 2024.10.05 |
| 23일차 프론트엔드 공부 - 조건문 (0) | 2024.10.02 |