웹프로그래밍 기초 천인국 지음
참고하여 작성하였습니다.

DOM

  • 자바스크립트에서 HTML 문서와 웹 브라우저를 객체로 간주하여 처리
  • 웹 페이지가 적재되면 브라우저는 페이지의 문서 객체 모델을 생성
  • DOM은 HTML 문서의 계층적인 구조를 트리로 표현함 왜 트리? 나무와 비슷하기에
  • 트리에서는 부모 노드, 자식 노드, 형제 노드의 개념이 있음

노드의 종류

  • DOM에 존재하는 노드는
    • DOCUMENT_NODE - DOM 트리의 루트 노드이며 HTML 문서를 나타냄.
      Window document가 바로 DOCUMENT_NODE 타입의 노드
    • ELEMENT_NODE - HTML 요소를 나타내는 노드

      <body> , <a>, <p>, <script>, <style>, <html> 등을 나타내는 노드

    • ATTRIBUTE_NODE - 속성을 나타내는 노드
      class = "myClass"와 같은 속성을 나타내는 노드

id로 요소 찾기

let food = document.getElementById("spain");
만약 요소가 발견되면 getElementById() 요소를 객체 형태로 반환
요소가 발견되지 않으면 food는 null이 됨