Javascript
01. 요소 메서드 : 선택자 : documentr.querySelector() : 요소 선택자
01. 요소 메서드 : 선택자 : documentr.querySelectorAll() : 모든 요소 선택자
01. 요소 메서드 : 선택자 : documentr.getElementById() : 아이디 요소 선택자
01. 요소 메서드 : 선택자 : documentr.getElementByClassName() : 클래스 요소 선택자
01. 요소 메서드 : 선택자 : documentr.getElementByTagName() : 태그 요소 선택자
01. 요소 메서드 : 텍스트 : innerText() : 요소에 텍스트를 설정하기
02. 요소 메서드 : 텍스트 : innerHTML() : 요소에 텍스트(태그인식)를 설정하기
03. 요소 메서드 : 텍스트 : outerHTML() : 요소에 텍스트(태그인식)를 설정하기
03. 요소 메서드 : 텍스트 : textContent() : 요소에 텍스트 설정하기
03. 요소 메서드 : 클래스 : classList.add() : 클래스 추가하기
03. 요소 메서드 : 클래스 : classList.remove() : 클래스 삭제하기
03. 요소 메서드 : 클래스 : classList.toggle() : 클래스 추가/삭제하기
03. 요소 메서드 : 클래스 : classList.contains() : 클래스 존재 여부 확인하기
03. 요소 메서드 : 클래스 : classList.add() : 클래스 추가하기
03. 요소 메서드 : 클래스 : classList.remove() : 클래스 삭제하기
03. 요소 메서드 : 클래스 : classList.toggle() : 클래스 추가/삭제하기
03. 요소 메서드 : 클래스 : 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() : 요소의 크기 및 위치정보 : top, left, right, bottom, x, y, width, height
10. 요소 메서드 : 요소 추가 : element.insertAdjacentElement("beforebegin") : 요소 앞에 추가
11. 요소 메서드 : 요소 추가 : element.insertAdjacentElement("afterbegin") : 요소 안에 첫 번째 자식요소에 추가
12. 요소 메서드 : 요소 추가 : element.insertAdjacentElement("beforeend") : 요소 안에 마지막 자식요소에 추가
13. 요소 메서드 : 요소 추가 : element.insertAdjacentElement("afterend") : 요소 뒤에 추가
14. 요소 메서드 : 요소 추가 : element.appendChild() : 자식 요소의 추가
01. 위치 및 크기를 표현하는 속성 및 메서드
width : 400px
margin : 20px
border : 1px
padding : 20px
여기에 결과값이 표시됩니다.
박스의 가로값(clientWidth)을 구합니다.
박스의 세로값(clientHeight)을 구합니다.
박스의 Y축 값(clientTop)을 구합니다.
박스의 X축 값(clientLeft)을 구합니다.
박스의 가로값(offsetWidth)을 구합니다.
박스의 세로값(offsetHeight)을 구합니다.
박스의 세로값(offsetTop)을 구합니다.
박스의 세로값(offsetLeft)을 구합니다.
박스의 크기정보(getBoundingClientRect)를 구합니다.