DOM이란?
Document Object Model의 약자
HTML 요소를 자바스크립트로 Object처럼 조작할 수 있는 모델이다.
DOM으로 HTML조작하기(CRUD)
DOM으로 HTML을 조작할 때 많은 것들이 가능하지만
우선 document객체를 통해서 element를 생성, 조회, 수정, 삭제하는 방법을 알아보자
먼저 간단한 오늘 할 ToDo List를 HTML 파일로 만들어 보았다.
그리고 DOM 조작을 위한 js파일도 하나 만들어서 body 태그 마지막에 연결시켜준다.
연결이 잘 되었는지 확인하기 위해 console.log()로 하나만 찍어보자.
생성(createElement)
브라우저는 window객체를 제공하는데, 그 하위 요소 중에 document객체가 있다. console.log()로 한 번 찍어보면
내가 작성한 html 파일을 보여준다.
개발자들은 이 html 파일을 분석하여 조작할 수 있는 방법을 만들어 냈는데 이를 위해 브라우저가 여러 메소드들을 제공한다.
우선 li element를 하나 생성해 보자.
let li = document.createElement('li');console.log()에 찍어보면
방금 만든 엘리먼트가 생겼다
이제 이 요소를 내 html 파일에 붙여볼 것이다.(append)
document.body.append(li);
화면상에 li 엘리먼트를 입력하면 찍히는 점이 생겼다.
document.body를 찍어보면
원하는 위치는 아니지만 일단 script태그 다음에 생성된 것을 알 수 있다.
조회(querySelector, querySelecotrAll)
생성한 li태그를 원하는 곳에 붙여넣기 위해서는 해당 엘리먼트를 조회해야 하는데 이때 querySelector라는 메소드에 첫 번째 인자로 셀렉터를 전달하면 이에 해당하는 첫 번째 엘리먼트를 조회할 수 있다. 이때 셀렉터로는 'HTML 태그', '#id', '.class'를 주로 사용한다.
(해당하는 모든 엘리먼트를 조회하려면 querySelecotrAll를 사용한다)
document.querySelector('#lists');
이제 방금 조회한 ol태그의 하위 요소로 방금 만든 li태그를 append 해준다.
짠. li가 잘 연결되며 5번 목록이 생겼다. 이제 여기에 내용을 넣어보자.
수정(textContent, classList.add)
html 파일을 만들 때, ToDo list 목록을 만들면서 li태그 내에 'list'라는 이름으로 class를 만들었었다.
그래서 새로 만든 li태그에도 똑같이 class를 부여해야 하는데, 이에 해당하는 메소드가 classList.add이다.
li.classList.add('list');
이제 li태그 내에 내용을 넣어보자(수정)
이에 해당하는 메소드는 textContent이다.
li.textContent = '벨로그 쓰기';
삭제(remove)
위치를 알고 있는, 방금 append 한 요소를 삭제하려면
li.remove();로 간단하게 삭제할 수 있다.
(내용만 지우려면 textContent를 빈 문자열로 수정하는 방법도 있다)
만약, 다른 element들도 전부 삭제하고 싶다면 해당 element들을 반복문으로 전부 삭제할 수 있다.
document.querySelectorAll('.list').forEach((list) => {
list.remove();
})
요약
- 엘리먼트 생성: document.createElement('tag')
- 엘리먼트 조회: document.querySelector('tag or id or class')
- 엘리먼트 클래스 추가: .classList.add('class')
- 엘리먼트 내용 수정: .textContent = '내용'
- 엘리먼트 추가: .append(엘리먼트)
- 엘리먼트 삭제: .remove()
