JavaScript 문서 객체 모델 요소 찾기

    2018-04-25 11:58:48 작성

    HTML 요소 찾기

    • ID로 HTML 요소 찾기

      document.getElementById() 메서드를 이용해 id를 찾는것입니다.

    • tag 이름으로 요소 찾기

      getElementsByTagName() 메서드를 이용해 지정된 tag명으로 된 모든 요소를 찾습니다.
      HTMLCollection 객체를 반환합니다.

    • class 이름으로 요소 찾기

      getElementsByClassName() 메서드를 이용해 지정된 class명으로 된 모든 요소를 찾습니다.
      HTMLCollection 객체를 반환합니다.

    • CSS 선택자로 요소 찾기

      • querySelector() 메소드는 쿼리패턴에 일치하는 첫번째 요소를 반환합니다.
      • querySelectorAll() 메소드는 쿼리패턴에 일치하는 모든 요소를 반환합니다.
        NodeList 객체를 반환합니다.

    • HTMLCollection과 NodeList의 차이점

      두 객체의 공통점은 모두 배열과 비슷하지만 배열이 아닙니다
      두 객체 모두 항목의 수를 정의하는 length 속성을 가지고 있습니다.
      둘 다 배열과 같이 각 항목을 접근하기 위한 인덱스를 제공합니다.

      HTMLCollection의 항목은 name, id 속성으로도 접근이 가능하지만,
      NodeList의 항목은 인덱스 번호로만 접근이 가능합니다.
      NodeList객체에만 Text Node가 포함될 수 있습니다.(XML의 경우 Attribute Node도 포함될 수 있습니다.)

      valueOf(), pop(), push(), join()과 같은 배열 메서드는 사용할 수 없습니다.

    • 특별한 HTMLCollection 객체를 사용해 요소 찾기

      문서가 마들어질때 특별한 HTMLCollection 객체들을 만들어 둡니다.
      이들 객체는 항상 사용 가능하며, 현제 문서 콘텐츠가 바뀔 때마다 업데이트 됩니다.

      속성 설명
      document.forms <form> 요소를 모두 가져옵니다.
      document.images <img> 요소를 모두 가져옵니다.
      document.anchors name 속성이 있는 <a> 요소를 모두 가져옵니다.
      document.links <a> 요소를 모두 가져옵니다.
      document.embeds <embed> 요소를 모두 가져옵니다.
      document.scripts <script> 요소를 모두 가져옵니다.
      document.documentElement <html> 요소입니다
      document.head <head> 요소입니다.
      document.title <title> 요소입니다.
      document.body <body> 요소입니다