- 일반 화살표 함수
let add = (x, y) => {
return x + y;
}
console.log(add(2, 3)); // 5
- 한 줄로 된 화살표 함수
let add = (x, y) => x + y;
console.log(add(2, 3)); // 5
- 매개변수가 하나인 화살표 함수
let square = x => x * x;
console.log(square(3)); // 9
- DOM 제어하는 API
1. 문서 객체 생성과 선택
- `document.createElement(tagName)` : 새로운 HTML 요소를 생성합니다.
- `document.getElementById(id)` : id 속성을 기준으로 요소를 선택합니다.
- `document.getElementsByTagName(name)` : 태그 이름을 기준으로 요소를 선택합니다.
- `document.getElementsByClassName(name)` : 클래스 이름을 기준으로 요소를 선택합니다.
- `document.querySelector(selector)` : CSS 선택자를 이용하여 요소를 선택합니다.
- `document.querySelectorAll(selector)` : CSS 선택자를 이용하여 모든 요소를 선택합니다.
2. 문서 객체 조작
- `element.innerHTML` : 해당 요소 내부의 HTML 코드를 변경합니다.
- `element.textContent` : 해당 요소 내부의 텍스트를 변경합니다.
- `element.setAttribute(attr, value)` : 해당 요소의 속성 값을 변경합니다.
- `element.getAttribute(attr)` : 해당 요소의 속성 값을 가져옵니다.
- `element.style.property` : 해당 요소의 스타일 값을 변경합니다.
- `element.appendChild(child)` : 해당 요소의 하위 요소로 child를 추가합니다.
- `element.removeChild(child)` : 해당 요소의 하위 요소 중 child를 삭제합니다.
- `element.classList.add(class)` : 해당 요소의 클래스에 새로운 클래스를 추가합니다.
- `element.classList.remove(class)` : 해당 요소의 클래스 중에서 특정 클래스를 제거합니다.
- `element.classList.toggle(class)` : 해당 요소의 클래스 중에서 특정 클래스를 추가 또는 제거합니다.
3. 이벤트 처리
- `element.addEventListener(type, listener)` : 해당 요소에서 이벤트가 발생했을 때 호출할 함수를 등록합니다.
- `element.removeEventListener(type, listener)` : 해당 요소에서 등록된 함수를 제거합니다.
- `event.preventDefault()` : 이벤트가 발생했을 때 기본 동작을 취소합니다.
- `event.stopPropagation()` : 이벤트의 버블링을 방지하기 위해 이벤트 전파를 중지합니다.
4. 기타
- `window.location.href` : 현재 페이지의 URL을 가져옵니다.
- `window.alert(message)` : 경고 메시지를 출력합니다.
- `window.confirm(message)` : 확인 메시지를 출력하고 사용자의 답변에 따라 Boolean 값을 반환합니다.
참고 레퍼런스) 내배캠 학습자료
'JavaScript' 카테고리의 다른 글
| JS) 파일 관리와 모듈화: import 및 export하는 방법 (1) | 2023.06.03 |
|---|---|
| JS) Web speech API로 음성 구현해보기 (0) | 2023.05.17 |