DOM

Document Object Model로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. 

HTML의 DOM을 통해 자바스크립트는 HTML 파일의 모든 요소에 접근할 수 있고 요소들을 수정할 수 있다. DOM이 없다면, 자바스크립트는 웹페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 가지지못하게 된다.

DOM에 접근하는 방법

1. document.getElementById

태그에 있는 id 속성을 사용하여 해당 태그에 접근하는 함수이다. 주어진 id와 일치하는 DOM 요소를 나타내는 Element 객체를 반환하거나 만약 해당하는 id 를 가진 태그가없을경우 null 에러가 발생한다.

2. document.getElementsByClassName

태그의 class 속성을 사용하여 접근한다. 동일한 class명이 존재할수 있기때문에 id 속성을 사용하여 접근하는 getElementById() 와 달리 getElementsByClassName() 은 컬렉션 객체를 반환한다. 따라서 for문을 사용하거나 특정 index에 위치한 element를 반환받아 사용할수있다.

3. document.getElementsByTagName

태그의 있는 div, li, p 와 같은 특정 태그명을 가지고 있는 element 의 집합을 가져오는 함수이다.
따라서 반환되는 값은 HTML컬렉션 객체이며 for문 등을 사용하여 element 객체를 사용할수있다.

4. document.getElementsByName

아주 드물게 쓰이는 메서드로, 문서 전체를 대상으로 검색한다. 검색 기준은 name 속성값이고, 이 메서드 역시 검색 결과를 담은 컬렉션 객체를 반환한다.

5. document.querySelector

querySelector 는 특정 name 이나 id 를 제한하지않고 css선택자를 사용하여 요소를 찾는다.

document.querySelector(`#section`) 
-> section 아이디를 가진 요소를 찾는다.

document.querySelector(`.section`) 
-> section 클래스명을 가진 요소를 찾는다.

반환객체는 한개의 요소만 찾을수있으며 동일한 클래스명 을 가진 객체가 있을경우 html문서내의 첫번째를 나타나는 요소를 반환한다.

6. document.querySelectorAll

querySelectorAll 은 querySelect 과 동일하게 작동하나 차이점은 해당 선택자에 해당하는 모든 요소를 가져온다. 반환객체는 nodeList이기때문에 for문 또는 foreach 문을 사용해야 한다. 또한 (',') 을 사용하면 여러요소를 한번에 가져올 수 있다.

Event

화려하고 다양한 기능이 필요한 웹사이트가 늘어나면서 interaction이 필요한 일이 많아졌다. interaction은 HTML, CSS로만 구현하기는 힘들고, Javascript가 필요하다.
Javascript를 이용하여 이벤트를 감지하고 어떤 동작을 일으킬 수 있다.
특정 요소에 user interactive한 반응을 할 수 있게 하는 것을 이벤트라고 한다.
다음과 같은 경우의 이벤트들이 있을 수 있다.

• 마우스 이벤트(MouseEvent): mousedown, mouseup, click, dblclick, -mousemove, mouseover, mousewheel, mouseout, contextmenu
• 터치 이벤트 (TouchEvent): touchstart, touchmove, touchend, touchcancel
• 키보드 이벤트 (KeyboardEvent): keydown, keypress, keyup
• 폼 이벤트 (form events): focus, blur, change, submit
• 윈도우 이벤트 (window events): scroll, resize, hashchange, load, unload

Event 등록

EventListener 는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다. EventListener를 이용하면 특정 DOM에 위에 말한 Javascirpt 이벤트가 발생할 때 특정 함수를 호출한다.

DOM객체. addEventListener(Event명, 실행할 함수명, 옵션) 

👇👇👇👇👇

const a = document.querySelector('a'); 

a.addEventListener('click', showConsole); 

function showConsole() { console.log("콘솔로그 실행"); }

위 이벤트를 설명하자면 변수 a에 <a> 요소를 저장하고 addEventListene를 통해 Click이벤트가 실행될 때 showConsole 함수를 호출한다.

---

출처: https://ordinary-code.tistory.com/64 [김평범's OrdinaryCode]
출처: https://javacpro.tistory.com/35 [버물리의 IT공부]
출처: https://velog.io/@hojin11choi/TIL-JavaScript-DOM-Event[]