javascript

선택자

• 요소 메서드 : 선택자 : document.querySelector( ) : 요소 선택자
• 요소 메서드 : 선택자 : document.querySelectorAll( ) : 모든 요소 선택자
• 요소 메서드 : 선택자 : document.getElementsById( ) : 아이디 요소 선택자
• 요소 메서드 : 선택자 : document.getElementsByClassName( ) : 클래스 요소 선택자
• 요소 메서드 : 선택자 : document.getElementsByTagName( ) : 태그 요소 선택자

텍스트

• 요소 메서드 : 텍스트 : element.innerText( ) : 요소 텍스트 설정하기
• 요소 메서드 : 텍스트 : element.textContent( ) : 요소 텍스트 설정하기
• 요소 메서드 : 텍스트 : element.innerHTML( ) : 요소 텍스트(태그포함) 설정하기
• 요소 메서드 : 텍스트 : element.outerHTML( ) : 요소 텍스트(태그포함, 자식포함) 설정하기

클래스

• 요소 메서드 : 클래스 : element.classList.add( ) : 클래스 추가하기
• 요소 메서드 : 클래스 : element.classList.remove( ) : 클래스 삭제하기
• 요소 메서드 : 클래스 : element.classList.toggle( ) : 클래스 추가/삭제하기
• 요소 메서드 : 클래스 : element.classList.contains( ) : 클래스 존재 여부 확인하기
• 요소 메서드 : 클래스 : element.style.속성명 : CSS 스타일 설정하기

크기 및 위치

• 요소 속성 : 크기 및 위치 : element.clientWidth : 요소의 가로 값(margin/border 값 미포함)
• 요소 속성 : 크기 및 위치 : element.clientHeight : 요소의 세로 값(margin/border 값 미포함)
• 요소 속성 : 크기 및 위치 : element.clientTop : 요소의 Y축 값(부모 기준)
• 요소 속성 : 크기 및 위치 : element.clientLeft : 요소의 X축 값(부모 기준)
• 요소 속성 : 크기 및 위치 : element.offsetWidth : 요소의 가로 값(border/padding 값 포함)
• 요소 속성 : 크기 및 위치 : element.offsetHeight : 요소의 세로 값(border/padding 값 포함)
• 요소 속성 : 크기 및 위치 : element.offsetTop : 요소의 X축 값(문서 기준)
• 요소 속성 : 크기 및 위치 : element.offsetLeft : 요소의 Y축 값(문서 기준)
• 요소 메서드 : 크기 및 위치 : element.getBoundingClientRect( ) : 요소의 크기 및 위치 값을 설정