- 01. 요소 메서드 : 선택자 : document.querySelector() : 요소 선택자
- 02. 요소 메서드 : 선택자 : document.querySelectorAll() : 모든 요소 선택자
- 03. 요소 메서드 : 선택자 : document.getElementByld() : 아이디 요소 선택자
- 04. 요소 메서드 : 선택자 : document.getElementByClassName() : 클래스 요소 선택자
- 04. 요소 메서드 : 선택자 : document.getElementByTagName() : 태그 요소 선택자
- 05. 요소 메서드 : 텍스트 : innerText() : 요소에 텍스트 설정
- 06. 요소 메서드 : 텍스트 : textContent() : 요소에 텍스트 설정
- 07. 요소 메서드 : 텍스트 : innerHTML() : 요소에 텍스트(태그 인식) 설정
- 08. 요소 메서드 : 텍스트 : outerHTML() : 요소에 텍스트(태그 인식) 설정
- 09. 요소 메서드 : 클래스 : classList.add() : 클래스 추가
- 10. 요소 메서드 : 클래스 : classList.remove() : 클래스 삭제
- 11. 요소 메서드 : 클래스 : classList.toggle() : 클래스 추가 및 삭제
- 12. 요소 메서드 : 클래스 : classList.contains() : 클래스 존재 여부 확인
- 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() : 크기 및 위치
- 10. 요소 메서드 : 크기 및 위치 : element.insertAdjacentHTML() : (beforebegin) : 요소 앞에
- 10. 요소 메서드 : 크기 및 위치 : element.insertAdjacentHTML() : (afterbegin) : 요소 안에 첫번째 자식
- 10. 요소 메서드 : 크기 및 위치 : element.insertAdjacentHTML() : (beforeend) : 요소 안에 마지막 자식
- 10. 요소 메서드 : 크기 및 위치 : element.insertAdjacentHTML() : (afterend) : 요소 뒤에
- 10. 요소 메서드 : 크기 및 위치 : element.appentChild() : 자식 요소 앞에 추가
위치 및 크기를 표현하는 속성 및 메서드
width: 400px
margin: 200px
border: 1px
padding: 20px
margin: 200px
border: 1px
padding: 20px
여기에 결과 값이 표시됩니다.