Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 모던 자바스크립트
- 코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무
- 스프링부트
- 파일 url
- api 요청 수 제한
- 딥다이브
- Dev-Matching
- Deep Dive
- AWS
- invalid_grant
- TypeORM
- oauth
- 우아한 테크코스
- 프로그래머스
- 타입스크립트
- 자바스크립트
- 우아한테크코스
- bucket4j
- compateto
- 프론트엔드
- this
- redis
- NestJS
- 음악 url 파일 다운로드
- 프리코스
- 프론트엔드 과제
- concurrency limit
- 유효시간 설정 url
- api 비동기처리
- 검색
Archives
- Today
- Total
개발 알다가도 모르겠네요
Interactive JavaScript 본문
728x90
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 Codeit!'); };
4-2. HTML 태그의 onclick 속성에 바로 표시하기
<button id="myBtn" onclick="console.log('Hello Codeit!')">클릭!</button>
'웹 > Javascript' 카테고리의 다른 글
다양한 이벤트를 알아보자. (0) | 2021.07.06 |
---|---|
다양한 마우스 이벤트를 알아보자. (0) | 2021.07.06 |
DOM을 간단하게 알아보자. (0) | 2021.07.05 |
inner/outerHTML, textContent 비교 (0) | 2021.07.05 |
console.log 와 console.dir (0) | 2021.07.05 |