JS - DOM

김도영·2022년 5월 4일
JavaScript
0
post-thumbnail

DOM

Document Object Model의 약자로, HTML의 요소들을 객체(Object)처럼 조작할 수 있는 모델이다. 즉, JavaScript를 이용하면 DOM을 활용하여 HTML을 조작할 수 있다.
DOM은 JavaScript 언어의 일부가 아니라 웹사이트를 구축하는 데 사용되는 Web API이다.

HTML에 JavaScript를 적용하려면 script태그를 이용해야 한다.

<script scr="file.js></script>

HTMl 코드를 해석하는 과정에서 script 요소를 만나면, 해석을 중단한 후 script를 먼저 실행한다.

script는 삽입위치(head, body)에 따른 차이점이 있다.

head에 삽입

  • DOM 객체가 실행되기 전에 실행된다.
  • 웹사이트가 완벽하게 보여진다.
  • JS파일이 클 경우, 사용자가 웹사이트가 느리게 보여진다.
  • DOM 객체에 접근할 경우, 로드 이벤트를 사용해야 한다.

    • body에 삽입

  • HTMl의 컨텐츠를 빠르게 확인 가능하다.
  • 웹사이트가 JS의존도가 높을경우, 정상적인 컨텐츠를 받아 오기 위해 JS서버에서 받아오고 실행하기 까지 오래 걸린다.
  • body는 위에서 아래로 읽기 때문에, 화면을 빠르게 보여지기 위해서는 body최하단에 두는 것이 좋다.

    • DOM의 CRUD(Create, Read, Update, Delete)

  • createElement - Create
  • querySelector, querySelectorAll - Read
  • textContent, id, classlist, setAttribute - Update
  • remove, removeChild - Delete
    • profile
    김도영
    Blockchain Developer
    이전 포스트

    Git 명령어

    다음 포스트

    JS - DOM을 활용한 회원가입 유효성 검사

    0개의 댓글