[JS] JavaScript 기초 - Dom 요소 선택하기

JavaScript란?

JavaScript는 “HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 스크립트 언어” 다. 현재는 웹 브라우저에서만 동작하는 반쪽짜리 프로그래밍 언어가 아닌, 프론트엔드 영역은 물론 백엔드 영역까지 아우르는 웹 프로그래밍 언어의 표준으로 자리를 잡고 있다.

JavaScript로 브라우저에서 가능한 동작

• 페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기
• 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기
• 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기(AJAX나 COMET과 같은 기술 사용)
• 쿠키를 가져오거나 설정하기
• 사용자에게 질문을 건네거나 메시지 보여주기
• 클라이언트 측에 데이터 저장하기(로컬 스토리지)

JavaScript로 Dom 요소 선택하기

• getElementById
  • HTML id 속성으로 태그를 선택한다.
    

    document.getElementById('아이디')

  • id에 해당하는 태그가 있는 경우 태그 하나를 반환한다.
  • id에 해당하는 태그가 없는 경우 null을 반환한다.
• getElementsByClassName
  • HTML class 속성으로 태그를 선택한다.
    

    document.getElementsByClassName('class')

  • class에 해당하는 HTMLCollection을 반환한다. (HTMLCollection을 반환하기 때문에 getElementsByClassName 에 's' 빠트리지 않도록 주의하기)
    [HTMLCollection 참조] https://developer.mozilla.org/ko/docs/Web/API/HTMLCollection
    
  • class에 해당하는 태그가 없는 경우 빈 HTMLCollection을 반환한다.
• getElementsByTagName
  • HTML tag 이름으로 태그를 선택한다.
    

    document.getElementsByTagName('tag')

  • tag에 해당하는 태그가 있는 경우 HTMLCollection을 반환한다. (HTMLCollection을 반환하기 때문에 getElementsByTagName 에 's' 빠트리지 않도록 주의하기)
  • tag에 해당하는 태그가 없는 경우 빈 HTMLCollection을 반환한다.
• querySelector
  
  • CSS 선택자로 태그를 선택한다.
    

    document.querySelector('CSS 선택자')

  • 선택자에 해당하는 태그가 있는 경우 태그 하나를 반환한다.
  • 선택자에 해당하는 태그가 여러개 있는 경우 가장 첫번째 태그 하나를 반환한다.
    (순서는 깊이와 관계 없이 HTML의 위에서부터 탐색한다)
  • 선택자에 해당하는 태그가 없는 경우 null을 반환한다.
• querySelectorAll
  • CSS 선택자에 해당하는 태그를 모두 선택한다.
    

    document.querySelectorAll('CSS 선택자')

  • 선택자에 해당하는 태그가 있는 경우 NodeList를 반환한다.
    [NodeList 참조] https://developer.mozilla.org/ko/docs/Web/API/NodeList
  • 선택자에 해당하는 태그가 없는 경우 빈 NodeList를 반환한다.

유사 배열 ( Array-Like Object )

유사 배열이란 배열은 아니지만 인덱스로 접근할 수 있고, length 속성을 가지는 배열 처럼 보이는 특수한 객체이다. 유사 배열로는 HTMLCollection, NodeList  등이 있다.

특징

• Array.isArray(유사 배열)의  리턴은 false이다.
• 배열처럼 인덱스를 통해 노드에 접근 할 수 있다.
  

  const first = document.querySelectorAll('.node_item')[0]

• length 속성을 가진다.
  

  console.log(document.querySelectorAll('node-item').length) // node-item 요소의 개수를 출력

• 배열의 메서드는 직접 사용할 수 없다.
  

  document.querySelectorAll('node-item').map(...) // document.querySelectorAll(...).map is not a function 에러 출력

 

이벤트 & 이벤트 핸들러

• 이벤트: 웹 페이지에서 발생하는 특정 상황이며, 다음과 같은 이벤트들이 있다.
  1. 마우스 이벤트 (click, mouseover, mousedown, mouseup, mousemove ...)
  2. 폼 요소 이벤트 (submit, foucs ...)
  3. 키보드 이벤트 (keydown, keyup ...)
  4. 문서 이벤트 (DOMContentLoaded ...)
  5. CSS 이벤트 (transitionend, transitionstart ...)
• 이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 함수로 사용자의 행동에 어떻게 반응할지를 자바스크립트 코드로 표현한 것이다. 이벤트 핸들러를 등록하는 방법은 다음과 같다.
  
  1. HTML 속성 : HTML 안의 on{event} 속성에 핸들러를 할당한다.
     

     <button onclick="alert('클릭')">요소</button>

      
     
     • onclick="alert("클릭")" 처럼 속성 내부에 큰따옴표를 사용하면 동작하지 않는다.
     • 이벤트의 경우 코드가 길기 때문에 HTML 속성을 사용하는 방법은 추천하지 않는다.
  2. HTML과 JS 사용: JavaScript로 DOM 객체에 이벤트 속성을 할당한다.
     

     document.querySelector('button').onclick = function() {
     	alert('클릭');
     }

     
     
     • 하나의 이벤트에 하나의 이벤트 핸들러만을 바인딩할 수 있다.
     • 이벤트 핸들러를 제거하고 싶다면 null을 할당하면 된다.

       documnet.querySelector('button').onclick = null;

       
       
  3. addEventListener: HTML 속성과 DOM 프로퍼티를 이용한 이벤트 핸들러 할당 방식과 달리 하나의 이벤트에 복수의 이벤트 핸들러를 할당할 수 있다.

     document.querySelector('button').addEventListener('click', function() {
     	alert('클릭1')
         	alert('클릭2')
     })

     
     
     • 가장 일반적이고 권장되는 방법이다.
     • 사용 방법은 addEventListener(이벤트, 이벤트 핸들러, 옵션)이다. 옵션은 선택값
     • 이벤트 핸들러를 제거하고 싶다면 removeEventListener를 사용한다.