인터랙티브 JS 시작하기
1. id로 태그 선택하기
// id로 태그 선택하기
// const 변수명 = document.getElementById('id태그');
const myTag = document.getElementById('myNumber');존재하지 않는 id태그를 입력하면 null 값이 출력된다.
2. class로 태그 선택하기
// class로 태그 선택하기
// const 변수명 = document.getElementsByClassName('class태그');
const myTags = document.getElementsByClassName('color-btn');class 태그는 여러 곳에 사용한다는 점에서 Element(s) 처럼 s가 붙는다. 또한 id태그와 달리 존재하지 않는 class태그를 입력하면 undefined 값이 출력된다.
3. 유사 배열(Array-Like Object)
이름 그대로 배열과 유사한 객체를 유사 배열이라고 한다. 유사 배열에도 최소한 갖춰야 할 조건과 특징들이 있다.
(1) 숫자 형태의 indexing이 가능하다.
유사 배열에도 배열이라는 이름에 걸맞게 각 요소에 0부터 시작하는 숫자 형태의 index가 있어야 한다.
(2) length 프로퍼티가 있다.
유사 배열도 length 프로퍼티가 있어야 비로소 유사 배열이라고 할 수 있다. 숫자 형태의 index가 있더라도 length 프로퍼티가 없다면 유사 배열이라기보단 그냥 숫자 형태의 key로 구성된 일반적인 객체라고 볼 수 있다.
(3) 배열의 기본 메소드를 사용할 수 없다.
유사 배열이 배열이 아닌 가장 큰 이유는 바로 기본적인 배열의 메소드를 사용할 수 없다는 점 때문이다. 사실 배열의 메소드를 활용할 수 없다는 특징이 유사 배열을 활용하는 목적이기도 하다. indexing을 통해 유사 배열의 요소에 접근하는 건 쉽지만 수정 및 삭제하는 작업은 생각보다 까다롭다. 그래서 내부의 요소들은 배열처럼 다룰 수 있게 하면서 배열의 메소드 사용을 막고 싶거나, 혹은 일반 배열에는 없는 특별한 메소드를 제공하고 싶을 때 유사 배열을 만들어 활용하기도 한다.
(4) Array.isArray(유사배열)은 false다.
Array 객체의 isArray 메소드는 파라미터로 전달한 값이 배열인지 아닌지를 평가해서 그 결과를 불린 형태의 값으로 리턴해주는 메소드이다. 유사 배열은 배열과 비슷하지만 배열은 아니기 때문에 결과값으로 false를 리턴한다.
주의사항: 유사 배열은 다양하다.
어떤 유사 배열은 for.of문을 활용하는데 문제가 없지만 어떤 유사 배열의 경우 for..of문을 활용할 수 없다. 배열의 기본 메소드를 사용할 수 없다고 했지만, 직접 구현해서 마치 배열처럼 사용할 수 있도록 만들 수 있다.
4. 태그 이름으로 태그 선택하기
document.getElementsByTagName('태그이름') 메소드를 활용하면 태그 이름으로 태그를 선택할 수 있다.
const btns = document.getElementsByTagName('button');이렇게 하면 HTML 문서 내에 있는 모든 button 태그를 선택하게 된다. class와 마찬가지로 태그 이름으로 요소를 찾는 경우에 여러 개의 요소가 선택될 수 있기 때문에 메소드 이름에 Element(s)처럼 s가 있고, 실행결과 역시 HTMLCollection을 리턴한다.
참고로 css 선택자처럼 '*' 값을 전달하게 되면 모든 태그를 선택할 수도 있다.
const allTags = document.getElementsByTagName('*');5. css 선택자로 태그 선택하기
// css 선택자로 태그 선택하기
// id (id선택자와 동일)
const myTag = document.querySelector('#myNumber');
// class
const myTag = document.querySelector('.color-btn');
const myTags = document.querySelectorAll('.color-btn');css 선택자로 class 요소를 선택자를 가져올 경우, 해당 class 태그를 가진 요소들 중 첫번째 값만 보여준다. 여러 요소를 보여주고 싶을 때는 querySelectorAll을 사용하여 전체값을 리턴해주면 된다. 결과값은 NodeList으로 리턴되며, 존재하지 않는 요소를 선택하게 되면 결과값으로 null이 출력된다.
getElemtn 또는 querySelector 둘다 사용해도 무방하지만, 하나의 메소드로 여러 요소를 선택할 수 있는 querySelector를 사용하기 추천한다.
6. 이벤트와 버튼 클릭
// 이벤트(Event)와 버튼 클릭
const btn = document.querySelector('#myBtn');
// 이벤트 핸들링 (Event Handling)
btn.onclick = function() { // 이벤트 핸들러 (Event Handler)
console.log("Hello");
};이벤트 핸들링은 JS 파일뿐만 아니라 HTML 파일 내에서도 작성할 수 있다.
<div>
<button id="myBtn" onclick="console.log('Hello')">Click</button>
</div>하지만 여러 코드를 작성하게 되면, 코드의 가독성이 떨어질 뿐더러, HTML 파일과 JS 파일을 같이 쓴다는 점에서 일관성이 떨어지기 때문에 분리해서 작성하는 것을 추천한다.
(추가로 alert('message'); 는 화면에 버튼을 클릭했을 때 message를 담은 경고창이 나오게 할 수 있는 함수이다.)
7. 정리
(1) 자바스크립트 태그
| 메소드 | 의미 | 결과 |
|---|---|---|
| document.getElementById('id') | HTML id속성으로 태그 선택 | id에 해당하는 태그 하나 |
| document.getElementsByClassName('class') | HTML class속성으로 태그 선택 | class에 해당하는 태그 모음(HTMLCollection) |
| document.getElementsByTagName('tag') | HTML 태그 이름으로 태그 선택 | tag에 해당하는 태그 모음(HTMLCollection) |
| document.querySelecto('css') | css 선택자로 태그 선택 | css 선택자에 해당하는 태그 중 가장 첫번째 태그 하나 |
| document.querySelectorAll('css') | css 선택자로 태그 선택하기 | css 선택자에 해당하는 태그 모음(NodeList) |
(2) 유사 배열
배열과 유사한 객체를 의미한다. (HTMLCollection, NodeList, DOMTokenList, ...)
- 숫자 형태의 indexing이 가능하다.
length프로퍼티가 있다.- 배열의 기본 메소드를 사용할 수 없다.
Array.isArry(유사배열)의 리턴값은false다.
(3) 이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러
- 이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들 -> ex) 버튼 클릭, 스크롤, 키보드 입력, ...
- 이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일
- 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다.
