Javascript

  • 데이터 저장하기
  • 데이터 불러오기
  • 데이터 실행하기
  • 데이터 제어하기
  • 문자열 객체
  • 배열 객체
  • 수학 객체
  • 숫자 객체
  • 브라우저 객체
  • 요소 객체
  • 이벤트 객체
  • 제이쿼리
  • 검색 효과
  • 퀴즈 효과
  • 데이터 효과
  • 마우스 효과
  • 슬라이드 효과
  • 패랠랙스 효과
  • 게임 효과
  • 00. 요소 메서드 : 선택자 : document.querySelector() : 요소 선택자
  • 00. 요소 메서드 : 선택자 : document.querySelectorAll() : 모든 요소 선택자
  • 00. 요소 메서드 : 선택자 : document.getElementById() : id 요소 선택자
  • 00. 요소 메서드 : 선택자 : document.getElementByClassname() : class 요소 선택자
  • 00. 요소 메서드 : 선택자 : document.getElementByTagname() : 태그 요소 선택자

  • 00. 요소 메서드 : 텍스트 : innerText() : 요소에 텍스트 설정하기
  • 00. 요소 메서드 : 텍스트 : textContent() : 요소에 텍스트 설정하기
  • 00. 요소 메서드 : 텍스트 : innerHTML() : 요소에 텍스트(태그를 인식) 설정하기
  • 00. 요소 메서드 : 텍스트 : outerHTML() : 요소에 텍스트(태그를 인식) 설정하기

  • 00. 요소 메서드 : 클래스 : classList.add() : 클래스 추가하기
  • 00. 요소 메서드 : 클래스 : classList.remove() : 클래스 삭제하기
  • 00. 요소 메서드 : 클래스 : classList.toggle() : 클래스 삭제/추가(토글방식)
  • 00. 요소 메서드 : 클래스 : classList.contains() : 클래스 여부 확인

  • 01. 요소 속성 : 크기 및 위치 : element.clientWidth : 요소 가로값(margin/border 미포함)
  • 02. 요소 속성 : 크기 및 위치 : element.clientHeight : 요소 높이값(margin/border 미포함)
  • 03. 요소 속성 : 크기 및 위치 : element.clientTop : 요소 Y축값(부모기준)
  • 04. 요소 속성 : 크기 및 위치 : element.clientLeft : 요소 X축값(부모기준)
  • 05. 요소 속성 : 크기 및 위치 : element.offsetWidth : 요소 가로값(border/padding 포함한 값)
  • 06. 요소 속성 : 크기 및 위치 : element.offsetHeight : 요소 높이값(border/padding 포함한 값)
  • 07. 요소 속성 : 크기 및 위치 : element.offsetTop : 요소 Y축값(문서 기준)
  • 08. 요소 속성 : 크기 및 위치 : element.offsetLeft : 요소 X축값(문서 기준)
  • 09. 요소 메서드 : 크기 및 위치 : element.getBoundingClientRect() : 요소 top, left, right, bottom, x, y, width, height(객체로 반환)
  • 10. 요소 메서드 : 요소 추가 : element.insertAdjacentHTML(beforebegin) : 요소 앞에
  • 10. 요소 메서드 : 요소 추가 : element.insertAdjacentHTML(afterbegin) : 요소 안의 첫번째 자식
  • 10. 요소 메서드 : 요소 추가 : element.insertAdjacentHTML(beforeend) : 요소 안의 마지막 자식
  • 10. 요소 메서드 : 요소 추가 : element.insertAdjacentHTML(afterend) : 요소 뒤에

  • 10. 요소 메서드 : 요소 추가 : element.appendChild() : 자식 요소에 추가

위치 및 크기를 나타내는 속성 및 메서드

width:400px;
margin:20px;
border:1px;
padding:20px;

여기에 결과값이 표시됩니다.

박스의 가로값(clientWidth)을 구합니다. 박스의 높이값(clientHeight)을 구합니다. 박스의 Y축값(clientTop)을 구합니다. 박스의 X축값(clientLeft)을 구합니다. 박스의 가로값(offsetWidth)을 구합니다. 박스의 세로값(offsetHeight)을 구합니다. 박스의 Y축값(offsetTop)을 구합니다. 박스의 X축값(offsetLeft)을 구합니다. 박스의 getBoundingClientRect()을 구합니다.
sshin4882@naver.com