[JavaScript] document, Element 관련 메서드 간단정리

document

document.querySelect(선택자)

선택자로 html 요소를 가져온다.

• id로 가져오기
  • document.querySelect('#아이디')
  • 반드시 #을 붙여줘야한다.
• class로 가져오기
  • document.querySelect('.클래스명')
  • 반드시 . 을 붙여줘야한다.

document.getElementById(아이디명)

아이디 명으로 html 요소를 가져온다.

• 예시
  • document.getElementById('아이디명')

document.getElementsByTagName(태그명)

해당 태그들을 모두 불러온다.

• 예시
  • document.getElementsByTagName('div')
  • document.getElementsByTagName('h1')
• 불러온 모든 요소들에게 이벤트를 부여하려면 배열이 아닌 각 요소에 이벤트를 모두 넣어줘야한다.
  • for문 등 사용

Element

Element.classList

해당 요소의 클래스 리스트를 가져온다.

예시

• document.querySelect('#아이디').classList
• document.getElementById('아이디명').classList

메서드

• .classList.add(추가할 클래스 명) : 요소에 파라미터 값을 클래스 리스트에 추가한다.
• .classList.remove(삭제할 클래스 명) : 요소에 파라미터 값을 클래스 리스트에서 삭제한다.
• .classList.toggle(토글할 클래스 명) : 요소에 파라미터 값을 클래스 리스트에서 토글한다.

Element.onclick(function(){})

요소에 클릭 이벤트가 발생했을 때 해야할 작업을 정의한다.

Element.addEventListenor(’이벤트 타입’ function(){})

요소에 지정한 이벤트 타입이 발생했을 때 해야할 작업을 정의한다.

Element.value

요소가 가지고 있는 프로퍼티중 value 를 가지고 온다.

예시

• document.querySelect('inputBox').value
  • inputBox 클래스를 가진 input 태그에서 입력된 값을 가지고온다.