HiroDaegu
2021. 8. 11. 10:00
1. 자바스크립트로 태그 선택하기
| 메소드 |
의미 |
결과 |
| document.getElementById("id") |
HTML id속성으로 태그 선택 |
id에 해당하는 태그 하나 |
| document.getElementByClassName("class") |
HTML class속성으로 태그 선택 |
class에 해당하는 태그 모음
(HTMLCollection) |
| document.getElementByTagName("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) 버튼 클릭, 스크롤, 키보드 입력 ...
- 이벤트 핸들링: 자바스크립트를 통해 이벤트를 다루는 일
- 이벤트 핸들러: 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드(이벤트 리스너)
4. 이벤트 핸들러를 등록하는 2가지 방법
- 자바스크립트로 해당 DOM 객체의 이벤트 프로퍼티에 등록
const btn = document.querySelecto('#myBtn')
//btn.onclick = function() {
// console.log("HELLO!")
//}
---------------------------------------------------------------
// element.addEventListener(event, handler)
btn.addEventListener('click', function event() {
console.log("HELLO")
}
)
---------------------------------------------------------------
function event() {
console.log("HELLO")
}
btn.addEventListener('click', event)
---------------------------------------------------------------
// element.removeEventListener(event, handler)
btn.removeEventListener('click', event)
<button id = "myBtn" onclick = "console.log("HELLO!")"> 클릭 </button>
5. console.log( ) vs console.dir( )
- log의 경우에는 해당 자료형 vs dir의 경우 문자열 표시 형식 (출력하는 자료형이 다름)
- log는 값 자체, dir은 객체의 속성
- log는 여러 값을 쉼표로 구분해서 전달하면 전달받은 모든 값을 출력하는 반면, dir은 여러 값을 전달하더라도 첫번째 값만 출력
- (DOM객체를 다룰때) log는 HTML 형태로 출력, dir은 대상을 객체 형태로 출력
6. 요소 노드에 대한 이동 속성
| 속성 |
유형 |
결과 |
| element.chlidren |
자식 요소 노드 |
element의 자식 요소 모음(HTMLCollection) |
| element.firstElementChild |
자식 요소 노드 |
element의 첫번째 자식 요소 하나 |
| element.lastElementChild |
자식 요소 노드 |
element의 마지막 자식 요소 하나 |
| element.parentElement |
부모 요소 노드 |
element의 부모 요소 하나 |
| element.previousElementSibling |
형제 요소 노드 |
element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나 |
| element.nextElementSibling |
형제 요소 노드 |
element의 다음(enxt) 혹은 우측(right)에 있는 요소 하나 |
7. 모든 노드에 대한 이동 속성
| 속성 |
유형 |
결과 |
| node.childNodes |
자식 노드 |
node의 자식 노드 모음(NodeList) |
| node.firstChild |
자식 노드 |
node의 첫번째 자식 노드 하나 |
| node.lastChild |
자식 노드 |
node의 마지막 자식 노드 하나 |
| node.parentNode |
부모 노드 |
node의 부모 요소 하나 |
| node.previousSibling |
형제 노드 |
node의 이전(previous) 혹은 좌측(left)에 있는 노드 하나 |
| node.nextSibling |
형제 노드 |
node의 다음(enxt) 혹은 우측(right)에 있는 요소 하나 |
8. element.innerHTML
const myTag = document.querySelector("#list")
console.log(myTag.innerHTML)
- 요소 노드 내부의 HTML 코드를 문자열로 리턴(내부에 있는 줄 바꿈이나 들여쓰기 모두 포함)
- 내부의 HTML 자체를 수정할 때 자주 활용(내부에 있던 값을 완전히 새로운 값으로 교체)
9. element.outerHTML
const myTag = document.querySelector("#list")
console.log(myTag.outerHTML)
- 요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴(내부에 있는 줄 바꿈이나 들여쓰기 모두 포함)
- 새로운 값을 할당할 경우 요소 자체가 교체됨
10. element.textContent
const myTag = document.querySelector("#list")
console.log(myTag.textContent)
- 요소 안의 내용들 중에서 HTML 태그 부분을 제외하고 텍스트만 리턴(내부에 있는 줄 바꿈이나 들여쓰기 모두 포함)
- 내부의 값을 완전히 새로운 값으로 교체
- 텍스트만 다루기때문에 특수문자도 텍스트로 처리
11. 요소 노드 다루기
- 요소 노드 만들기: document.createElement('태그이름')
- 요소 노드 꾸미기: element.textContent, element.innerHTML, ...
- 요소 노드 추가 혹은 이동하기: element.prepend, element.append, element.after, element.before
- 요소 노드 삭제하기: element.remove()
12. HTML 속성 다루기
- 속성에 접근하기: element.getAttribute('속성')
- 속성 추가(수정)하기: element.setAttribute('속성', '값')
- 속성 제거하기: element.removeAttribute('속성')
13. 스타일 다루기
- style 프로퍼티 활용하기: element.style.styleName = 'value';
- class 변경을 통해 간접적으로 스타일 적용하기: element.className, element.classList
| 메소드 |
내용 |
참고사항 |
| classList.add |
클래스 추가하기 |
여러 개의 값을 전달하면 여러 클래스 추가 가능 |
| classList.remove |
클래스 삭제하기 |
여러 개의 값을 전달하면 여러 클래스 삭제 가능 |
| classList.toggle |
클래스 없으면 추가, 있으면 삭제 |
하나의 값만 적용하고, 두번째 파라미터로 추가 또는 삭제 기능을 강제할 수 있음 |
14. 이벤트(자주 사용되는 것)
| 이벤트 타입 |
설명 |
| mousedown |
마우스 버튼을 누르는 순간 |
| mouseup |
마우스 버턴을 눌렀다 떼는 순간 |
| click |
왼쪽 버튼을 클릭한 순간 |
| dblclick |
왼쪽 버튼을 빠르게 두 번 클릭한 순간 |
| contextmenu |
오른쪽 버튼을 클릭한 순간 |
| mousemove |
마우스를 움직이는 순간 |
| mouseover |
마우스 포인터가 요소 위로 올라온 순간 |
| mouseout |
마우스 포인터가 요소에서 벗어나는 순간 |
| mouseenter |
마우스 포인터가 요소 위로 올라온 순간(버블링이 일어나지 않음) |
| mouseleave |
미우스 포인터가 요소에서 벗어나는 순간(버블링이 일어나지 않음) |
| 이벤트 타입 |
설명 |
| keydown |
키보드의 버튼을 누르는 순간 |
| keypress |
키보드의 버튼을 누르는 순간('a', '5' 등 출력이 가능한 키에서만 동작, Shift, Esc등 키에서는 반응없음) |
| keyup |
키보드의 버튼을 눌렀다 떼는 순간 |
| 이벤트 타입 |
설명 |
| focusin |
요소에 포커스가 되는 순간 |
| focusout |
요소로부터 포커스가 빠져나가는 순간 |
| focus |
요소에 포커스가 되는 순간(버블링이 일어나지 않음) |
| blur |
요소로부터 포커스가 빠져나가는 순간(버블링이 일어나지 않음) |
| 이벤트 타입 |
설명 |
| change |
입력된 값이 바뀌는 순간 |
| input |
값이 입력되는 순간 |
| select |
입력 양식의 하나가 선택되는 순간 |
| submit |
폼을 전송하는 순간 |
| 이벤트 타입 |
설명 |
| scroll |
스크롤 바가 움직일 때 |
| 이벤트 타입 |
설명 |
| resize |
윈도우 사이즈를 움직일 때 발생 |
15. 이벤트 객체 속성(자주 사용되는 것)
| 속성 |
설명 |
| type |
이벤트 이름('click', 'keydown', 등) |
| target |
이벤트가 발생한 요소 |
| currentTarget |
이벤트 핸들러가 등록된 요소 |
| timeStamp |
이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초) |
| bubbles |
버블링 단계인지를 판단하는 값 |
| 속성 |
설명 |
| button |
누른 마우스의 버튼(0: 왼쪽 1: 가운데(휠), 2: 오른쪽) |
| clientX, clientY |
마우스 커서의 브라우저 표시 영역에서의 위치 |
| pageX, pageY |
마우스 커서의 문서 영역에서의 위치 |
| offsetX, offsetY |
마우스 커서의 이벤트 발생한 요소에서의 우치 |
| screenX, screenY |
마우스 커서의 모니터 화면 영역에서의 위치 |
| altKey |
이벤트가 발생할 때 alt키를 눌렀는지 |
| ctrlKey |
이벤트가 발생할 때 ctrl키를 눌렀는지 |
| shiftKey |
이벤트가 발생할 때 shift키를 눌렀는지 |
| metaKey |
이벤트가 발생할 때 meta키를 눌렀는지(window키) |
| 속성 |
설명 |
| key |
누른 키가 가지고 있는 값 |
| code |
누른 키의 물리적인 위치 |
| altKey |
이벤트가 발생할 때 alt키를 눌렀는지 |
| ctrlKey |
이벤트가 발생할 때 ctrl키를 눌렀는지 |
| shiftKey |
이벤트가 발생할 때 shift키를 눌렀는지 |
| metaKey |
이벤트가 발생할 때 meta키를 눌렀는지(window키) |