선택자
- 01. 요소 메서드 : 선택자 : document.querySelector(): 요소 선택자
- 02. 요소 메서드 : 선택자 : document.querySelectorAll(): 모든 요소 선택자
- 03. 요소 메서드 : 선택자 : document.getElementById(): 아이디 요소 선택자
- 04. 요소 메서드 : 선택자 : document.getElementsByClassName(): 클래스 요소 선택자
- 05. 요소 메서드 : 선택자 : document.getElementsByTagName(): 태그 요소 선택자
텍스트
- 01. 요소 메서드 : 텍스트 : element.innerText(): 요소 텍스트 설정하기
- 02. 요소 메서드 : 텍스트 : element.textContent(): 요소 텍스트 설정하기
- 03. 요소 메서드 : 텍스트 : element.innerHTML(): 요소 텍스트(태그포함) 설정하기
- 04. 요소 메서드 : 텍스트 : element.outerHTML(): 요소 텍스트(태그포함, 자식포함) 설정하기
클래스
- 01. 요소 메서드 : 클래스 : element.classList.add() : 클래스 추가하기
- 02. 요소 메서드 : 클래스 : element.classList.remove() : 클래스 삭제하기
- 03. 요소 메서드 : 클래스 : element.classList.toggle() : 클래스 추가/삭제하기
- 04. 요소 메서드 : 클래스 : element.classList.contains() : 클래스 존재 여부 확인하기
- 05. 요소 메서드 : 클래스 : element.style.속성명: CSS 스타일 설정하기
- 06. 요소 속성 : 클래스 : element.value: 요소의 속성값 가져오기
크기 및 위치
- 01. 요소 속성 : 크기 및 위치 : element.clientWidth: 요소의 가로값(마진/보더 미포함)
- 02. 요소 속성 : 크기 및 위치 : element.clientHeight: 요소의 세로값(마진/보더 미포함)
- 03. 요소 속성 : 크기 및 위치 : element.clientTop: 요소의 Y축 값(부모 기준)
- 04. 요소 속성 : 크기 및 위치 : element.clientLeft: 요소의 X축 값(부모 기준)
- 05. 요소 속성 : 크기 및 위치 : element.offsetWidth: 요소의 가로값(보더/패딩 포함)
- 06. 요소 속성 : 크기 및 위치 : element.offsetHeight: 요소의 세로값(보더/패딩 포함)
- 07. 요소 속성 : 크기 및 위치 : element.offsetTop: 요소의 Y축 값(문서 기준)
- 08. 요소 속성 : 크기 및 위치 : element.offsetLeft: 요소의 X축 값(문서 기준)
- 09. 요소 속성 : 크기 및 위치 : element.getBoundingClientRect: 요소의 크기 및 위치 값