[TIL] JS - DOM과 이벤트 이해하기

13680 단어 엘리스JavaScriptDOMDOM

Day9 🏁

어제까지만해도 멘붕이던 DOM....

"도큐멘트쿼리셀렉트...? 겟엘리먼츠바이클래스아이디...?
왜 여긴 s가 붙고 왜 여긴 인덱스번호를 붙이는거지...?"

이제... 90% 이해했다!!! (10%는 막상 코드 짜려고하면 기억이 안나서 뺌)
어제 TIL과 내용이 거의 같지만 좀 더 깔끔하게 정리한 Day9 TIL✨ 🙂 ✨

01 DOM 이란?

  • 문서 객체 모델(Document Object Model)
    • 객체 지향 모델로써 구조화된 문서를 표현하는 방식
  • HTML 문서에 대한 인터페이스
    • DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스
    • DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다.

01-1 DOM의 종류

  • Core DOM : 모든 문서 타입을 위한 DOM 모델
  • HTML DOM : HTML 문서를 위한 DOM 모델 ✔️
  • XML DOM : 문서를 위한 DOM 모델

01-2 HTML DOM

  • HTML 문서를 조작하고 접근하는 표준화된 방법
  • 모든 HTML 요소는 HTML DOM을 통해 접근 가능

01-3 Document 객체

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

02 Document 메소드

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

02-1 HTML 요소의 선택

  • 새로운 HTML 요소를 선택하기 위해 제공되는 메소드
메소드설명
document.getElementById()해당 아이디의 요소를 선택
document.getElementsByClassName()해당 클래스에 속한 요소를 선택
document.getElementsByName()해당 name 속성값을 가지는 요소를 선택
document.querySelectorAll()해당 선택자로 선택되는 요소를 모두 선택
document.querySelector()해당 선택자로 선택되는 요소를 1개 선택
// HTML <li> 요소를 선택
var selectedItem = document.getElementsByTagName("li")

// 아이디가 "id"인 요소를 선택
var selectedItem = document.getElemnetById("id")

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

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

02-2 HTML 요소의 생성

  • HTML 요소를 생성하기 위해 제공되는 메소드
메소드설명
document.createElement()지정된 HTML 요소를 생성
document.write()HTML 출력 스트림을 통해 텍스트를 출력

02-3 HTML 이벤트 핸들러 추가

  • HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 속성
속성설명
요소.onclick = function(){}마우스 클릭 이벤트와 연결될 이벤트 핸들러

02-4 DOM의 트리 구조(HTML ⇒ DOM)

(이미지 출처 - 엘리스 SW 엔지니어 트랙 2기 수업자료)

03 자바스크립트와 DOM

03-1 DOM 요소의 스타일 변경

// 아이디가 "even"인 요소를 선택
var selectedItem document.getElementById("even")

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

03-2 DOM 요소의 내용 변경

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

// 선택된 요의 내용을 변경
str.innerHTML = "요소의 내용을 바꿉니다"

04 Node 객체

04-1 노드(Node)와 노드 트리

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

(이미지 출처 - 엘리스 SW 엔지니어 트랙 2기 수업자료)

04-2 노드 간의 관계

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

04-3 노드의 종류

  • 문서 노드(document node)
    • HTML 문서 전체를 나타내는 노드
  • 요소 노드(element node)
    • 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드
  • 주석 노드(comment node)
    • HTML 문서의 모든 주석은 주석노드
  • 속성 노드(attribute node)
    • 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다
    • 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않는다
  • 텍스트 노드(text node)
    • HTML 문서의 모든 텍스트는 텍스트 노드

04-4 노드의 값

  • 노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근할 수 있다
    • nodeName (이름)
    • nodeValue (값)
    • nodeType (타입)
// HTML 문서의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택
document.childNodes[0].nodeName

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

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

nodeType 프로퍼티 값

  • nodeType 프로퍼티 값은 텍스트가 아닌 숫자로 표현됩니다.
  • 대표적인 HTML 노드별 nodeType 프로퍼티 값은 다음과 같습니다.
요소 노드:1
속성 노드: 2
텍스트 노드: 3
주석 노드: 8
문서 노드: 9

05 이벤트(Event)

05-1 이벤트(Event)란?

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

05-2 이벤트 타입

  • 발생한 이벤트의 종류 (폼, 키보드, 마우스, HTML DOM, Window 객체 등)
<body>
	<button onclick="this.innerText='성공입니다!'">클릭하세요!</button>
</body>
// 마우스 클릭 이벤트 예시
<p onclick="changeText(this)">여길 클릭하세요!</p>

<script>
function changeText(element) {
	element.innerHTML = "내용이 바뀌었습니다!";
}
</script>

05-3 이벤트 핸들러

  • 이벤트가 발생했을 때 그 처리를 담당하는 함수
  • 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킨다
// 이 함수는 HTML 문서가 로드될 때 실행됨
window.onload = function() {
	
	// 아이디가 "text"인 요소를 선택함.
	var text = document.getElementById("text")

	text.innerHTML = "HTML 문서가 로드되었습니다."
}

05-3 addEventListener()

  • 객체나 요소의 메서드에 이벤트 핸들러를 전달할 때는 addEventListener() 메서드를 사용할 수 있습니다
대상객체.addEventListener(이벤트명, 실행할이벤트핸들러, 이벤트전파방식)
  • 사용 가능한 이벤트
이벤트설명
click클릭 시 (마우스 버튼에서 손가락을 땐 순간)
mouseenter마우수를 요소 위에 올리면
mouseover마우스를 요소 위에 올리면 (자식 Element도 영향을 받음)
mouseout마우스가 요소 밖으로 벗어날 때
mousedown클릭 하고 버튼에서 손가락을 때기 전
focus포커스가 갔을 때
keypress키를 누르는 순간에 발생, 그리고 누르고 있는 동안 계속 발생
keydown키를 누를 때
keyup키를 눌렀다가 떼는 순간
load웹 페이지 소스가 다운로드 되었을 때
resize창크기를 조절 할 때
scroll스크롤바, 마우스 휠, up, down 버튼으로 스크롤 할 시
unload링크를 클릭해서 다른 페이지로 이동하거나 브라우저나 브라우저 탭을 닫았을 때
changeform 필드의 상태가 변경 되었을 때

05-4 Event.target

Event 인터페이스의 target 속성은 이벤트가 발생한 대상 객체를 가리킵니다.
https://developer.mozilla.org/ko/docs/Web/API/Event/target

출처 📚

  • 엘리스 SW 엔지니어 트랙 2기 수업자료
BOJ/백준-18406-python
17. 비동기 프로그래밍 (Event Loop)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage