| 메소드 | 의미 | 결과 |
|---|---|---|
| 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) |
id는 고유한 값이기 때문에 하나의 태그를 선택할 때 유용
존재하지 않는 id를 선택하면 null값이 저장
클래스는 여러요소를 선택할 때 유용 -> 여러 요소를 선택하기 때문에 getElements
getElementsByClassName은 깊이에 상관없이 위에서 부터 차례대로 나온다
존재 하지않는 값을 가져오면 빈 HTMLCollection를 가져온다.
유사배열( Array-Like Object)
HTMLCollection, NodeList은 유사 배열이다.
유사 배열이란?
배열과 모양은 같지만, 완벽히 배열은 아닌 이런 형태를 유사 배열이라고 부른다
특징
- 숫자 형태의 indexing이 가능하다. ex) data[1], data[2]
- length 프로퍼티가 있다. 길이 출력 가능
- 배열의 기본 메소드를 사용할 수 없다.
- Array.isArray(유사배열)은 false다.
이벤트 핸들링, 이벤트 핸들러
이벤트란?
웹 페이지에서 발생하는 대부분의 일(사건)들
- ex) 버튼 클릭, 스크롤, 키보드 입력, ...
이벤트 핸들링
자바스크립트를 통해 이벤트를 다루는 일
이벤트 핸들러
이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다.
자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록하기
const btn = document.querySelector('#Btn');
btn.onclick = function() {
console.log('Hello');
};HTML 태그의 onclick 속성에 바로 표시하기
<button id="myBtn" onclick="console.log('Hello')">클릭!</button>참고
코드잇
