CSS선택자, 이벤트와 버튼 클릭

Toproot·2022년 7월 19일
0

JavaScript

목록 보기
2/2
post-thumbnail

CSS 선택자로 태그 선택하기.

// css 선택자로 태그 선택하기
// id
const myTag = document.querySelector('#myNumber');
console.log(myTag);

// class
const myTag2 = document.getElementById('myNumber');
console.log(myTag2);

// class -> 가장 첫번째 요소 선택.
const myTag3 = document.querySelector('.color-btn');
console.log(myTag3);

// class -> NodeList라는 유사배열 콘솔에 출력. 여러 요소 선택
const myTags1 = document.querySelectorAll('.color-btn');
console.log(myTags1);

// html -> HTMLCollection
const myTags2 = document.getElementsByClassName('color-btn');
console.log(myTags2);
  • querySelector 가 하나의 요소에 접근하므로, 사용 빈도수가 높음!

querySelectorAll 을 사용할 때 존재하지 않는 요소를 선택하면 비어있는 NodeList 리턴.

querySelector 메소드는 getElementyBy와 동일하게 null값 리턴.

다음과 같은 결과를 나타내는 코드

<li id="javascript" class="language">JavaScript</li>
console.log(document.querySelectorAll('.language')[0]);
console.log(document.querySelector('#list li');
console.log(document.querySelector('.language'));

이벤트와 버튼 클릭

// 이벤트(Event)와 버튼 클릭
const btn = document.querySelector('#myBtn');

// 이벤트 핸들링(Event Handling)
btn.onclick = function() { // 이벤트 핸들러(Event Handler)
	console.log('Hello Codeit!');
};
  • 이벤트 핸들러는 HTML 태그에서도 사용가능
<button id="myBtn" onclick="console.log('Hello JS!')">Click!</button>
  • 하지만 코드의 가독성이 안좋아지고, 코드가 섞이게 되어 코드의 일관성을 잃어 유지보수가 어려워짐.

정리하기

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

2. 유사 배열이란?

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

특징

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

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

  • 이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들 ex) 버튼 클릭, 스크롤, 키보드 입력, ...
  • 이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일
  • 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다.

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

4-1. 자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록하기

const btn = document.querySelector('#myBtn');

btn.onclick = function() {
  console.log('Hello Codeit!');
};

4-2. HTML 태그의 onclick 속성에 바로 표시하기

<button id="myBtn" onclick="console.log('Hello Codeit!')">클릭!</button>
profile
어디로 튈 지 모르는 개발자 로그 🛴

0개의 댓글