javascript

  • 데이터저장하기
  • 데이터 불러오기
  • 데이터 실행하기
  • 데이터 저장하기
  • 문자열객체
  • 배열 객체
  • 수학 개체
  • 숫자 개체
  • 브라우저 객체
  • 요소 객체
  • 이벤트 객체
  • 데이터 효과
  • 검색 효과
  • 퀴즈 효과
  • 마우스 효과
  • 슬라이드 효과
  • 패럴랙스 효과
  • 게임 효과
  • 00. 요소 메서드(선택자) : document.querySelector() : 요소 선택자
  • 00. 요소 메서드(선택자) : document.querySelectorAll() : 모든 요소 선택자
  • 00. 요소 메서드(선택자) : document.getElementById() : 아이디 요소 선택자
  • 00. 요소 메서드(선택자) : document.getElementsByClassName() : 클래스 요소 선택자
  • 00. 요소 메서드(선택자) : document.getElementsByTagName() : 태그 요소 선택자

  • 00. 요소 메서드(텍스트) : element.innerText() : 요소 텍스트 설정하기
  • 00. 요소 메서드(텍스트) : element.textContent() : 요소 텍스트 설정하기
  • 00. 요소 메서드(텍스트) : element.innerHTML() : 요소 텍스트(태그포함) 설정하기
  • 00. 요소 메서드(텍스트) : element.outerHTML() : 요소 텍스트(태그포함, 자식포함) 설정하기

  • 00. 요소 메서드(클래스) : element.classList.add() : 클래스 추가하기
  • 00. 요소 메서드(클래스) : element.classList.remove() : 클래스 삭제하기
  • 00. 요소 메서드(클래스) : element.classList.toggle() : 클래스 추가/삭제하기
  • 00. 요소 메서드(클래스) : element.classList.contains() : 클래스 존재 여부 확인
  • 00. 요소 메서드(클래스) : element.style.속성명 : CSS 스타일 설정

  • 00. 요소 속성 : 크기 및 위치 : element.clientWidth : 요소의 가로 값(margin/border 미포함)
  • 00. 요소 속성 : 크기 및 위치 : element.clientHeight : 요소의 세로 값(margin/border 미포함)
  • 00. 요소 속성 : 크기 및 위치 : element.clientTop : 요소의 Y축 값(부모 기준)
  • 00. 요소 속성 : 크기 및 위치 : element.clientLeft : 요소의 X축 값(부모 기준)
  • 00. 요소 속성 : 크기 및 위치 : element.offsetWidth : 요소의 가로 값(margin/border 포함)
  • 00. 요소 속성 : 크기 및 위치 : element.offsetWidth : 요소의 가로 값(margin/border 포함)
  • 00. 요소 속성 : 크기 및 위치 : element.offsetTop : 요소의 Y축 값(문서 기준)
  • 00. 요소 속성 : 크기 및 위치 : element.offsetLeft : 요소의 X축 값(문서 기준)
  • 00. 요소 메서드 : 크기 및 위치 : element.getBoundingClientRect() : 요소의 크기 및 위치 값을 설정
lee3ll@naver.com