DOM(Document Object Model)

HTML 요소를 Object처럼 조작할 수 있는 모델. DOM으로 HTML을 조작할 수 있다.

HTML에 자바스크립트 적용

  • <script>태그 사용
  • 웹 브라우저는 <script> 요소를 만나면 HTML 해석을 멈추고 <script>태그부터 실행
  • <script> 추가 방법
    • <head> 안쪽에 삽입
    • <body> 끝나기 전에 삽입
  • 일반적으로 <body> 태그가 끝나기 전이 가장 좋다
    • HTML을 읽는 과정에 스크립트를 만나면 중단 시점이 생겨 지연 발생
    • DOM트리가 생성되기 전에 자바스크립트가 생성되지 않은 DOM 조작을 시도할 수 있다

DOM을 자바스크립트로 조작하여 CRUD

  • CREATE: createElement()
  • READ: querySelector() => 하나의 엘리먼트, querySelectorAll() => 해당하는 모든 엘리먼트, 배열처럼 for문 사용 가능
  • UPDATE: textContent, id, classList, setAttribute('id', 'value)
  • DELETE: remove, removeChild, innerHTML = "" , textContent = ""
  • APPEND: appendChild
profile
코더가 말고 개발자가 되고싶은...

0개의 댓글