📲 DOM이란!
📲 Document Object Model - DOM
문서 객체 모델은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용들을 변경할 수 있게 돕는다. DOM은 nodes와 object로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
- DOM은 동일한 문서를 표현하고, 저장하고 조작하는 방법을 제공한다.
- DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.
📲 DOM과 자바스크립트
DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 대념들에 대한 정보를 갖지 못하게 된다.
자주쓰는 HTML DOM Methods 에는 다음과 같은 것들이 있다.
- getElementsById: HTML의 id요소에 접근하고 싶을때 사용
- innnerHTML: HTML 요소의 내용을 불러오거나 수정하고 싶을 때 사용
- addEventListener: 요소의 이벤트에 대한 반응을 연결할때 사용
Event란!
화려햐고 다양한 기능이 필요한 웹사이트가 늘어나면서 인터렉션(interection)이 필요한 일이 많아졌다. 인터렉션은 HTML, CSS로 구현하기엔 한계점이 있어서 Javascript가 필요하다.
Javascript를 이용하여 이벤트를 감지하고 어떤 동작을 일으킬 수 있다. 특정 요소에 user interactive한 반응을 할 수 있게 하는 것은 이벤트라고 한다.
다음과 같은 경우의 이벤트들이 있을 수 있다.
일반적으로 프로그래밍 언어에서 이벤트라고 하면 사용자의 동작 혹은 프로그램에서 발생하는 특정한 상황을 의미합니다. 이벤트가 발생하명 보통 사전에 정의된 특정 코드가 실행되고 그에 따라 기능이 동작하거나 화면이 변경되는 등의 변화가 발생합니다.
- 웹 브라우저가 알려주는 HTML요소에 대한
사건의 발생을 의미 - 자바스크립트는 이벤트에 반응하며
특정동작을 수행할 수 있음 - 입력양식으로 부터 사용자의 입력값을 가져올 수 있음
- HTML 이벤트속성은 자바스크립트 구문을 직접 실행하거나 함수를 출할 수 있다.
HTML 이벤트
HTML에서 발생하는 이벤트를 주로 마우스 및 입력양식에서 발생하며 문서의 로딩과 특별한 이벤트를 포함합니다.
이벤트가 일어나면 코드의 한 부분인 event handler 라는 것을 만들어서 그 이벤트에 대한 반응을 하게 할 수 있다. event handler 는 event listener 라고도 부른다.
querySelector 와 getElementBy
querySelector
querySelector는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫번째 element를 반환합니다.
document.querySelector(selectors);getElementById
element = document.getElementById(selectors);selector의 구체적인 그룹과 일치하는 document안 첫번째 엘리먼트를 반환한다. 일치하는게 없으면 null을 반환한다.
