DOM
DOM (Document Object Model)은 HTML 요소를 JavaScript Object처럼 조작할 수 있는 Model이다.
=> DOM을 통해 Javascript가 HTML의 태그, 속성, 스타일 등을 변경할 수 있다.
<script>
-
HTML에 JavaScript를 적용하기 위해서는
<script>태그를 이용한다. -
웹 브라우저가 코드를 해석하는 과정에서
<script>요소를 만나면, HTML 해석을 잠시 멈춘다. -
그리고 멈춘 웹 브라우저는
<script>요소를 먼저 실행한다.
-><script>요소는 등장과 함께 실행된다.
<script> 요소를 추가하는 방법
-
<head>요소에 추가한다. -
</body>가 끝나기 전에 추가한다.
❗❗❗ 그러나 </body>가 끝나기 전에 추가하는 방법이 권장된다. <head>에 추가할 경우, script가 실행되는 동안 미완성된 화면을 노출하게 된다. 반면, </body>가 끝나기 전에 script를 추가하면, 브라우저 렌더링이 완료된 상태에서 script가 실행되므로 미완성된 화면이 노출되는 시간이 적다.
CRUD
< HTML 파일을 브라우저에서 열고, console 탭을 통해 실습한다. >
1-1. CREATE
<div> 요소를 새롭게 생성한 후, DOM을 조작하기 위해 JavaScript처럼 변수(tweetDiv)에 할당한다.
const tweetDiv = document.createElement('div')tweetDiv 요소는 현재 공중부양 상태이므로 화면에는 아무런 변화가 없다.
1-2. APPEND
append를 통해 tweetDiv를 기존의 <body>객체에 붙인다.
document.body.append(tweetDiv)
2. READ
- DOM으로 HTML 요소의 정보를 조회하기 위해서는
querySelector의 첫 번째 인자로 셀렉터를 전달하여 확인할 수 있다.
2.1 셀렉터로 조회하기
- 셀렉터로는 HTML 요소(
div), id, class 등을 사용한다.
const oneTweet = document.querySelector('.tweet')
// oneTweet : 클래스 이름이 tweet인 요소 1개
const tweets = document.querySelectorAll('.tweet')
// tweets : 클래스 이름이 tweet인 요소들.-
이렇게 조회한 HTML 요소들은 배열처럼 for문을 사용할 수 있다.
-
단, 진짜 배열은 아니라 Array-like Object (배열 아닌 배열, 유사 배열, 배열형 객체 등)이다.
< container의 자식 요소로 tweetDiv 추가하기 >
const container = document.querySelector('#container')
container.append(tweetDiv)
//querySelector로 id가 container인 요소를 조회해서 container 변수에 할당한 후,
//그 container 변수에 tweetDiv를 추가한다.
2.2 get으로 조회하기
-
querySelector와 동일한 동작을 하는 오래된 방식이다. -
이전 버전의 브라우저(인터넷 익스플로러) 호환성을 신경 써야할 때 사용된다.
const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
getoneTweet = QueryOneTweet //true3. UPDATE
DOM을 이용하여 HTML 요소들을 다양하게 변경할 수 있다.
tweetDiv.textContent = 'dev`; //문자열 입력
twetDiv.classList.add('tweet')
//CSS 스타일링이 적용될 수 있도록, tweet 클래스를 추가한다.
4. DELETE
remove를 통해 요소를 삭제한다.
tweetDiv.remove()
< 여러 개의 자식 요소 삭제하는 방법 >
4.1 innerHTML
innerHTML은 간단하지만 보안에서 문제가 될 수 있다.- 대신
removeChild를 사용한다.
document.querySelector('#container').innerHTML = '';
4.2 removeChild
removeChild는 자식 요소를 지정해서 삭제하는 메서드이다.- 모든 자식 요소를 삭제하기 위해 반복문을 활용할 수 있다.
while (container.firstChild) {
container.removeChild(container.firstChild);
}
// 자식 요소가 남아있지 않을 때까지 첫 번째 자식 요소를 반복해서 삭제한다.-> 하지만 이 방법을 사용하면 의도치 않게 다른 요소까지 삭제할 수 있다.
(제목 H2 "Tweet List"까지 삭제됨.)
해결방법 1)
- container의 자식 요소가 1개만 남을 때까지, 마지막 요소를 제거한다.
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}
해결방법 2)
- 클래스 이름이 tweet인 요소만 찾아서 제거한다.
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for(let tweet of tweets) {
tweet.remove()
}