Javascript

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)

• HTML 태그의 이벤트 속성에 바로 표시

<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키)

---