DOM
- DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model을 말한다. DOM으로 HTML을 조작할 수 있다.
DOM으로 HTML 조작하기
- DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.
- CREATE :
createElement - READ :
querySelector,querySelectorAll - UPDATE :
textContent,id,classList,setAttribute - DELETE :
remove,removeChild,innerHTML = "",textContent = "" - APPEND :
append,appendChild
CREATE
- createElement 메소드로 새로운 HTML 요소 생성
const divBox = document.createElement('div')READ
querySelector로 첫 번째 요소를 가져온다.- 셀렉터로는 HTML 태그, id, class 세가지가 가장 많이 사용된다.
const oneBox = document.querySelector('.box')querySelectorAll로 여러 개의 엘리먼트를 한 번에 가져올 수 있다.querySelectorAll로 가져온 엘리먼트들은 NodeList라는 유사배열(Array-like Object)로, 배열처럼 for문을 사용할 수 있다.
const allBox = document.querySelectorAll('.box')APPEND
- 생성한 HTML 요소를 트리 구조와 연결한다.
const divBox = document.createElement('div')
document.body.append(divBox)append는 한 번에 여러 요소를 연결 할 수 있다.appendChild는 한 번에 하나의 요소를 부모 요소에 연결한다.
UPDATE
- textContent를 변경해 내용을 추가할 수 있다.
divBox.textContent = "내용 추가"- classList를 이용해 class를 추가하거나 삭제할 수 있다.
divBox.classList.add('box-style')DELETE
remove메소드로 요소를 삭제한다.
divBox.remove()removeChild메소드로 자식 요소를 삭제한다.
Body.removeChild()
FE Developer