TIL 14 | JavaScript - 문서 객체 모델(DOM)

Yonghyun·2021년 8월 21일
0

JavaScript & React

목록 보기
9/31

문서 객체 모델(Document Object Model)

문서 객체 모델이란?

자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법.

DOM 트리의 노드

  • 요소 노드 - 모든 HTML 태그를 의미.
  • 텍스트 노드 - 태그의 텍스트 내용.
  • 속성 노드 - 태그의 속성.
  • 주석 노드 - 주석.

DOM에 접근하기

  • getElementById(id) - id명으로 접근.
  • getElementsByClassName(class) - 클래스명으로 접근하며 여러 요소가 배열 형태로 저장.
  • getElementsByTagName(tag) - 태그명으로 접근하며 여러 요소가 배열 형태로 저장.
  • querySelector() - id명이나 선택자를 사용해 접근.
  • querySelectorAll() - 클래스명이나 태그명의 선택자를 사용해 접근. 여러 노드가 노드 리스트 형태로 저장.

속성 가져오기 및 수정하기

  • getAttribute(속성) - 태그에서 사용한 속성값을 가져온다.
  • setAttribute(속성, 값) - 태그의 속성을 특정한 값으로 지정한다.

이벤트 처리하기

  • 요소.addEventListner(이벤트, 함수, 캡처 여부)

CSS 속성에 접근하기

  • document.요소명.style.속성명

텍스트 노드를 사용하는 새로운 요소 추가 순서

  1. createElement() - 새로운 요소 노드를 만든다.
  2. createTextNode() - 새로운 텍스트 노드를 만든다.
  3. appendChild() - 텍스트 노드를 요소 노드의 자식으로 연결한다.
  4. appendChild() - 요소 노드를 DOM에 연결한다.

속성값이 있는 새로운 요소 추가 순서

  1. createElement() - 새로운 요소 노드를 추가한다.
  2. createAttribute() - 새로운 속성 노드를 추가한다.
  3. 속성값 지정하기 - 속성값을 프로퍼티로 지정한다.
  4. setAttributeNode() - 속성 노드를 요소 노드의 자식으로 연결한다.
  5. appendChild() - 요소 노드를 DOM에 연결한다.

노드 삭제

parentNode 프로퍼티로 부모 노드를 찾아서 부모 노드에서 삭제한다.

  • 부모노드.removeChild(자식노드)
profile
Life is all about timing.

0개의 댓글