DOM(Document Object Model)
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
MDN - DOM
학습내용
- HTML Element를 추가, 변경, 삭제, 조회
- HTML Element에 자식 엘리먼트 생성
- innerHTML vs textContent
DOM을 통해 HTML을 접근하고 동작하게 만들 수 있습니다. DOM이 없었면 자바스크립트는 웹 페이지에서 요소들의 관련된 정보들을 얻을 수 없습니다.
DOM 조작
Element 생성
DOM에 createElement를 이용하면 Element 생성할 수 있습니다.
const $div = document.createElement('div');하지만, createElement 새로운 노드로 생성되기 때문에 기존의 노드에 생성하고 싶다면 append를 이용해야합니다.
document.body.append($div);Element 조회
querySelector
querySelector 사용하여 Element를 찾아 하나의 요소를 반환 받습니다. getElementById와 querySelector 으로도 찾을 수 있지만 오래된 옛날 방식들입니다.
const $div = document.querySelector('div');querySelectorAll
querySelectorAll는 Element를 찾아 복수개의 요소를 반환 받습니다. 이때 반환 받는 형태는 유사 배열(Array-like Object)형태 입니다.
const $div = document.querySelectorAll('div');Element 변경
텍스트 변경
textConten를 사용하면 해당 Element의 텍스트 값을 변경할 수 있습니다.
const $div = document.querySelector('div');
$div.textContent = 'change text';속성 변경
setAttribute('attributeName', 'attributeValue')를 사용하면 원하는 속성의 값을 변경할 수 있습니다.
const $div = document.querySelector('div');
$div.setAttribute("name", "changAtrtributeName");Element 삭제
remove
remove 사용하면 자식요소 포함 모두 삭제됩니다.
const $div = document.querySelector('div');
$div.remove();removeChild
innerHTML = ''
innerHTML의 빈 문자열을 넣음으로써 삭제 가능하여 간편합니다. 하지만, 보안적 문제가 발생하므로 사용하지 않는 것을 권장합니다.
const $div = document.querySelector('div');
$div.innerHTML = '';참고: innerHTML을 통해 <scrpit> 구문을 넣어 크로스 사이트 스트립팅 문제를 야기할 수 있습니다.
