[Hanaro] 17일차 / JavaScript (DOM)

JavaScript - DOM (Document Object Model)

• DOM (Document Object Model, 문서 객체 모델)
  • 웹 페이지의 컨텐츠, 구조, 스타일을 구조화시켜 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API 제공하는 것
  • JS 같은 스크립트 언어가 쉽게 웹페이지에 접근하여 조작할 수 있게 연결해주는 역할
• DOM 문서의 트리 구조
  • document node → element node → text node, attribute node
  • document node (문서 노드)
    • 최상위 루트 노드이며 document 객체를 가리킨다.
    • HTML 문서 전체를 나타내는 노드이기도 하다. (그래서 HTML 문서에 document node는 1개만 존재)
    • window.document, document로 참조해 사용 가능
  • element node (요소 노드)
    • 모든 HTML 요소(body, h2, div)에 해당
    • 속성 노드를 가지는 유일한 노드로 부모-자식 관계의 계층적 구조
  • attribute node (속성 노드)
    • 모든 HTML 요소의 속성은 속성 노드, 요소 노드에 대한 정보를 갖고있다.
  • text node (텍스트 노드)
    • HTML 문서의 모든 텍스트는 텍스트 노드, 정보를 표현한다.
    • 가장 마지막에 위치하는 자식 노드여서 리프 노드라고도 불린다.
• DOM 객체의 구성 요소
  • property
    • DOM 객체의 멤버 변수
    • HTML 태그의 속성을 반영
  • method
    • DOM 객체의 멤버 함수
    • HTML 태그 제어
  • collection
    • 정보를 집합적으로 표현하는 일종의 배열
  • event listener
    • HTML 태그에 작성된 이벤트 리스너(onclick 등)들을 그대로 가진다.
  • style
    • HTML 태그에 적용된 CSS 스타일 접근
• DOM의 데이터 타입
  • document
  • element
  • nodeList
    • element의 배열
    • index로 item 접근 가능
      • list.item(1)
      • list[1]
  • namedNodeMap
    • 배열과 유사하지만 요소 접근 시 name 또는 index로 접근
• JS DOM 접근 메서드
  • document.querySelector(selectors)
  • document.getElementId(id)
  • document.createElement(name)
    • ex) const div = document.createElement(’div’);
      • div 노드를 만들어 할당한 상태
      • div 변수 호출 시 div 태그가 뜬다. (화면 미적용 상태)
      • 실 적용 하려면 append()나 appendChild() 사용
  • node.appennd(node)
    • ex) document.body.append(div);
  • node.appendChild(node)
    • document.body.appendChild(div);
  • node.remove(node)
    • ex) div.remove();
  • node.remoceChild(node)
    • document.body.removeChild(div);
  • element.innerHTML
  • node.textContent
    • ex) div.textContent = ‘변경할 내용’;
      • 노드 변경
  • element.setAttribute(name, value)
  • element.getAttribute(name)
  • element.addEventListener(type, listner)