DOM이란: javascript를 이용해서 엘리먼트의 속성값을 얻어내거나, 변경하는 방법
- HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model
- 즉, 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있음
- Document Object Model
- HTML 문서의 구조와 관계를 객체(Object)로 표현한 모델
- 트리구조
- html 문서도, JavaScript 객체도 둘 다 트리구조를 가짐
- document라는 전역변수로 접근이 가능
<HTML>
<body>
<div id="practice" class="highlight red">
여기 엘리먼트가 하나 있습니다
<span>자식도 있습니다</span>
<span>자식도 여럿 있습니다</span>
</div>
</body> <HTML 엘리먼트를 JavaScript 객체로 표현>
{
tagName: 'DIV',
id: 'practice',
classList: ['highlight', 'red'],
textContent: '여기 엘리먼트가 하나 있습니다 자식도...',
parentElement: body,
children: [
{
tagName: 'SPAN',
textContent: '자식도 있습니다'
},
{
tagName: 'SPAN',
textContent: '자식도 여럿 있습니다'
}
]
} Dom의 CARUD(Create, Append, Read, Update, Delete)
- Create: createElement
자바스크립트에서 어떤 작업의 결과를 담기 위해서는 변수를 선언하고 변수에 결과값을 할당한다. 마찬가지로 DOM을 활용하여 자바스크립트에서 HTML element를 만들 수 있다.
const newDiv = document.createElement('div')하지만 createElement만 한 element는 아직 공중에 떠 있는 상태이다. 새롭게 만든 이 element를 원하는 부모 element의 자식으로 append 해 주어야 브라우저 상에서 해당 element를 사용할 수 있다.
- Append: append, appendChild
앞서 만든 newDiv를 body의 자식으로 달아주자.
document.body.append(newDiv)⚔️ append와 appendChild의 차이(간단하게만!) ⚔️
--> append는 한 번에 여러 개의 자식노드를 붙일 수 있지만, appendChild는 한 번에 하나의 자식노드만 붙일 수 있다.
- Read - querySelector, querySelectorAll
querySelector로 HTML 구조 안의 element를 자바스크립트로 불러와서 조회할 수 있다.
조회는 HTML 태그, id, class 세가지를 가장 많이 사용한다.
const readDiv = document.querySelector('div')
const classDiv = document.querySelector('.className')
const idDiv = document.querySelector('#idName')querySelectorAll은 여러 개의 element를 한 번에 가져온다. 이렇게 조회한 element들은 배열처럼 for문을 사용할 수 있다. 하지만 이 element들은 실제 배열이 아닌 '유사 배열(Array-like Object)'이므로 주의해야 한다.
const allClassDiv = document.querySelectorAll('.className')- Update - textContent, classList, add
textContent를 이용해 문자열을 추가
console.log(newDiv) // <div></div>
newDiv.textContent = 'something'
console.log(newDiv) // <div>something</div>classList.add를 이용해 클래스를 추가
newDiv.classList.add('classA')
console.log(newDiv) // <div class="classA">something</div>setAttribute를 이용해 아이디를 추가
newDiv.setAttribute('id', 'idA')
console.log(newDiv) // <div class="classA" id="idA">something</div>- Delete - remove, removeChild
newDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있음.class를 삭제하는 것도 가능
newDiv.classList.remove('classA')
console.log(newDiv) // <div id="idA">something</div>