DOM 기초

DOM이란?
DOM = Document Object Model
HTML 요소를 Object(JavaScript Object)처럼 조작(manipulation)할 수 있는 model
즉, 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있음

HTML은 브라우저에 보내는 주문서
모든 HTML element(요소)들은 기본적으로 node이다.
= 개, 고양이 = 포유류

🔶 node의 기능: textContent, childNodes, firstChild, lastChild, parentNode, appendChild..

DOM 은 HTML이나 XML문서를 실체로 나타내는 API
DOM은 이 node들로 만들어진다.

✔️ console.dir (document.body.children) ▶️ HTML의 부분의 자식 엘리먼트 조회하는 명령어

✔️ console.dir (document.body.children[1]) ▶️ HTML 부분의 index 1번째 자식 엘리먼트 조회

✔️ querySelector 는 '요소찾기'

✔️ querySelectorAll은 '모든 요소 찾기'

✔️ textContent 는 'tag내용 추가'
.

CRUD(Create, Read, Update and Delete)

1. CREATE

새로운 div element 생성

document.createElement('div')

새롭게 생성한 div element를 변수에 할당

const tweetDiv = document.createElement('div')

2. APPEND

CREATE에서 만든 tweetDiv 라는 변수는 아직 "공중부양"을 하고 있다. append 라는 메소드를 사용해서, 변수 tweetDiv 를 body 에 넣어본다.

변수 tweetDiv에 담긴 새로운 div 엘리먼트를 body 엘리먼트에 append :

document.body.append(tweetDiv)

3. READ

querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트 조회 가능

const oneTweet = document.querySelector('.tweet') 
// querySelector로 클래스 이름이 tweet인 HTML 엘리먼트 조회

const tweets = document.querySelectorAll('.tweet')
// querySelectorAll로 클래스 이름이 tweet 인 모든 HTML 엘리먼트를 유사 배열로 받아오기
// (조회한 HTML 엘리먼트들은 배열처럼 for문 사용가능. But! 조회한 HTML 엘리먼트들은 배열X -> Array-like Object (유사배열)

document.querySelector('div') 
// 최상단 div 하나만 조회.

CREATE에서 생성한 div 엘리먼트를 container에 넣을 준비 끝! 아래 코드 입력 시, container의 맨 마지막 자식 엘리먼트로 tweetDiv를 추가 :

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')

container.append(tweetDiv)

4. UPDATE

UPDATE에서는 기존에 생성한 빈 div 태그를 업데이트하여, 보다 다양한 작업을 할 수 있다. textContent 사용해서, 비어있는 div 엘리먼트에 문자열 입력

console.log(oneDiv)      
// <div></div> 상태로 확인가능

oneDiv.textContent = 'dev';
console.log(oneDiv) 
// <div>dev</div> 상태로 확인가능

classList.add를 이용해 'tweet'이라는 class를 추가

oneDiv.classList.add('tweet')

console.log(oneDiv) // <div class="tweet">dev</div> 상태로 확인가능

append를 이용해 container의 자식요소에 oneDiv를 추가

const container = document.querySelector('#container')
container.append(oneDiv)

5. DELETE

삭제하려는 element의 위치를 알고 있는 경우 :

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.