#DOM과 Event

노션
:: we-code / ETC / 세션 / DOM | EVENT
:: we-code / TIL / 6일차 20.04.25

 

자바스크립트

: JS를 실행하기 위해서는 JS파일만으로는 작동하지 않는다. 브라우저가 존재해야하고, JS파일을 호출하는 html이 필요하다. (style.css를 link 시키는 것과 같은 맥락이라고 보면 될 것 같다.)

<script src = "index.js"></script>

❗️주로  태그 위에 위치 시켜준다. 그렇지 않으면 HTML과 Script를 동시에 읽기 때문에 화면에 요소들이 나오는 시간이 지연되고 사용자들에게 느리다는 인식을 줄 수 있다. 또한 DOM트리가 생성되기도 전에 자바스크립트가 DOM조작을 시도할 가능성이 있다. 그래서 먼저 HTML을 화면에 뿌려주고 자바스크립트를 실행하면 사용자들이 로딩에서의 불편함을 덜 느낄 수 있다.

 

#DOM (Document Object Model)

: HTML을 오브젝트 형식으로 가지고 있는 모델

# DOM 트리구조

HTML/CSS ↔ DOM ↔ JavaScript 💡TIP : DOM은 생각 순서대로 요소를 만드는 것이 가장 좋다.

# 접근 방법

: document라는 전역객체를 통해 접근이 가능하다. document객체는 HTML문서를 나타낸다. (document = HTML)

#왜 JS에서 HTML을 접근 해야할까?

: 웹페이지를 동적으로 만들어주기 위해 HTML의 특정요소 DOM트리를 타서 특정 object를 찾아낸다. JS는 이것들을 통해 웹페이지에 접근하고 수정이 가능하게 된다. 결국 DOM을 배우는 이유는 event를 사용하기 위해서라고 생각하면 된다. document객체로 요소(element)에 접근하듯이 요소의 속성(attribute)에도 접근할 수 있다.

• 요소에 접근하는 방법

document.body.innerHTML = '이거 아니야!';

 : body 태그 내 엄청나게 많은 요소가 있더라도 innerHTML을 사용하면 내용이 전부 교체됩니다.

• 특정 element를 접근하고 싶을 때

let box = document.querySelector('.classname 혹은 #tag id');
box.style.backgroundColor = 'pupple';

: DOM 객체 style 수정시 css에서는 property값을 background-color로 접근했지만 DOM에서는 backgroundColor로 접근해준다.

let title = document.getElementsByTagName('h1')[0];
  //h1 태그를 가진 첫번째 요소를 선택

❗️자바스크립트 style 수정할 때, hypen은 사용할 수 없다.(object와 같은 형식) ⇒ camelCase로 수정할 것!

 

• element 생성하기

//요소 생성가능
document.createElement('tagName');
 
//변수에 생성한 요소 넣기
const hello = document.createElement('tagName');

: 요소만 생성했지 HTML의 어디에 들어가야 할지 지정해준 것은 아니다. 만든후 어딘가에 있는 element에 append 해주어야한다.

• appendChild

<script>
	const computer = document.body;
	const mouse = document.createElement('mouse')';
	const bettery = document.createTextNode('bettery');
	computer.appendChild(mouse); //body에 마우스 붙이기
	mouse.appendChild(bettery); //mouse에 배터리 붙이기
</script>

: 요소의 뒤쪽에 붙여줄 것

let pTag = document.createElement('p');
pTag.className = 'dom';
pTag.innerHTML = 'DOM';
const title = document.querySelector('h1');
title.appendChild(pTag) //title element에 pTag를 붙여준다.

❗️리액트가 나온 이후로 제이쿼리를 사용하지 않는다.

 

---

 

#Event

: 오류가 없고, 이동에서의 자연스러움 클릭시 빠르게 반응해서 사용자가 불편함을 느끼지 않는 사이트가 좋은 사이트이다. 최근의 사이트들은 interaction이 빠르게 더 증가하고 있다. 이는 이벤트라고 한다.

• 클릭 이벤트
• 마우스 이벤트
• 스크롤 이벤트
• 터치 이벤트
• resize(화면의 크기 변화) 이벤트

 

• addEventListener

: event Listener는 이벤트를 듣고 있다는 의미로 이벤트를 달 때, 사용하는 함수 이름은 addEventListener 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 이벤트가 발생하면 인자로 받은 함수를 실행시켜주는 것.

DOM요소.addEventListener("이벤트종류", function(){
	//이벤트 발생시 실행할 내용
});

//함수도 인자로 전달 할 수 있다. 인자로 전달된 함수를 '콜백 함수'라고 한다.

 

JavaScript Events

JavaScript DOM EventListener

•콜백함수 : 콜백 함수는 함수 안에서 어떤 특정한 시점에 호출되는 함수로 보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출하는 것 - 더 자세한 것은 추후에 다룰 예정

 

• 클릭 Event

: 가장 많이 다뤄지는 이벤트 ex) 로그인 버튼 클릭 -> 로그인 api호출 | 자세히 보기 버튼 클릭 -> 팝업화면 출력

• keydown : 키를 눌렀을 때 발생
• keyup : 키보드를 누르고 떼는 순간 발생한다.
• keypress : 키보드를 눌러 어떤 텍스트가 작성되는 순간에 발생한다.

💡keyCode : 각 키보드가 가지고 있는 고유한 code, 평소 다른 웹사이트에서 로그인시 어디에는 엔터시 로그인이 되고 어디서는 엔터를 쳐도 로그인이 되지 않는 경우가 있는데 이것은 프론트 개발자가 key이벤트를 추가했기에 가능한 것이다.

 

 

참고할 사이트

getElement*, querySelector*로 요소 검색하기