DOM???

DOM 그게뭔데? 🤔

Document Object Model의 약자로 Document는 HTML을 의미하고, Object는 HTML의 root부터 모든 노드관계를 JavaScript가 이용할 수 있는 트리구조의 객체 모델을 의미한다!
💡 노드는 루트를 포함한 모든 요소를 의미한다.

DOM으로 뭘 할 수 있을까?

DOM method로 손쉽게 HTML에 접근 후 생성, 수정, 삭제등 조작 할 수 있다.

1. HTML태그 생성

	const title = document.createElement('h1')
    const titleText = document.createTextNode('Title!')
    
    title.appendChild(titleText)
    document.body.appendChild(title)

2. HTML태그 삭제

	<h1 id='title'>Title!<h1/>

	const title = document.getElementById('title')
    title.remove()

3. HTML태그 수정

• 컨텐츠, 스타일, 속성 등을 수정할 수 있다.

	const title = document.getElementById('title')
    
    // innerHTML은 이름대로 텍스트뿐 아니라 태그도 넣어줄 수 있다.
   	title.innerHTML('Title2!')
	title.className = 'title2'
	title.style.color = 'green'  

4. 이벤트 처리

	<button id='btn'>Click!</button>
	<button id='delBtn'>Delete Event!</button>

	const btn = document.getElementById('btn')
    const delBtn = document.getElementById('delBtn')
    
    const eventHandler = () => alert('Click!')
    
    // 이벤트를 삭제하기 위해 익명함수 대신 선언 후 넣었다.
    btn.addEventListener('click', eventHandler)
	delBtn.addEventListener('click', () => {
		btn.removeEventListener('click', eventHandler)    
    })	

📌 한 줄 회고

브라우저 렌더링 과정부터 다시 살펴봐야 될 것 같다.😂