[DAY6] JS/브라우저 DOM

목차

🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일

⭐요약

---

JavaScript에서 DOM(Document Object Model)의 기초 개념과 HTML 요소를 생성·추가·조회·변경·삭제하는 방법에 대해 정리한다.

 

Chapter 1. DOM 기초	DOM은 HTML 요소를 JavaScript Object처럼 조작할 수 있는 모델임
CREATE	document.createElement('요소명')으로 HTML 요소를 생성함
APPEND	부모요소.append(element)로 생성한 요소를 부모 노드에 포함시킴
READ	querySelector로 첫 번째 요소를, querySelectorAll로 모든 요소를 유사 배열로 조회함
UPDATE	textContent로 내용을 변경하고, classList.add()와 setAttribute()로 속성을 추가함
DELETE	remove(), innerHTML, removeChild()로 요소를 삭제함. 보안상 removeChild() 사용을 권장함

 

⭐DOM 기초

---

• DOM(Document Object Model): HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다.
• 즉, JavaScript를 사용하여 HTML의 내용·구조·스타일을 동적으로 변경할 수 있게 해주는 인터페이스이다.

⭐DOM 다루기

---

1. CREATE

• CREATE: DOM을 이용하여 HTML Element를 새로 생성한다.

🚀 document.createElement('요소명'): element를 생성한다.

document.createElement('div')

생성한 요소를 변수에 저장하여 이후 작업에서 활용할 수 있다.

const tweetDiv = document.createElement('div')

2. APPEND

• APPEND: DOM을 이용하여 HTML Element를 부모 노드에 포함시킨다.

🚀 부모요소.append(element): 부모 요소의 마지막 자식으로 element를 추가한다.

document.body.append(tweetDiv)

3. READ 

• READ: DOM을 이용하여 HTML Element를 조회한다.

🚀 document.querySelector(선택자): 선택자에 해당하는 요소 중 첫 번째 요소를 조회한다.

• 선택자 종류: HTML 요소명("div"), id(#id값), class(.클래스값)

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

🚀 document.querySelectorAll(선택자): 선택자에 해당하는 모든 요소를 조회하여 유사 배열로 반환한다.

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

🚀 document.getElementById(id값): querySelector와 유사한 역할을 하는 오래된 방식이다.

const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true

아래는 READ로 조회한 요소에 새로 생성한 요소를 추가하는 예시이다.

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
// tweetDiv를 container의 마지막 자식 요소로 추가한다.

4. UPDATE

• UPDATE: DOM을 이용하여 HTML Element를 변경한다.

🚀 textContent: 요소의 텍스트 내용을 변경한다.

const oneDiv = document.createElement('div');
oneDiv.textContent = 'dev';
console.log(oneDiv) //dev

🚀 classList.add(): 요소에 class 속성을 추가한다.

oneDiv.classList.add('tweet')
console.log(oneDiv) //dev

 

🚀 setAttribute(): class 외의 다른 attribute를 추가하거나 변경한다.

5. DELETE

• DELETE: DOM을 이용하여 HTML Element를 삭제한다.

🚀 remove(): 특정 요소를 삭제한다.

const container = document.querySelector('#container')
const oneDiv = document.createElement('div')
container.append(oneDiv)
oneDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

🚀 innerHTML: 여러 개의 자식 요소를 한 번에 삭제할 때 사용한다. 단, XSS(크로스 사이트 스크립팅) 등 보안 문제가 있으므로 주의가 필요하다.

document.querySelector('#container').innerHTML = '';
// id가 container인 요소 아래의 모든 자식 요소를 삭제한다.

🚀 removeChild(): 자식 요소를 지정하여 삭제한다. innerHTML의 보안 문제를 해결할 수 있는 방법이다.

// container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거한다.
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

// container의 자식 요소가 1개만 남을 때까지, 마지막 자식 요소를 제거한다.
const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

🚀 클래스 이름으로 특정 요소만 찾아서 제거하는 경우

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}

⭐후기

---

• DOM의 CRUD(CREATE, READ, UPDATE, DELETE) 흐름이 데이터베이스 개념과 유사하다는 점이 흥미로웠다.
• innerHTML이 편리하지만 보안 문제가 있다는 점이 인상적이었다. removeChild()를 우선적으로 활용하는 습관을 들여야겠다.

⭐참고자료

---

1) MDN Web Docs, "Document.querySelector()", https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector

2) MDN Web Docs, "Node.removeChild()", https://developer.mozilla.org/ko/docs/Web/API/Node/removeChild

3) MDN Web Docs, "Element.classList", https://developer.mozilla.org/ko/docs/Web/API/Element/classList

 

이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.