1. 태그 선택하기

1.1 id로 태그 선택하기

자바스크립트에서 미리 만들어져 있는 document라는 객체의 getElementById라는 method를 이용하면, id 속성을 통해 HTML 태그를 선택할 수 있다.

해당 method의 parameter로 접근하고자 하는 태그의 id 값을 문자열로 전달하면 해당되는 태그가 선택된다.

document.getElementById('id');

아래 예시와 같이, method를 변수에 할당하여 사용할 수도 있다.

const myTag = document.getElementById('id');
console.log(myTag)

만약, getElementById method를 통해서 존재하지 않는 태그를 선택할 경우, undefined가 아닌 null이 리턴된다.

1.2 class로 태그 선택하기

document 객체의 getElementsByClassName method를 이용하면, class 속성을 통해 HTML 태그를 선택할 수 있다.

document.getElementsByClassName('class');

아래 예시와 같이, method를 변수에 할당하여 사용할 수 있다.

const myTags = document.getElementsByClassName('class');

위 코드를 실행해보면, HTMLCollection이라는 배열 같이 출력이 되는 것을 확인할 수 있는데,

splice나 push 같은 method는 사용이 불가능하다.

다만, 배열처럼 대괄호 표기법으로 인덱스에 접근, length property 활용, for ... of 문 활용은 가능하다.

이렇게, HTMLCollection처럼, 여러 개의 값을 담고 있는 배열과 형태는 유사하지만, 배열의 method는 사용할 수 없는 것들을 유사배열 (Array-Like Object)라고 부른다.

만약, getElementsByClassName method를 통해서 존재하지 않는 태그를 선택할 경우, null 값이 아닌 빈 HTMLCollection이 출력됨.

1.2.1 유사 배열

배열과 유사한 객체를 유사 배열이라고 부르는데, 유사 배열에도 최소한으로 갖추어야 할 조건과 특징들이 있다.

• 숫자 형태의 indexing이 가능하다.

• length property가 있다.

• 배열의 기본 method를 사용할 수 없다.

• Array.isArray는 false이다.
  - Array 객체의 isArray method는 parameter로 전달한 값이 배열인지 아닌지를 평가해서 그 결과를 boolean 형태의 값으로 리턴해주는 method이다. 유사 배열은 배열이 아니기 때문에 결과값으로 false가 나와야 한다.
  
  

유사 배열은 포괄적인 개념이기 때문에 다양한 형태로 존재할 수 있다.

HTMLCollection의 경우 for ... of 문을 활용하는 데 문제가 없었지만, 다른 유사 배열의 경우에는 for ... of 문을 활용할 수 없는 경우도 존재한다.

또한, 유사 배열은 배열의 기본 method를 사용할 수 없다고 언급했었지만, 직접 구현해서 마치 배열처럼 사용할 수 있는 방법도 존재한다.

다만, 직접 유사 배열을 만드는 것이 아니라, 이미 만들어진 유사 배열에 접근하는 경우라면, 앞서 언급한 4가지 특징을 모두 가지고 있어야 한다.

1.3 태그 이름으로 태그 선택하기

document 객체의 getElementsByTagName method를 이용하면, 태그 이름을 통해 HTML 태그를 선택할 수 있다.

document.getElementsByTagName('태그이름')

아래 예시와 같이, method를 변수에 할당하여 사용할 수 있다.

const myTags = document.getElementsByTagName('태그이름');

getElementsByClassName method와 같이, HTMLCollection을 리턴한다.

태그 이름에 *를 전달하면 모든 태그를 선택할 수 있다.

const btns = document.getElementsByTagName('button');
const allTags = document.getElementsByTagName('*');

다만, 명확한 의도 없이 많은 요소들을 한번에 다루게 될 경우, 예상치 못한 실수를 할 가능성이 있기 때문에, getElementsByClassName method는 자바스크립트에서 많이 사용되지는 않음.

1.4 css 선택자로 태그 선택하기

document 객체의 querySelector method를 이용하면, css 선택자를 통해 HTML 태그를 선택할 수 있다.

document.querySelector('css selector');

아래 예시와 같이, method를 변수에 할당하여 사용할 수 있다.

const myTag = document.querySelector('#myNumber');
console.log(myTag);

// 위 코드와 동일한 코드

const myTag = document.getElementsById('myNumber');
console.log(myTag);

아래와 같이, class를 선택하는 경우에는, 해당 class가 붙어있는 태그들 중 가장 첫 번째 요소가 선택된다는 점을 주의하자.

const myTag = document.querySelector('.color-btn');
console.log(myTag);

만약, 해당 class가 붙어있는 모든 요소들을 선택하고 싶다면, 아래와 같이 querySelectorAll method를 사용해야 한다.

const myTags = document.querySelectorAll('.color-btn');
console.log(myTags);

// 위 코드와 유사한 코드 (NodeList가 아닌 HTMLCollection이 생성됨)

const myTags = document.getElementsByClassName('color-btn');
console.log(myTags);

2. 이벤트

웹 페이지에서 발생하는 대부분의 일(사건)들을 이벤트라고 부른다.

마우스를 움직이는 것, 키보드를 누르는 것, 페이지를 스크롤 하는 것들도 모두 이벤트에 해당한다.

자바스크립트를 통해 이벤트를 다루는 것을 이벤트 핸들링이라고 부르며,

이벤트가 발생했을 때 일어나야 하는 구체적인 동작들을 코드로 표현하는 함수 부분을 이벤트 핸들러 또는 이벤트 리스너라고 부른다.

2.1 버튼 클릭

아래 예시와 같이, 태그의 onclick property에 함수를 할당해주면 버튼 클릭에 대한 동작을 만들 수 있음.

const btn = document.querySelector('#myBtn');
btn.onclick = function () {
  console.log('Hello Codeit!');
}