Javascript 표준객체
자바스크립트가 기본적으로 가지고 있는 객체들
- 프로그래밍을 하는데 기본적으로 필요한 도구들
- String, Number, Array, Date, Math
Date 객체
Javascript에서 매 순간 바뀌는 시간과 날짜에 관한 정보를 얻기 위해 사용하는 객체
Date 객체 - 함수
- Date.now()
- Date.prototype getter 메소드 (var date = new Date();)
- date.getFullYear()
- date.getDate()
- date.getDay()
- date.getTime()
- date.getHours()
- date.getMinutes()
- date.getSecoends()
Math 객체
수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 Javascript 표준 내장 객체
- 웹 브라우저마다 다른 결과를 얻을 가능성이 있기에 정확한 결과를 얻어야할 경우에는 Math 메소드를 사용하지 않는 것이 좋다.
Math 객체 - 함수
- Math.PI
- Math.E
- Math.min()
- Math.max()
- Math.random()
- Math.round()
- Math.floor()
- Math.ceil()
DOM(Document object Model)
- HTML 문서 요소의 집합
- HTML 문서는 각각의 node와 object의 집합으로 문서를 표현
- 따라서 각각 node 또는 object에 접근하여 문서 구조 / 스타일 / 내용 등을 변경 할 수 있도록 하는 것
Document
웹 페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 때 사용하는 객체
DOM
- 새로운 HTML 요소나 속성 추가
- 존재하는 HTML 요소나 속성 제거
- HTML 문서의 모든 HTML 요소 변경
- HTML 문서의 모든 HTML 속성 변경
- HTML 문서의 모든 CSS 스타일 변경
- HTML 문서에 새로운 HTML 이벤트 추가
- HTML 문서의 모든 HTML 이벤트에 반응
DOM API
Document Object Model, Application Programming Interface
요소 선택
Document - 요소 선택
-
document.getEelementById(아이디 속성값)
-
document.getElementsByClassName(클래스 속성값)
-
document.getElementsByTagName(태그 이름)
-
document.getElementsByName(name 속성값)
-
document.querySelector(CSS 선택자)
-
document.querySelectorAll(CSS 선택자)
querySelector('요소 선택자')
- 요소 선택자를 사용해서 자신이 가져오고 싶어하는 요소를 가져오는 메소드
- 문자에서 만나는 제일 첫번째 요소를 반환한다
querySelectorAll('요소 선택자')
- 문서에 존재하는 모든 요소를 찾아주는 메소드
- 모든 요소를 가져와서 배열(같은) 데이터로 만들어 준다.
getElementById('ID이름')
- 해당 ID를 가지는 요소를 불러오는 메소드
요소 다루기
Document - 요소 다루기
-
document.createElement(html요소)
-
document.write(텍스트)
-
[].appendChild();
-
[].append();
-
[].removeChild();
-
[].remove()
-
[].innerText = 내용;
-
[].className = 클래스 이름;
.textContent .innerText .innetHTML
- 태그 내에 들어갈 문자열을 지정
요소.textContent = "hi";
- 선택된 요소에 내부의 문자열로 hi가 들어가게 된다.
classList
선택 요소에 class를 더하거나, 빼거나, 클래스가 존재하는 지 체크하는 메소드
- 해당 기능과 CSS를 잘 활용하면 액티브한 웹페이지 구성이 가능
- 요소.classList.add()
- 요소.classList.remove()
- 요소.classList.contains()
- 요소.classList.toggle()
setAttribute, html 요소 속성 추가
선택한 요소의 속성 값을 직접 지정할 수 있는 메소드
- 요소.setAttribute('속성명', '지정할 속성')
searchInputEl.setAttribute('placeholder', '통합검색');다른 노드에 접근하기
특정 노드를 선택한 후, 그 노드의 형제, 부모, 자식 노드에 접근하는 방법
- 요소.children / 요소.children[0]
- 요소.parentNode
- 요소.previousElementSiblings
- 요소.nextElementSiblings
createElement('html 요소')
html의 특정 노드를 생성
- 괄호 안에는 html의 요소인 태그명을 넣어주면 된다.
let p = dcoument.createElement('p');요소를 만들었으면 추가하기!
- 요소.append() / 요소.appendChild()
- 선택된 요소의 맨 뒤의 자식 요소로 추가됨
- 요소.prepend()
- 선택된 요소의 맨 앞쪽인 자식 요소로 추가됨
- 요소.before()
- 선택된 요소의앞에 있는 형제 요소로 추가됨
- 요소.after()
- 선택된 요소의 바로 뒤인 형제 요소로 추가됨
요소 삭제, remove(), removeChild()
- 요소.remove()
- 선택된 요소가 삭제된다.
- 요소.removeChild('요소의 자식요소')
- 선택된 요소의 자식 요소가 삭제된다.
이벤트 addEventListener
요소.addEventListener(이벤트, 명령)
선택 요소에 지정한 이벤트가 발생하면, 약속 된 명령어를 실행시키는 메소드
addEventListener 이벤트의 종류
-
Click : 클릭
-
Mouse 계열
- Mouseover : 요소에 커서를 오렸을 때
- Mouseout : 마우스가 요소를 벗어날 때
- Mousedown : 마우스 버튼을 누르고 있는 상태
- Mouseup : 마우스 버튼을 떼는 순간
-
Focus : 포커스가 갔을 때
-
Blur : 포커스가 벗어나는 순간
-
Key 계열
- Keypress : 키를 누르는 순간 + 누르고 있는 동안 계속 발생
- Keydown : 키를 누르는 순간에만 발생
- Keyup : 키를 눌렀다가 떼는 순간
-
Load : 웹페이지에 필요한 모든 파일(html, css, js 등)의 다운로드가 완료 되었을 때
-
Resize : 브라우저 창의 크기가 변경 될 때
-
Scroll : 스크롤이 발생할 때
-
Unload : 링크를 타고 이동하거나, 브라우저를 닫을 때
-
Change : 폼 필드의 상태가 변경 되었을 때
[수업]
DOM1.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
</head>
<body>
<div class="container">
<div class="box" id="green">1</div>
<div class="box" id="red">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<input type="text" name="userName" id="">
<input type="text" name="userName" id="">
<!-- <script>
// 요소 선택
// 1. getElementById : id 속성값으로 요소를 선택 (요소 하나만 선택)
let dom1 = document.getElementById('green');
console.log(dom1);
// 2. getElementsByClassName
// class 속성값으로 요소 선택
// HTMLCollection
let dom2 = document.getElementsByClassName('box');
console.log('dom2 :', dom2);
for (let i = 0; i < dom2.length; i++) {
console.log(dom2[i]);
}
// 3. getElementsByTagName
// 태그 이름 기준으로 요소 선택
// HTMLCollection
let dom3 = document.getElementsByTagName('div');
console.log(dom3);
// 3. getElementsByName
// name 속성값으로 요소 선택
// NodeList 배열
let dom4 = document.getElementsByName('userName');
console.log(dom4);
// 4. querySelector
// 선택자를 이용해서 요소 선택
// CSS 선택자와 동일 (클래스: ., id: #, 태그: 태그이름 등등)
let dom5 = document.querySelector('#red');
console.log(dom5);
// NodeList 배열
let dom6 = document.querySelectorAll('div');
console.log(dom6);
</script> -->
<div id="parent">
Text
<div id="two">div 두번째 Text</div>
<div>div 세번째 Text</div>
</div>
<script>
let parent = document.getElementById('parent');
console.log(parent);
let parentChildren = parent.children;
let parentChildNodes = parent.childNodes;
console.log('children :', parentChildren);
console.log('children :', parentChildren.namedItem('two'));
console.log('childNodes :', parentChildNodes);
// 자식 추가 (추가할 부모 선택 -> 추가할 자식 만들고 -> 자식 붙여주기)
let child1 = document.createElement('div');
child1.innerText = '네번째 Text';
parent.appendChild(child1);
/*
태그의 내부 내용을 변경
- innerText : 문자열을 넣는거 & 공백 문자 제거
- innerHTML : HTML 요소를 넣는 거
- textContent : 문자열을 넣는거 & 공백 문자 반환
*/
let two = document.getElementById('two');
two.innerHTML = '<strong>강조</strong>';
two.innerHTML = '강조';
// two.textContent = ' textContent<strong>강조</strong>. & !';
console.log(two.innerText);
</script>
</body>
</html>
<!--
HTMLCollection vs NodeList
1.
- HTMLCollection 객체는 태그 요소만 포함
- NodeList 객체는 태그와 텍스트 노드 등을 모두 포함한다.
2.
- HTMLCollection 객체는 자식 요소 노드에 접근할 때 인덱스방식과 namedItem 메소드 방식을 사용할 수 있다.
- NodeList 객체는 인덱스로만 접근 가능하다.
3.
- HTMLCollection은 동적이고, NodeList는 정적이다.
- HTMLCollection 객체는 DOM을 다루면서 새로운 요소가 추가됐을 때, 추가된 요소도 가져올 수 있다.
- NodeList 객체는 새로 추가된 요소를 가져올 수 없다.
4.
- HTMLCollection : 실제 배열X, 배열과 유사한 객체, forEach 사용X
- NodeList : 실제 배열 O, forEach문 사용 가능
-->DOM2.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM class</title>
<style>
.box {
border: 1px solid black;
width: 100px;
height: 100px;
}
#green {
background-color: green;
}
#red {
background-color: red;
}
.d-none {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="green">1</div>
<div class="box" id="red">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<button onclick="addClass()">addClass</button>
<button onclick="removeClass()">removeClass</button>
<button onclick="containsClass()">containsClass</button>
<button onclick="toggleClass()">toggleClass</button>
<input type="text" name="userName" id="userName">
<!-- 클래스 관련 메소드 -->
<script>
let greenBox = document.getElementById('green');
// 클래스 추가
function addClass() {
greenBox.classList.add('box1');
console.log(greenBox.classList);
}
// 클래스 삭제
function removeClass() {
greenBox.classList.remove('box1');
console.log(greenBox.classList);
}
// 클래스 유무 확인, true/false 반환
function containsClass() {
console.log(greenBox.classList.contains('box1'));
}
// 클래스가 있으면 제거, 없으면 추가
function toggleClass() {
greenBox.classList.toggle('d-none');
}
</script>
<!-- 속성 변경 메소드 -->
<script>
let inputEl = document.getElementById('userName');
inputEl.setAttribute('placeholder', 'name');
inputEl.placeholder = 'name2';
inputEl.style = "color: red;"
// inputEl.style.color = 'red';
</script>
</body>
</html>DOM3.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 다른 노드 접근하기</title>
</head>
<body>
<div id="container">
<div class="box" id="green">1</div>
previous 테스트
<!-- 주석 previous 테스트 -->
<div class="box" id="red">2</div>
next 테스트
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<button onclick="getParent()">getParent</button>
<button onclick="pElSibling()">pElSibling</button>
<button onclick="pNoSibling()">pNoSibling</button>
<button onclick="nElSibling()">nElSibling</button>
<button onclick="nNoSibling()">nNoSibling</button>
<script>
let container = document.getElementById('container');
let greenBox = document.getElementById('green');
let redBox = document.getElementById('red');
console.log('children :', container.children);
// parentNode: 부모 요소를 가져온다
function getParent() {
console.log(greenBox.parentNode);
}
// 이전 형제
function pElSibling() {
console.log(redBox.previousElementSibling);
}
function pNoSibling() {
console.log(redBox.previousSibling);
}
// 다음 형제
function nElSibling() {
console.log(redBox.nextElementSibling);
}
function nNoSibling() {
console.log(redBox.nextSibling);
}
</script>
</body>
</html>DOM4.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소 추가, 삭제</title>
<script>
// let ul = document.querySelector('ul'); // null
function createNode() {
// 노드 만들기
let li = document.createElement('li');
li.innerText = '새로 추가된 리스트';
console.log('li :', li);
}
function appendNode() {
let li = document.createElement('li');
li.innerText = '새로 추가된 리스트';
// append() : 요소.append() 선택한 요소의 맨 뒤 자식 요소로 추가
let ul = document.querySelector('ul');
console.log(ul);
ul.append(li);
ul.append('text');
}
function appendChildNode() {
let li = document.createElement('li');
li.innerText = '새로 추가된 리스트 append child';
// appendChild() : 요소.appendChild() 선택한 요소의 맨 뒤 자식 요소로 추가
let ul = document.querySelector('ul');
console.log(ul);
ul.appendChild(li);
ul.appendChild('text'); // error : appendChild()는 요소노드만 추가 가능
}
function prependNode() {
let li = document.createElement('li');
li.innerText = '새로 추가된 리스트 prepend child';
// appendChild() : 요소.appendChild() 선택한 요소의 맨 뒤 자식 요소로 추가
let ul = document.querySelector('ul');
ul.prepend(li);
}
function beforeNode() {
// 기존 노드 앞에 형제 요소로 추가
let standard = document.getElementById('li');
let li = document.createElement('li');
li.innerText = 'before';
standard.before(li);
}
function afterNode() {
// 기존 노드 뒤에 형제 요소로 추가
let standard = document.getElementById('li');
let li = document.createElement('li');
li.innerText = 'after';
standard.after(li);
}
function removeNode() {
// 내가 선택한 요소 삭제
let standard = document.getElementById('li');
standard.remove();
}
function removeChildNode() {
let ul = document.querySelector('ul');
let standard = document.getElementById('li');
console.log(ul.removeChild(standard));
}
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li id="li">3</li>
<li>4</li>
<li>5</li>
</ul>
<input type="text" name="" id="" value="">
<button onclick="createNode()">createNode</button>
<button onclick="appendNode()">appendNode</button>
<button onclick="appendChildNode()">appendChildNode</button>
<button onclick="prependNode()">prependNode</button>
<button onclick="beforeNode()">before</button>
<button onclick="afterNode()">after</button>
<button onclick="removeNode()">removeNode</button>
<button onclick="removeChildNode()">removeChildNode</button>
<button onclick="getValue()">get value</button>
<script>
function getValue() {
let input = document.querySelector('input');
console.log(input.value);
input.value = 123;
}
</script>
</body>
</html>
🌳🍎