꾸매코딩

[Nomad coder/Momentom 클론코딩 2일차] JavaScript DOM과 Event(#2.0~#2.7) 본문

Clone Coding/Momentum [JavaScript]

[Nomad coder/Momentom 클론코딩 2일차] JavaScript DOM과 Event(#2.0~#2.7)

꾸매코더 2021. 5. 16. 13:10
반응형

클론코딩 2일차 (#2.0~#2.7)

강의에 대한 내용보다는, 강의에서 나온 내용 중 추가로 찾아보고 궁금했던 내용을 정리를 하려고 한다.

1. DOM(Document Object Model)

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다.

DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
- DOM은 웹 브라우저가 HTML을 인식하는 방식이다.
→ DOM은 HTML 문서에 대한 인터페이스이다.

1. JavaScript는 HTML에 있는 모든 요소를 Object(객체)로 만든다.

2. 모든 HTML은 Object가 된다.

3. Object는 많은 Property를 갖는다.

4. JavaScript를 통해 Object를 DOM 형태로 변경할 수 있다.

 

Dom 구조

[index.html]

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
      <h1 id="title">Hello</h1>
      <script src="index.js"></script>
  </body>
</html>

 

[index.js]

const title = document.getElementById("title"); 
title.innerHTML = "Hello world"; // title의 내용이 바뀐다. 
title.style.color = "yellow"; // title의 color가 바뀐다. 

//JavaScript로 HTML 요소를 바꿀 수 있다.

2. event

JavaScript는 event에 반응하기 위해 만들어졌다. 
- event는 click, resize, submit, input .....을 의미한다.

JavaScript는 이러한 event를 중간에 가로챌 수 있다.
→ target.addEventListener(type, listener[, options]);
type : 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열이다. (ex : "click" ...)

listener : 지정된 타입의 이벤트가 발생했을 때, 알림을 받는 객체이다. EventListener 인터페이스 또는 JavaScript function를 구현하는 객체여야 한다
  • type : 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열이다. (ex : "click" ...)
  • listener : 지정된 타입의 이벤트가 발생했을 때, 알림을 받는 객체이다. EventListener 인터페이스 또는 JavaScript function를 구현하는 객체여야 한다.
function handleResize(event){
    console.log(event);
}
window.addEventListener("resize", handleResize()); // handleResize 함수 자동 호출
window.addEventListener("resize", handleResize); // 원할 때 handleResize 호출

//event가 발생할때 handleResize() 함수를 실행시켜 event값 출력

[참고문서]

https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8

 

문서 객체 모델 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 문서 객체 모델(DOM; Document Object Model)은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의

ko.wikipedia.org

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

 

EventTarget.addEventListener() - Web API | MDN

EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다.

developer.mozilla.org

 

반응형
'Clone Coding/Momentum [JavaScript]' Related Articles more