🏃‍♀️ [엘리스 AI 트랙 4기] #08

DOM과 이벤트 소개

01. DOM이란?

문서 객체 모델 (Document Object Model)

→ 객체 지향 모델로써 구조화 된 문서를 표현하는 방식

DOM의 종류

• Core DOM
  → 모든 문서 타입을 위한 DOM 모델

• HTML DOM
  → HTML 문서를 위한 DOM 모델
  모든 HTML 요소는 HTML DOM을 통해 접근 가능

• XML DOM
  → 문서를 위한 DOM 모델

DOCUMENT

• DOCUMENT 객체
  → 웹 페이지를 의미하며, 웹 페이지에 존재하는 HTML 요소에
  접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.

• DOCUMENT 메소드
  → HTML 요소와 관련된 작업을 도와주는 다양한 메소드 제공
  HTML 요소의 선택
  HTML 요소의 생성
  HTML 이벤트 핸들러 추가
  HTML 객체의 선택

  HTML 요소의 선택
  document.getElementById() : 아이디의 요소를 선택
  document.getElementsByClassName() : 클래스에 속한 요소를 선택
  document.getElementByName() : 해당 name 속성값을 가지는 요소 선택
  document.querySelectorAll() : 해당 선택자로 선택되는 요소를 모두 선택
  document.querySelector() : 해당 선택자로 선택되는 요소를 선택

  HTML 요소의 생성
  document.createElement() : 지정된 HTML 요소를 생성
  document.getElementsByClassName() : HTML 출력 스트림을 통해 텍스트를 출력

DOM의 트리 구조

02. 자바스크립트와 DOM

DOM 요소의 선택

// HTML <li> 요소를 선택
let selectedItem = document.getElementsByTagName("li");

// 아이디가 "id"인 요소를 선택
let selectedItem = document.getElementById("id");

// 클래스가 "odd"인 요소를 선택
let selectedItem = document.getElementsByClassName("odd");

// name 속성 값이 "first"인 요소를 선택
let selectedItem = document.getElementsByName("first");

DOM 요소의 스타일 변경

// 아아디가 "even"인 요소를 선택
let selectedItem = document.getElementById("even");

// 선택된 요소의 텍스트 색상을 변경
selectedItem.style.color = "purple";

DOM 요소의 내용 변경

// 아이디가 "text"인 요소를 선택
let str = document.getElementById("text");

// 선택된 요소의 내용을 변경
str.innerHTML = "요소의 내용 변경";

03. Node 객체

노드(Node) 와 노드 트리

HTML DOM에서 정보를 저정하는 계층적 단위
→ 노드 트리는 노드들의 집합으로, 노드 간의 관계를 나타낸다.
→ 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.

노드 간의 관계

→ 노드트리의 모든 노드는 서로 계층적 관계를 맺고 있다.

노드의 종류

• 문서 노드 (document Node)
  → HTML 문서 전체를 나타내는 코드

• 요소 노드 (element Node)
  → 모든 HTML 요소는 요소 노드이다.
  속성 노드를 가질 수 있는 유일한 노드

• 주석 노드 (comment Node)
  HTML 문서의 모든 주석은 주석 노드이다.

• 속성 노드 (attribute Node)
  → 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다. 하지만 해당 요소 노드의 자식노드 (child node) 에는 포함되지 않는다.

• 텍스트 노드 (text Node)
  HTML 문서의 모든 텍스트는 텍스트 노드이다.

노드의 값

노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근할 수 있다.
nodeName(이름), nodeValue(값), nodeType(타입)

// HTML 문서의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택
document.childNodes[0].nodeName;

// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 노드값을 선택
document.getElementById("heading").firstChild.nodeValue;

// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 타입을 선택
document.getElementById("heading").firstChild.nodeType;

04. 이벤트(Event)

이벤트(Event)란 ?

→ 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생.
자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.

이벤트 타입

발생한 이벤트 종류 (폼, 키보드, HTML DOM, Window 객체 등)

// 마우스 클릭 이벤트 예시
<p onclick="changeText(this)"> 여길 클릭하세요! </p>
<script>
  function changeText(element) {
  	element.innerHTML = "내용이 바뀌었습니다";
  }
</script>

이벤트 핸들러

이벤트가 발생했을 때 그 처리를 담당하는 함수
지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에
등록된 이벤트 핸들러를 실행시킨다.

// HTML 문서가 로드될 때 실행됨.
window.onload = function() {
  //아이디가 "text"인 요소를 선택함.
  let text = document.getElementById("text");
  text.innerHTML = "HTML 문서가 로드되었습니다.";