[DOM]
DOM은 Document Object Model의 약자로, HTML 요소를 조작할 수 있는 모델이다. 즉, DOM을 이용해서 HTML을 쉽게 다룬다.
[DOM의 사용]
DOM은 기본적으로 document 객체에 구현되어 있기 때문에 document를 통해 활용한다. document 객체에는 다양한 매소드가 존재하지만 가장 중요한 CRUD(Create, Read, Update and Delete)에 대해 알아보자.
[Create]
DOM을 이용해서 새로운 element를 생성할 수 있다.
document.createElement('div')이런 식으로 새로운 div 엘리먼트를 생성할 수 있다.
[Read]
DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(Selector)를 전달하여 확인할 수 있습니다.
document.querySelector('.name')이는 class의 이름이 name라는 HTML의 엘리먼트 중 첫번째 엘리먼트를 조회하는 모습을 나타낸 것이다.
[Upadate]
UPDATE는 기존에 생성한 태그를 업데이트하여, 보다 다양한 작업을 할 수 있다.
const div1 = document.createElement('div')먼저 div1이라는 변수에 div를 생성해서 할당해 주었다.
div1.textConetent = 'Showmaker'textContent를 이용하여 빈 태그에 Showmaker를 입력해 주었다.
div1.classList.add('mid')또한 mid라는 class를 추가해 주었다.
[Delete]
Delete는 DOM을 이용하여 원하지 않는 부분을 삭제하는 것이다.
const progamer = document.querySelector('#progamer')
const mid = document.createElement('div')
progamer.append(mid)
mid.remove()먼저 progamer라는 id를 querySelector를 이용해 가져 온 후, progamer라는 변수에 할당해 주었다.
다음으로 div 엘리먼트를 생성해주고 mid라는 변수에 할당해 주었다.
그리고 append를 이용하여 progamer에 연결해 주었다.
마지막으로 생성하고 연결해 준 mid를 remove를 통해 삭제해 주었다.
