javascript 객체
표준 객체
- 자바스크립트가 기본적으로 가지고 있는 객체
- String, Number, Array, Date, Math, ...
Date 객체
- 시간과 날짜에 대한 정보를 얻기 위해 사용하는 객체
- Date 객체의 메서드 (var date = new Date();)
- date.getFullYear()
- date.getDate()
- date.getDay()
- date.getTime()
- date.getHours()
- date.getMinutes()
- date.getSeconds()
Math 객체
- 수학에서 자주 사용하는 상수와 함수들을 미리 구현해놓은 객체
- 브라우저마다 다른 결과를 얻을 가능성이 있어 정확한 결과가 필요한 경우에는 사용하지 않는 것이 좋음
- Math 객체의 메서드
- Math.PI
- Math.E
- Math.min()
- Math.max()
- Math.random()
- Math.round()
- Math.floor()
- Math.ceil()
- min ~ max 범위 내에서 random 수 뽑기
let num = Math.random() * (max - min) + min;DOM (Document Object Model)
- HTML 문서 요소의 집합
- HTML 문서는 각각의 node와 object의 집합으로 문서를 표현
- 각각의 node와 object에 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있도록 하는 것
- Document : 웹 페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 때 사용하는 객체
Document - 요소 선택
getElementById
- document.getElementById("Id 속성값")
- 요소를 하나만 가져옴
getElementsByClassName
- document.getElementsByClassName("클래스 속성값")
- 요소를 배열(같은 데이터)로 가져옴 (HTMLCollection)
getElementsByTagName
- document.getElementsByTagName("태그 이름")
- 요소를 배열(같은 데이터)로 가져옴 (HTMLCollection)
getElementsByName
- document.getElementsByName("name 속성값")
- 요소를 배열(같은 데이터)로 가져옴 (NodeList)
querySelector
- document.querySelector("CSS 요소 선택자")
- 문서에서 만나는 가장 첫 번째 요소를 반환
- 요소를 하나만 가져옴
querySelectorAll
- document.querySelectorAll("CSS 요소 선택자")
- 문서에 존재하는 모든 요소를 반환
- 요소를 배열(같은 데이터)로 가져옴 (NodeList)
✨ HTMLCollection & NodeList
-
HTMLCollection : <> 요소(태그) 노드만 포함 (텍스트 노드는 자식으로 포함 X)
NodeList : 모든 노드들(태그, 텍스트 등)을 포함 -
HTMLCollection : index, namedItem 함수로 자식 요소 노드(배열)에 접근 가능
NodeList : index 외의 방법으로 자식 요소 노드(배열)에 접근 불가능
→ NodeList는 태그 이외의 텍스트 등도 모두 가져오는데, 텍스트는 속성을 가질 수 없기 때문에 namedItem으로 접근할 수 없는 게 어떻게 보면 당연한 이야기 -
HTMLCollection : 동적 → DOM을 다루면서 새로운 요소를 추가했을 때, 추가된 요소도 가져올 수 있음
NodeList : 정적 → 새로 추가된 요소를 가져올 수 없음 (처음 읽었을 때 정해진 요소들만 가져옴) -
HTMLCollection[] : 실제 배열 X, 배열과 유사한 객체 → forEach를 사용할 수 없음
NodeList[] : 실제 배열 O → forEach를 사용할 수 있음
Document - 요소 다루기
createElement
- document.createElement("요소 태그명")
- html의 특정 노드를 생성
append
- 요소.append()
- 선택한 요소의 맨 뒤 자식 요소로 추가됨
- 텍스트 등 요소 노드가 아니어도 추가할 수 있음
appendChild
- 요소.appendChild()
- 선택한 요소의 맨 뒤 자식 요소로 추가됨
- 요소 노드만 추가할 수 있음
prepend
- 요소.prepend()
- 선택한 요소의 맨 앞 자식 요소로 추가됨
before
- 요소.before()
- 선택한 요소의 앞 형제 요소로 추가됨
after
- 요소.after()
- 선택한 요소의 바로 뒤 형제 요소로 추가됨
remove
- 요소.remove()
- 선택한 요소 삭제
- 삭제 후, 반환 값 없음
let standard = document.getElementById("li");
standard.remove(); // li 삭제removeChild
- 요소.removeChild('요소의 자식 요소')
- 선택한 요소의 자식 요소 삭제
- 삭제 후, 삭제한 요소를 반환
let ul = document.querySelector("ul");
let standard = document.getElementById("li");
ul.removeChild(standard); // ul의 자식 요소인 li 삭제parentNode
- 요소.parentNode
- 선택한 노드의 부모 노드에 접근
children
- 요소.children / 요소.children[0]
- 선택한 노드의 자식 노드에 접근
previousSibling
- 요소.previousSibling
- 선택한 노드의 형제 노드에 접근
- 텍스트와 주석을 포함하여 바로 앞에 위치한 노드를 가져옴
❗ 요소와 요소 사이에는 항상 #text 존재함
따라서 실제 텍스트가 없어도 #text 출력됨
previousElementSibling
- 요소.previousElementSibling
- 선택한 노드의 형제 노드에 접근
- 선택한 노드 바로 앞에 위치한 태그 요소 노드를 가져옴
nextSibling
- 요소.nextSibling
- 선택한 노드의 형제 노드에 접근
- 텍스트와 주석을 포함하여 바로 뒤에 위치한 노드를 가져옴
nextElementSibling
- 요소.nextElementSibling
- 선택한 노드의 형제 노드에 접근
- 선택한 노드 바로 뒤에 위치한 태그 요소 노드를 가져옴
innerHTML
- 요소.innerHTML
- 선택한 요소에 HTML 요소를 추가
- 태그 인식 가능
innerText
- 요소.innerText
- 선택한 요소에 문자열을 추가 & 공백 문자 제거
textContent
- 요소.textContent
- 선택한 요소에 문자열을 추가 & 공백 문자 그대로 반환
❗ IE9 이전 버전에서는 동작하지 않으므로 주의
setAttribute
- 요소.setAttribute("속성명", "값")
- 선택한 요소의 속성 값을 직접 지정
classList
- 요소.classList.add("클래스명") : 선택한 요소에 클래스 추가
- 요소.classList.remove("클래스명") : 선택한 요소에서 클래스 제거
- 요소.classList.contains("클래스명") : 선택한 요소에 해당 클래스 존재 여부 확인 후, boolean 반환
- 요소.classList.toggle("클래스명") : 선택한 요소에 해당 클래스가 있으면 제거, 없으면 추가
EventListner
addEventListner
- 요소.addEventListner(이벤트, 명령)
- 선택한 요소에 지정한 이벤트가 발생하면, 약속된 명령어를 실행
document.querySelector(".box").addEventListener("click", function() {
alert("click");
})이벤트의 종류
- Click : 클릭
- Mouse
- Mouseover : 요소에 커서를 올림
- Mouseout : 마우스가 요소를 벗어남
- Mousedown : 마우스 버튼을 누르고 있는 상태
- Mouseup : 마우스 버튼을 떼는 순간
- Focus : 포커스가 감
- Blur : 포커스를 벗어나는 순간
- Key
- Keypress : 키를 누르는 순간 + 누르고 있는 동안 계속 발생
- Keydown : 키를 누르는 순간에만 발생
- Keyup : 키를 눌렀다가 떼는 순간
- Load : 웹페이지에 필요한 모든 파일(html, css, js 등)의 다운로드가 완료됨
- Resize : 브라우저 창의 크기가 변경됨
- Scroll : 스크롤이 발생함
- Unload : 링크를 타고 이동하거나 브라우저를 닫음
- Change : 폼 필드의 상태가 변경됨
