🥅 DOM 조작 방법

🥅 DOM (문서 객체 모델 : Document Object Model) 이란?

HTML, XML 문서의 프로그래밍 인터페이스로, HTML 요소를 object처럼 조작할 수 있는 model입니다.

특징

• HTML을 조작하는 방법 중 가장 기초적이고, 새로운 element를 만들어 낼 수 있다.
• 문서의 구조화된 표현을 제공한다.
• 프로그래밍 언어가 DOM 구조에 접근하는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

🥅 Achievement Goals

document 객체를 통해서 HTML 엘리먼트를 만들고, CRUD 방법을 공부해보자.

1. CREATE : createElement
2. READ : querySelector, querySelectorAll
3. UPDATE : textContent, id, classList, setAtrribute
4. DELETE : remove, removeChild, innerHTML, textContent
5. APPEND : appendChild

CREATE

element를 생성합니다.

/* 1 */

// div element 생성
document.createElement('div')

// 변수 할당
const tweetDiv = document.createElement('div')

APPEND

element를 적용합니다.

/* 2 */

// 변수 할당
const tweetDiv = document.createElement('div')

// 변수를 body에 넣어 DOM 트리 구조와 연결
document.body.append(tweetDiv)

READ

element를 조회합니다.

정보를 조회하기 위해서는 querySelector의 첫 번째 파라미터(셀렉터)를 전달하여 확인 할 수 있습니다.

셀렉터로 HTML 태그, id 값, class 가 가장 많이 사용됩니다.

// className이 tweet인 HTML element 중 첫 번째를 조회
const oneTweet = document.querySelector('.tweet')

// 모든 '.tweet'인 HTML element를 조회
const tweets = document.querySelectorAll('.tweet')

/* 3 */

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

// className이 container의 맨 마지막 자식 element로 tweetDiv를 추가
container.append(tweetDiv)

UPDATE

element를 업데이트합니다.

// 만들고 싶은 element 생성
const tweetDiv = createElement('div')

console.log(tweetDiv) //<div></div>

// element에 text 삽입
tweetDiv.textContent = "김희연"
console.log(tweetDiv) //<div>김희연</div>

// element에 CSS 삽입
tweetDiv.classList.add('tweet')
console.log(tweetDiv) //<div class="tweet">김희연</div>

// element container 안에 배치
const container = document.querySelector('#container')
container.append(tweetDiv)

DELETE

element를 삭제합니다.

innerHTML : 모든 element를 삭제할 수 있지만, 보안에서 몇 가지 문제가 있다.

removeChild : innerHTML의 보안 문제를 해결하기 위해 사용하는 메소드, 자식 element를 지정해서 삭제한다.

/* 3 */

tweetDiv.remove()

// 모든 element 삭제 : innerHTML
document.querySelector('#container').innerHTML = '';

// 지정 element 삭제 : removeChild
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}