[TIL]DOM

DOM(Document Object Model)

DOM은 HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작(Manipulation)할 수 있는 Model이라는 의미를 가지고 있습니다. 즉, 자바스크립트를 사용하는 방법을 알고 있으면 DOM을 활용하여 HTML을 조작할 수 있다는 의미입니다.

console.dir() : DOM 구조를 조회하기 위해서는 console.dir()이 유용합니다. console.log와 달리 DOM을 객체의 모습으로 보여줍니다.

CRUD

document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 하는 법

• CREATE - createElement

• APPEND - append, appendChild
  append : 선택한요소의 자식요소 뒤에 내용삽입
  prepend: 선택한요소의 자식요소 뒤에 내용삽입

  • append와 appendChild의 차이점
  1. append는 한 번에 여러개의 자식 요소를, appendChild는 한 번에 하나의 자식 요소만 추가한다.
  2. append는 DOMString objects도 추가할 수 있는데, appendChild는 Node object만 추가 가능. 즉, append를 쓰면 string도 추가할 수 있다.
  3. append는 return 값을 반환하지 않는데, appendChild는 붙인 Node object값을 반환한다.

• READ - querySelector, querySelectorAll

• UPDATE - textContent, classList.add

  • textContent와 innerHTML의 차이점
  1. textContent가 더 먼저 만들어졌으며 그런 이유로 브라우저 호환성도 좀 더 높습니다. 또한 큰 차이는 아니지만 더 가볍다고 알려져 있습니다.
  2. 둘 모두 텍스트를 추가한다는 공통점이 있으나 innerHTML은 태그를 넣을 수 있습니다.

• DELETE - remove, removeChild