[포스코X코딩온] JavaScript 표준객체 및 DOM

이번 포스팅 주제

• JavaScript 표준 객체
• DOM(Document Object Model)

 

JavaScript 표준 객체

 

Javascript의 표준 객체는 JS(JavaScript)에서 기본적으로 가지고 있는 객체들로,

프로그래밍을 하는데 기본적으로 필요한 도구들을 말한다.

 

ex) String, Number, Array, Date, Math... etc

 

 

Date 객체

• JS에서 매 순간 바뀌는 시간과 날짜에 대한 정보를 얻기 위해 사용하는 객체

Date 객체의 함수는 아래와 같다.

• Date.now() - 현재 시간을 기준으로 전부 표시
• Dateprototype getter 메소드 (var date = new Dare(); )
  
  • date.getFullYear() - 년도 표시
  • date.getMonth() - 월 표시
  • date.getDate() - 일 표시
  • date.getDay() - 요일 표시
  • date.getTime() - 지정된 시간 표시
  • date.getHours() - 현재 시간 표시
  • date.getMinutes() - 현재 분 표시
  • date.getSeconds() - 현재 초 표시

 

 

요일 값이 5로 나오는 이유는 getDay()는 0~6의 값을 리턴하는데 0부터 일요일, 월~토 순으로 진행되기 때문이다. (코드 작성일 금요일)

 

 

출력 결과

 

---

 

Math 객체 - 함수

Math 메서드는 다음과 같다.

• Math.PI - Pi값을 구한다.
• Math.E - log값을 구한다.
• Math.min() - 주어진 값들 중 가장 작은 값을 구한다. ( min은 배열을 사용가능)
• Math.max() -주어진 값들 중 가장 큰 값을 구한다. ( max은 배열을 사용가능)
• Math.random() - 0<= x <1 사이의 값들을 랜덤으로 가져온다.
• Math.round() - 정수값으로 반올림 한다.
• Math.floor() - 정수값으로 내림한다.
• Math.ceil() - 정수값으로 올림한다.

 

메서드 체인 방식으로 random값을 1<= x <101 사이로 출력하게 만들었다.

 

 

 

DOM( Document Object Model )

DOM(Document Object Model)

• HTML 문서 요소의 집합
• HTML 문서는 각각의 node와 object의 집합으로 문서를 표현
• 각각 node 또는 object에 접근하여 문서 구조/ 스타일 / 내용 등을 변경 할 수 있도록 하는 것

 

DOM

 

Document는 웹 페이지에 존재하는 HTML요소에 접근하여 행동을 하고자 할 때 사용하는 객체 ( 제어하고 싶은 요소 선택)

 

DOM의 기능은

• 새로운 HTML 요소, 속성 추가
• 존재하는 HTML 요소나 속성 제거
• HTML 문서의 모든 HTML 요소, 속성 변경
• HTML 문서에 모든 CSS 스타일 변경
• HTML 문서에 새로운 HTML 이벤트 추가
• HTML 문서의 모든 HTML 이벤트에 반응

등이 있다.

 

DOM API는 DOM Application Programming Interface로 어플리케이션이 동작하는 기능을 사용하기 쉽게(접근하기 쉽게) 만든 명령어 집합체이다.

 

Document 요소를 선택할 때는 아래와 같은 명령어가 사용된다.

• document.getElementById(아이디 속성값)
• document.getElementsByClassName(클래스 속성값)
• document.getElementsByTagName(태그 이름)
• document.getElementsByName(Name 속성값)
• document.querySelector(CSS 선택자)
• document.querySelectorAll(CSS 선택자)

 

요소 선택자 querySelector

querySelector

• 요소선택자를 사용해서 자신이 가져오고 싶어하는 요소를 가져오는 메소드
• 문서에서 만나는 제일 첫 번째 요소를 반환한다.

 

querySelectorAll

• 문서에 존재하는 모든 요소를 찾아주는 메소드
• 모든 요소를 가져와서 배열(같은) 데이터로 만든다.

 

 

---

Document - 요소 다루기

• document.createElement(HTML요소)
• document.write(텍스트)
• [].appendChild(); - 자식 추가
• [].renoveChild(); - 자식 제거
• [].innerText - 문자열을 넣는 것 & 공백 문자는 제거
• [].innerHTML - HTML 요소를 넣는 것
• [].textContent - 문자열을 넣는 것 & 공백 문자 반환
• [].className - 클래스 이름;

 

 

---

 

ClassList.~

 

ClassList.~ 는 선택 요소에 class를 더하거나 빼거나, 클래스가 존재하는지 체크하는 메소드다

 

해당 기능과 CSS를 잘 활용하면 액티브한 웹페이지 구성이 가능하다.

• 요소.classList.add() - 클래스 추가
• 요소.classList.remove() - 클래스 제거
• 요소.classList.contains() - 클래스 존재 유무 확인( true or false 반환)
• 요소.classList.toggle() - 클래스가 있으면 제거 없으면 추가

 

setAttribute, html 요소 속성 추가

• 선택한 요소의 속성 값을 직접 지정할 수 있는 메소드
• 요소.setAttribute("속성명", "지정할 속성")

 

 

 

---

 

다른 노드에 접근하기

특정 노드를 선택한 후, 그 노드의 형제, 부모, 자식 노드에 접근하는 방법

• 요소.children - 자식 요소들 선택
• 요소.parentNode - 부모 요소 가져옴
• 요소.previousElementSibling - 이전 형제의 Element를 가져옴
• 요소.previousSibling - 이전 형제의 텍스트 노드를 가져옴
• 요소.nextElementSibling - 다음 형제의 Element를 가져옴
• 요소.nextSibling - 다음 형제의 텍스트 노드를 가져옴

 

 

 

 

---

 

createElement('html요소')

• html의 특정 노드를 생성
• 괄호안에는 html의 요소인 태그명을 넣어주면 된다.

 

요소를 만든 후 추가하기

• 요소.append() / 요소.appendChild() - 선택된 요소의 맨 뒤의 자식 요소로 추가됨
• 요소.prepend() - 선택된 요소의 맨 앞쪽의 자식 요소로 추가됨
• 요소.before() - 선택된 요소의 앞에 있는 형제 요소로 추가됨
• 요소.after() - 선택된 요소의 뒤에 있는 형제 요소로 추가됨
• 요소.remove() - 선택된 요소 삭제
• 요소.removeChild('요소의 자식요소') - 선택된 요소의 자식 요소 삭제