문서 개체 모델(DOM)

DOM 소개

웹 페이지가 로드되면 브라우저는 페이지의 DOM(문서 객체 모델)을 생성합니다. 이는 HTML 문서의 트리 표현이며 DOM 트리는 JavaScript로 수정됩니다.

<table>
  <row>
    <tr>
      <td>......</td>
    </tr>
    <tr>
      <td>.....</td>
      <td>.....</td>
   </tr>
  </row>

</table>

자바스크립트와 DOM

JavaScript는 새로운 HTML 요소와 속성을 추가할 수 있습니다.

JavaScript는 페이지의 모든 CSS 스타일을 변경할 수 있습니다.

JavaScript는 onScroll hover onclick 등과 같은 HTML 이벤트를 추가하고 수신할 수 있습니다.

JavaScript는 페이지의 모든 HTML 요소와 속성을 변경할 수 있습니다.

JavaScript는 기존 HTML 요소와 속성을 제거할 수 있습니다.

이제 HTML 문서에 JavaScript를 추가하는 방법

<script> 
  console.log('active');
</script>

콘솔을 확인하면 활성화되어 있다는 메시지가 표시됩니다.

HTML 문서 선택
자바스크립트로 HTML을 선택했을 때이며, DOM 방식을 제공합니다.

    getElementById('targeted-html-doc');

getElementById는 HTML 요소 ID를 받아들이고 해당 ID와 일치하는 HTML 요소를 반환하는 DOM 메서드입니다.
예시:

   document.getElementById('#navBar');

요소의 ID를 인수로 전달해야 합니다. Id와 일치하는 요소가 없으면 null을 반환합니다.

쿼리 선택기
쿼리 선택기를 사용하면 CSS 선택기를 사용하여 HTML 요소를 선택할 수 있습니다. 요소를 선택하는 JavaScript의 새로운 방법입니다. 두 가지 유형의 쿼리 선택기가 있습니다.

      querySelector();
      querySelectorAll();

쿼리 선택기는 DOM 메서드입니다. CSS 선택자 문자열을 허용하고 쿼리와 일치하는 첫 번째 HTML 요소만 반환합니다.
예시;

    document.querySelector('#footer span');

CSS를 통과해야 합니다. 선택자 문자열을 인수로, 선택자 문자열과 일치하는 요소가 없으면 null을 반환합니다.

동안
querySelectorall은 CSS 선택자 문자열을 받아들이고 쿼리와 일치하는 모든 HTML 요소를 반환하는 DOM 메서드입니다.
예시;

    document.querySelectorAll('#footer span');

CSS 선택자 문자열을 인수로 전달해야 합니다. 일치하는 요소가 없으면 빈 배열을 반환합니다.