[Javascript] 요소 (Element), 이벤트

요소의 선택

• 웹페이지 내 HTML요소들이 있을때 특정 요소를 선택하는 형식과 여러 요소를 한번에 가리키는 방식이 존재

  • 여러 요소를 가르킬때는 배열 형식으로 처리하게 됨
  • 요소의 선택 형식은 DOM(Document Obejct Model)의 개념임
  • 웹 문서가 로드 되면 문서 객체 형식이 되어 HTML요소와 속성에 접근이 가능하게 됨

• 요소, 속성에 접근할 수 있는 메서드의 종류

  • getElementById()
    • id 속성으로 특정 값을 갖는 요소 반환
  • getElementsByTagName()
    • 특정 태그명 갖는 모든 요소 반환
  • getElementsByClassName()
    • class속성값으로 특정 값을 갖는 모든 요소 반환
  • getElementsByName()
    • name속성으로 특정 값을 갖는 모든 요소 반환
  • querySelector()
    • 특정 CSS선택자 형식과 일치하는 첫번째 요소 반환
  • querySelectorAll()
    • 특정 CSS 선택자 형식과 일치하는 모든 요소 반환

  이벤트

• HTML요소에서 발생하는 사건

• 이벤트가 발생하기 위해선 원인과 내용이 있어야 함

  • 이벤트는 이벤트 트리거와 이벤트 핸들러로 구성됨

  • 트리거는 인터렉션이나 특정 조건 등을 만족하는 것으로

    • click, change, mouse 조작, 키보드 조작, 웹문서 로드 등이 있음

  • 트리거가 발생하면 미리 정해진 코드가 실행되며 이를 이벤트 처리기 라고 함
    - 이벤트 처리기는 하나의 이벤트만 처리하는 이벤트 핸들러와
    하나의 요소에서 여러개의 이벤트 처리가 가능한 이벤트 리스너가 있음

    // 이벤트 핸들러 
    document.querySelector('.btn').onclick  = function(){
    	alert('click!')
    }
    
    // 이벤트 리스너
    document.querySelector('.btn').addEventListener('click', function(){
    	alert('click!')
    });
    
    document.querySelector('.btn').addEventListener('click', function(){
    	alert('click2!')
    });

    타이밍 이벤트

  • 정해진 시간이 지나고 난 후 코드를 실행하는 이벤트

    • 대표적으로 setTimeout()과 setInterval()이 있음

  • setTimeout(함수, 시간)

    • 정해진 시간이 지나면 한번 실행

  • setInterval(함수, 시간)

    • 정해진 시간 간격마다 계속 실행