DOM은 무엇인가?
DOM은 Document Object Model 이다.
- HTML 요소를 Object처럼 조작할 수 있는 모델이다.
- JS를 사용할 수 있으면 , DOM으로 HTML을 조작할 수 있다.
HTML을 조작하는 것은 무슨 뜻인가?
DOM을 위해서 훌륭한 개발자들이 모여 HTML을 분석했고 , 이를 바탕으로 HTML의 아주 작은 부분까지 접근할 수 있는 구조(Model; Structure) 를 만들어냈다. 이렇게 만들어진 구조를 이용해서 HTML로 구성된 웹페이지를 동적으로 움직이게 만들 수 있다. 조건문, 반복문, 배열 그리고 객체를 활용하면 SNS에서 생성되는 post를 저장하고 분류하는 작업을 가능하게 할 수 있다.
Achievement Goals
- DOM의 개념을 이해해야한다.
- DOM의 구조를 파악하고, HTML과 DOM이 어떤 식으로 닮아있는지 알아야한다.
- HTML에서 JS파일을 불러올 때 주의점이 무엇인가?
<script>태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있음을 알아야한다.
- Advanced Challenge -> DOM과 JS의 차이는 무엇인가?
Apply JS in HTML
HTML에 JS를 적용하기 위해서는
<script>태그를 사용한다.
<script src="fileName.js"></script>
// HTML문서에 포함되는 script 요소웹 브라우저가 작성된 코드를 해석하는 과정에서
<script>요소를 만나면 , HTML 해석을 멈춘다. 그리고<script>요소를 먼저 실행한다. 그러므로<script>요소는 등장과 함께 실행된다 는 것을 인지해야한다.
<script> 요소는 <body> 태그가 끝나기전에 넣어줘야한다.
하지만
dom을 쓸 때는 body태그에 넣고
head 문서를 초기화하거나 비교적 가벼운 스크립트일 때 , dom을 사용하지 않았을때.
DOM으로 HTML조작하기
CRUD (create, read, update, delete)
Achievement Goals
- DOM을 JS로 조작해서 HTML Element를 추가, 삭제, 혹은 내용을 변경할 수 있어야한다.
- createElement - CREATE
- querySelector, querySelectorAll - READ
- textContent, id, classList, setAttribute - UPDATE
- remove, removeChild,
innerHTML = "",textContent = ""- DELETE- appendChild - APPEND
- innerHTML과 textContent의 차이점
CREATE - createElement
document.createElement('div')
// 새로운 div element를 만든다.
const tweetDiv = document.createElement('div')
// 새롭게 생성한 div element를 변수 tweetDiv에 할당한다.
하지만 append를 하지 않았기 때문에 , 화면에는 아무런 변화가 없다.APPEND - append , appendChild
append method를 사용해서 변수 tweetDiv를 body에 넣어야 한다.
document.body.append(tweetDiv)
// 변수 tweetDiv에 담긴 새로운 div 엘리먼트를 body 엘리먼트에 append한다.question in append
- 내용은 어떻게 넣는가?
textContentmethod 를 사용하면 문자열을 입력할 수 있다.
READ - querySelector, queryselectorAll
JS에서 원시 자료형인 변수의 값을 조회할 때 변수의 이름, 참조 자료형인 배열은 index, 객체는 key를 이용해 값을 조회하였다. 그러나 DOM으로 HTML element의 정보를 조회하기 위해서는
queryselector의 첫번째 인자로 셀렉터를 전달하여 확인할 수 있다. 셀렉터로는 HTML 태그("div"), id("#idName"), class(".className")이렇게 세 가지가 주로 사용된다.
const oneTweet = document.querySelector('.tweet')
// querySelector에 '.tweet' 을 첫번째 인자로 넣으면 , className이 tweet인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있다.
// -> querySelector로 className이 tweet인 HTML 엘리먼트를 조회한다HTML 문서에는 ClassName이 tweet 인 엘리먼트가 여러 개 있는데, 변수 oneTweet에 할당 된 엘리먼트는 단 하나이다. 여러 개의 element를 한 번에 가져오려면 ,
querySelectorAll을 사용한다. 이렇게 조회한 HTML 엘리먼트 들은 배열처럼for문을 사용할 수 있다. 하지만 이런 배열 아닌 배열을 유사 배열 , 배열형 객체 등 이라고 부른다. 정식명칭은 Array-Like Object이다.
const tweets = document.querySelectorAll('.tweets')
// querySelectorAll 로 className이 tweet인 모든 HTML 엘리먼트들을 유사 배열로 받아온다.
querySelector, queryselectorAll만 알아도 대부분의 엘리먼트를 조회할 수 있다. 하지만 get으로 시작하는 DOM조회 메소드도 있는데 , 오래된 방식이라고 생각하면 된다.
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
// tweetDiv를 container의 마지막 자식 요소로 추가한다.UPDATE - textContent, classList.add
앞에서 정리한 CREATE, APPEND ,READ를 통해서 새로운 DOM 객체를 만들고 , 기존의 DOM 객체에 붙이고, DOM 객체를 선택해서 조회하는 방법을 학습했다. UPDATE에서는 기존에 빈 div 태그를 UPDATE하여 , 많은 작업들을 할 수 있다.
textContent를 사용해서 , 비어있는 div element에 문자열을 입력한다.
console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
[textContent를 이용해 문자열 입력]
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
[CSS 스타일링이 적용될 수 있도록 , classList.add를 이용해 'tweet' class를 추가해준다. ]
const container = document.querySelector('#container')
container.append(oneDiv)
[append를 이용해 oneDiv를 contaier의 자식요소로 추가한다. ]
새롭게 추가한 엘리먼트는 class tweet의 스타일이 적용된 상태로 출력된다. DELETE - remove, removeChild
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // append 했던 element delete
[#container인 element 아래에 tweetDiv를 add하고 , remove로 delete]여러 개의 자식 element를 지우려면? use innerHTML OR removeChild
document.querySelector('#container').innerHTML = '';
[id가 container인 element 아래의 모든 element를 지운다.]
하지만 보안에서 몇가지 문제를 갖고 있다.const container = document.querySelector('#container');
while (container.firstChild){
container.removeChild(container.firstChild);
}
[container의 첫번째 자식 엘리먼트가 존재하면 , 첫번째 자식 엘리먼트를 제거한다.]이렇게 되면 제목에 해당하는 tweetList 까지 삭제된다.
