Section1 Unit10 JS/브라우저 DOM

Section1 Unit10 [JS/브라우저] DOM

📌 Chapter1. DOM 기초

• DOM(Documnet Object Model)은 HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. 즉, JavaScript를 사용해 DOM으로 HTML을 조작할 수 있다.

• 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document 객체를 조회할 수 있다.

console.log(document.body);
console.dir(document.body);

→ DOM 구조를 조회할 때는 DOM을 객체의 모습으로 출력하는 console.dir가 유용하다.

• Tree 구조의 DOM

📌 Chapter2. DOM 다루기

CRUD(Create, Read, Update and Delete)

어떤 종류의 개발이나 컴퓨터 언어를 배우더라도 가장 먼저 CRUD에 집중하는 것이 새로운 언어를 가장 빠르게 학습하는 방법 👍🏻

• CREATE

const tweetDiv = document.createElement("div")

• READ

const oneTweet = document.querySelector('.tweet')
const tweets = document.querySelectorAll('.tweet')

→ querySelectorAll은 유사배열 형태로 HTML 요소들을 배열처럼 다룰 수 있도록 해준다. (Array-like Object)

• UPDATE

// textContent를 이용해 문자열 입력
oneDiv.textContent = 'dev'; // <div>dev</div>

// classList.add를 이용해 'tweet' 클래스 추가
oneDiv.classList.add('tweet') // <div class="tweet">dev</div>

// setAttribute를 이용해 속성 추가
tweetDiv.setAttribute("name", "elem") // <div class="tweet" name="elem">hola</div>

• DELETE

// 삭제하려는 위치를 알고 있는 경우
tweetDiv.remove()

// 여러 개의 자식 요소를 지우려는 경우
document.querySelector('#container').innerHTML = '';

→ innerHTML을 이용하면 편리하지만, innerHTML은 보안에서 몇 가지 문제를 가지고 있다. innerHTML을 대신할 다른 메서드를 사용할 수 있다.

// container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

→ removeChild는 자식 요소를 지정해서 삭제하는 메서드로 모든 자식 요소를 삭제하기 위해, 반복문(while, for, etc.)을 활용할 수 있다.

📌 Chapter3. 이벤트 객체

function handleClick(event) {
  console.log(event);
}

• 이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체이다.

🌙 오늘의 회고

드디어 자바스크립트로 DOM을 다루는 수업에 들어왔다. 자바스크립트로 HTML 요소를 조작해 원하는 기능을 동적으로 구현할 수 있는 것이 재미있고, 매력적인 작업이라는 생각이 들었다.

이전에는 DOM Tree, Tree 구조라는 말이 와닿지 않았었다. 그런데 오늘 수업에서도 그렇고 과정 초반에 HTML을 이야기할 때에도 Tree 구조를 접했었다. 트리는 계층적인 구조를 갖는 데이터를 저장하고 검색하기 위한 자료구조로, DOM에서 트리 구조는 루트 노드에서 시작하여 하위 노드로 이어지는 계층적 구조를 갖는다. HTML 에서는 문서의 최상위 요소인 <html> 요소가 루트 노드가 되고, 이 노드 아래에는 <head>와 <body> 등의 하위 요소가 있는 것이다. 이렇게 몇 번 보다보니 DOM 트리 라는 용어도 익숙해지는 것 같다.

그래도 아직 말로 설명해보려고 하니 나의 언어로 설명하기는 어려운게 확실히 아는건 아닌가 보다. 이번에 자바스크립트의 다양한 개념과 용어를 배우면서도 머리로는 이해를 하는데 말로 설명하자니 명확하게 설명하지 못하는 부분이 많다는 것을 느꼈다. 더 열심히 공부해야겠다 🫠

저작자표시 비영리 변경금지

'Frontend Dev > 🐥 코드스테이츠 FE 부트캠프' 카테고리의 다른 글

Section1 Unit11 솔로 프로젝트 전, Git으로 협업하기 (0)	2023.05.04
Section1 Unit10 JS/브라우저 DOM - 유효성 검사 (0)	2023.05.03
Section1 Unit9 과제 JavaScript Koans (0)	2023.05.01
Section1 Unit9 JavaScript 핵심 개념과 주요 문법 - ES6 신규 문법 (0)	2023.04.28
Section1 Unit9 JavaScript 핵심 개념과 주요 문법 - 자료형, 스코프, 클로저 (0)	2023.04.27

FAY STORY

Section1 Unit10 JS/브라우저 DOM