DOM이란?
HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model
DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있음.
CREATE
DOM을 이용하여 HTML Element를 추가
document.createElement('div')APPEND
DOM을 이용하여 HTML Element를 부모 노드에 포함
const tweetDiv = document.createElement('div')
document.body.append(tweetDiv)
//[코드] 변수 tweetDiv에 담긴 새로운 <div> 요소를 <body> 요소에 append 한다.
READ
DOM을 이용하여 HTML Element를 조회
- querySelector
- querySelectorAll
const oneTweet = document.querySelector('.tweet') //querySelector에 '.tweet'을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있다 **상단 <div>요소 하나만 조회!** const tweets = document.querySelectorAll('.tweet') //여러 개의 요소를 한 번에 가져오기 위해서는, querySelectorAll을 사용!!
UPDATE
DOM을 이용하여 HTML Element를 변경
- textContent를 이용해 문자열을 입력
oneDiv.textContent = 'dev'; console.log(oneDiv) // <div>dev</div> - classList.add를 이용해 'tweet' 클래스를 추가
oneDiv.classList.add('tweet') console.log(oneDiv) // <div class="tweet">dev</div>
DELETE
DOM을 이용하여 HTML Element를 삭제
-
id가 container인 요소 아래에 tweetDiv를 추가하고, remove로 삭제할수있다.
const container = document.querySelector('#container') const oneDiv = document.createElement('div') container.append(oneDiv) oneDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다. -
id가 container인 요소 아래의 모든 요소를 지움
document.querySelector('#container').innerHTML = ''; -
container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거
const container = document.querySelector('#container'); while (container.firstChild) { container.removeChild(container.firstChild); }
innerHTML과 textContent의 차이?
innerHTML은 HTML 태그를 처리하여 요소의 내용물을 변경하고, textContent는 HTML 태그를 무시하고 요소의 텍스트 내용만 변경함.
따라서, innerHTML은 HTML 코드를 삽입할 때 사용하고, textContent는 텍스트를 변경할 때 사용된다.!
이벤트 객체 (작성중)
기초적인 event를 알고, event handler를 element에 적용할 수 있다.
onclick에 직접 할당하는 것과 addEventListener의 차이를 이해한다.
eventHandler 함수를 만들고, eventHandler의 첫 번째 인자를 사용할 수 있다.
https://lia-portfolio.vercel.app/