DOM(Document Object Model) :
HTML(Document)에 접근하여 Object(JavaScript Object)처럼
HTML을 조작(Manipulation)할 수 있는 Model
-자바스크립트에서 DOM은 Documents객체에 구현되어 있다.
ex) console.log(document.원하는 엘리먼트);
ex2) console.dir(document.원하는 엘리먼트);
-DOM은 트리 구조로 이루어져 있다.
DOM 조작법
CRUD
Create: 변수에 엘리먼트를 만들어 담는다.
ex)let welcomeDiv = document.createElement('div')
Append: 생성된 엘리먼트를 DOM구조에 이어 붙인다. 이를 통해 그 엘리먼트를 조작할 수 있다.
ex)document.body.append(welcomeDiv)
Read: 셀렉터를 이용하여 변수를 조회(선택)한다. 그리고 엘리먼트를 Append할 수 있다.
ex)let oneAnimal = document.querySelector('.animal')
ex2)let animals = document.querySelectorAll('.animal')
ex3)container.append(animals)
Update: 생성된 HTML 엘리먼트에 글자를 넣거나 클래스 등을 지정한다.
ex)firstDiv.textContent = '첫번째입니다.'; -글자 넣기
ex2)firstDiv.classList.add('first') -클래스 명 추가
Delete: 엘리먼트를 삭제한다.
ex)animals.remove() (컨테이너에 appened한 엘리먼트 삭제)
ex2)document.querySelector('#container').innerHTML = ''; (컨테이너의 모든 자식 엘리먼트 삭제)
