📍 포스팅 목적!

• 각 객체마다 사용가능한 메소드가 있다
• cheatsheet 처럼 정리해놔야 나중에 삽질을 덜할것같다!^^
• 그런 의미에서 mdn 문서 뒤지면서 그때그때 계속 업데이트 해야하는 게시물로 사용하자👍

1️⃣ window 객체

📍 MDN window 객체 문서
Window - Web APIs | MDN

• .onload()
• .close()
• .setInerval(함수, 시간), .setTimeout()
  • 주의 사항 > 요소에 해당 함수를 적용시킬때 요소.속성값(임의로정한) = 함수()
    형태로 한뒤 clearTimeout(요소.속성값); 으로 해야 잘 적용된다.!
  • 아래의 객체와 속성을 이해하고 보면 된다.
    

객체로 작업하기 - JavaScript | MDN

• setInterval (function() { 실행코드 }, ms )
• setTimeout( 함수, 시간)
• clearTimeout(함수이름)
• .innerwidth : 윈도우의 내부 가로사이즈(px), 가로 스크롤바의 길이도 포함한다. (가로스크롤이 있을경우)
• .scrollTo( 여러 매개변수가 존재..)

  window.scrollTo({
      ‘behavior’ : ‘smooth’,      //부드럽게 이동 
      ‘top’ : xxx.offsetTop      // 특정영역의 위에서의 좌표값
  			//offsetTop은 선택된 영역의 상단까지의 거리를 절대 좌표로 반환하는 메서드입니다
  })

2️⃣ Document 객체

📍 MDN - Document 객체 문서
Document - Web APIs | MDN

• .getElementsById('')
• .append()
• create 메소드에는 DOM Element 와 node 객체를 만들어내는 메소드가 모두 있음
  • createElement(’태그’)
  • createAttribute(’속성')
  • createTextNode(’데이터’) : 텍스트 노드를 만들어낸다.
    • > DOM에서는 element.innerTEXT

• 요소 접근 메소드
  • .getElementById()
  • .getElementsByClassName()
  • .getElementsByTagName()
  • .querySelector()
  • .querSelectorAll()

3️⃣ Element 객체 (요소객체)

• event.target 그리고 event.currentTarget > 이것도 결국 요소
  • The read-only target property of the Event  interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget  when the event handler is called during the bubbling or capturing phase of the event.
  • eventTarget 과는 무슨차이...?

📍 MDN - Element 객체 문서
Element - Web APIs | MDN

• 요소 접근 프로퍼티

  • .children : 자식 노드 중 요소 노드만 HTMLCollection로 반환(텍스트 노드제외)
  • .firstElementChild : 첫 번째 자식 요소 노드
  • .lastElementChild : 마지막 자식 요소 노드
  • .parentElement : 부모 요소 노드
  • .previousElementSibling : 자신의 이전 형제 요소 노드
  • nextElementSibling 자신의 다음 형제 요소 노드

• .innerHTML, .innerText, .textContent

  1. innerHTML (태그와 텍스트 모두 그대로 텍스트로)
  2. innerText (태그(마크업언어,스타일까지)들이 적용된 텍스트로)
  3. textContent (태그는 제거하고 텍스트만 골라서)

• .animate()

  xxx.animate({
  	//keyframes
  	marginLeft: ["0px", "1024px"]
  },{
  	//animation options
    duration: 500,
  	easeing: "ease",
  	interations: 1,
  	fill: "both"
  })

• xxx.classList ()

  • 선택된 Element의 클래스명들을 반환

메서드	설명
.add(클래스명)	선택된 Element에 클래스명 추가
.remove(클래스명)	선택된 Element에 클래스명 삭제
.toggle(클래스명)	선택된 Element에 클래스명이 존재하면 삭제하고, 없으면 추가

• .className : 클래스명 (대입도 가능)

  • 클래스명이 여러개라면 모두 출력함 (인덱스를 활용하면 클래스단위가 아니라 첫번째 클래스의 문자열 인덱스로 접근한다...)
  • li.className = "list-group"

• .attributes

  • .attributes.name
  • .attributes.value
  • input 태그는 value 값은 on(disabled 한다면 off) ,checked 값은 true or false

• .addEventListener (”event”, function(){})

  • 선택된 Element가 어떠한 이벤트를 가질 때 뒤의 함수가 호출

    document.getElementById("button").addEventListener("click", function(){
    	//button이 클릭될 때
    	//호출 될 함수
    	alert("button clicked")
    });

• addEventListener의 첫번째 인자에 들어갈수있는 이벤트 리스트

  • Event reference | MDN

자주사용하는 이벤트

이벤트	설명
click	클릭 시 (마우스 버튼에서 손가락을 땐 순간)
mouseenter	마우수를 요소 위에 올리면
mouseover	마우스를 요소 위에 올리면 (자식 Element도 영향을 받음)
mouseout	마우스가 요소 밖으로 벗어날 때
mousedown	클릭 하고 버튼에서 손가락을 때기 전
focus	포커스가 갔을 때
keypress	키를 누르는 순간에 발생, 그리고 누르고 있는 동안 계속 발생
keydown	키를 누를 때
keyup	키를 눌렀다가 떼는 순간
load	웹 페이지 소스가 다운로드 되었을 때
resize	창크기를 조절 할 때
scroll	스크롤바, 마우스 휠, up, down 버튼으로 스크롤 할 시
unload	링크를 클릭해서 다른 페이지로 이동하거나 브라우저나 브라우저 탭을 닫았을 때
change	form 필드의 상태가 변경 되었을 때

---