001 (태그 선택 , 이벤트 , 유사 배열)

 

자바스크립트로 프로젝트도 만들어 봤으니,, 이제 개념정리를 하면서 완벽하게 이해 못했던 부분 짚고 넘어가자!

 

0 . start

1 . id 는 고유한 값이기 때문에 여러 요소들을 선택하기에는 활용하기 어렵다.
   + css 에서도 스타일을 다룰때 여러 요소의 스타일을 다룰때에도 id 가 아닌 class속성으로 한다.

2. class 로 태그를 선택하는 메소드의 이름?
=> document.getElementsByClassName(' 클래스이름 적는란 ');
 * 위 소스에 Elements에 s 는 여러 요소를 선택하는 것이기 때문에 s 를 꼭 붙인다.

3. 존재하지 않는 클래스이름을 적으면, null 이 아닌 undefined 가 출력된다. 

 

1. 자바스크립트로 태그 선택하기

document.getElementById('id')	HTML id속성으로 태그 선택하기	id에 해당하는 태그 하나
document.getElementsByClassName('class')	HTML class속성으로 태그 선택하기	class에 해당하는 태그 모음(HTMLCollection)
document.getElementsByTagName('tag')	HTML 태그 이름으로 태그 선택하기	tag에 해당하는 태그 모음(HTMLCollection)
document.querySelector('css')	css 선택자로 태그 선택하기	css 선택자에 해당하는 태그 중 가장 첫번째 태그 하나
document.querySelectorAll('css')	css 선택자로 태그 선택하기	css 선택자에 해당하는 태그 모음(NodeList)

 

2. 유사 배열이란?

=> 배열과 유사한 객체 ex) HTMLCollection, NodeList, DOMTokenList, ...

특징 
숫자 형태의 indexing이 가능하다.
length 프로퍼티가 있다.
배열의 기본 메소드를 사용할 수 없다.
Array.isArray(유사배열)의 리턴값은 false다.

 

3. 이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러

이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들 ex) 버튼 클릭, 스크롤, 키보드 입력, ...

이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일

이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다.

 

4. 이벤트 핸들러를 등록하는 2가지 방법

4-1. 자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록하기
const btn = document.querySelector('#myBtn'); btn.onclick = function() { console.log('Hello !'); };

4-2. HTML 태그의 onclick 속성에 바로 표시하기
<button id="myBtn" onclick="console.log('Hello !')">클릭!</button>