DOM(Document Object Model)

 - DOM (Document Object Model)

스크립트 언어로 HTML 요소를 제어할 수 있도록 하는 문서 객체 모델이다.

일종의 인터페이스며, DOM은 웹사이트를 구축하는 데 사용하는 Web API이다.

 

HTML 문서를 기반으로 Node Tree로 표현하며, HTML과 항상 동일하지 않다.

예를 들어 자바스크립트로 DOM을 조작하여 수정하여도 HTML이 바뀌는 것이 아니다.

 

 

 - DOM 간단 조작

1. Create : createElement으로 원하는 tag를 생성할 수 있고 할당도 가능

  ex) document.createElement('div');

2. Append : 요소에 append or appendChild

  ex) document.body.append(넣을 요소);

3. Read : querySelector로 조회하거나 querySelectorAll로 전체 조회

  ex) document.querySelector('#ID or .ClassName or tag name');

      document.querySelectorAll('#ID or .ClassName or tag name'); -> 유사 배열로 조회

4. Update : textContent로 tag안에 text를 넣을 수 있고, classList.add로 class 추가 classList.remove로 class 제거가 가능

  ex) exDiv.textContent = "Test";

      exDiv.classList.add("넣을 class 이름");

      exDiv.classList.remove("제거할 class 이름");

5. Delete : remove or removeChild로 요소를 제거

  ex) 제거할 요소 tag.remove();

      부모요소.removeChild(부모요소.firstChild 등);

부모요소.innerHTML = '';  이런 식으로도 가능하지만 보안에 취약하여 잘 사용하지 않음