Javascript
데이터 저장하기
데이터 불러오기
데이터 실행하기
데이터 제어하기
문자열 객체
배열 객체
수학 객체
숫자 객체
브라우저 객체
요소 객체
이벤트 객체
제이쿼리
검색 효과
퀴즈 효과
데이터 효과
마우스 효과
슬라이드 효과
패랠랙스 효과
게임 효과
05. 요소 메서드 : 선택자 : document.querySelector() : 요소 선택자
05. 요소 메서드 : 선택자 : document.querySelectorAll() : 모든 요소 선택자
05. 요소 메서드 : 선택자 : document.getElementById() : 아이디 요소 선택자
05. 요소 메서드 : 선택자 : document.getElementByClassName() : 클래스 요소 선택자
05. 요소 메서드 : 선택자 : document.getElementByTagName() : 태그 요소 선택자
01. 요소 메서드 : 텍스트 : innerText() : 요소에 텍스트 설정하기
02. 요소 메서드 : 텍스트 : textContent() : 요소에 텍스트 설정하기
03. 요소 메서드 : 텍스트 : innerHTML() : 요소에 텍스트(태그인식) 설정하기
04. 요소 메서드 : 텍스트 : outerText() : 요소에 텍스트(태그인식) 설정하기
05. 요소 메서드 : 클래스 : classList.add() : 클래스 추가하기
06. 요소 메서드 : 클래스 : classList.remove() : 클래스 삭제하기
07. 요소 메서드 : 클래스 : classList.toggle() : 클래스 추가/삭제하기
08. 요소 메서드 : 클래스 : 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() : 크기 및 위치값
09. 요소 메서드 : 요소 추가 : element.insertAdjacentHTML(beforebegin) : 요소 앞
09. 요소 메서드 : 요소 추가 : element.insertAdjacentHTML(afterbegin) : 요소 안 첫번째 자식
09. 요소 메서드 : 요소 추가 : element.insertAdjacentHTML(beforeend) : 요소 안 마지막 자식
09. 요소 메서드 : 요소 추가 : element.insertAdjacentHTML(afterend) : 요소 뒤
09. 요소 메서드 : 요소 추가 : element.노드어쩌고
크기 및 위치를 표현하는 속성과 메서드
width: 400px
margin: 20px
border: 1px
padding: 20px
여기에 결과값이 표시됩니다.
박스의 가로값(clientWidth)을 구합니다.
박스의 세로값(clientHeight)을 구합니다.
박스의 Y축 값(clientTop)을 구합니다.
박스의 X축 값(clientLeft)을 구합니다.
박스의 가로값(offsetWidth)을 구합니다.
박스의 세로값(offsetHeight)을 구합니다.
박스의 Y축 값(offsetTop)을 구합니다.
박스의 X축 값(offsetLeft)을 구합니다.
박스의 크기 및 위치값(getBoundingClientRect())을 구합니다.