DOM 문서 객체 모델

💡 DOM(Document Object Model 문서 객체 모델)

🔖 HTML 문서(document)의 구성 요소(Object)를 알아내고 사용할 수 있다. 태그를 객체(Object)로 저장해 두는 것이 DOM의 개념!
🔖 JavaScript를 사용할 줄 안다면, DOM을 통해 HTML 조작 -> 문서 구조, 스타일, 내용 등의 변경이 가넝해짐!
🔖 웹 페이지의 객체 지향 표현

• 문서 객체(document) : HTML문서의 구성 요소를 의미
  - 기본적으로 document.createElement('') 메소드로 태그 생성이 가능하다.
  - document.body.append()를 통해 특정 태그 안으로 ()의 태그를 넣기도 가능하다.

  1. document.getElementById('아이디')　　　　　　 　　 : 변수
     -> id 속성을 이용해서 하나의 데이터만 가져온다.
  2. document.getElementsByClassName('클래스')　　　 　: 배열
     -> class 속성을 이용해서 여러 개의 데이터를 가져온다.
  3. document.getElementsByTagName('태그') 　　　　　　: 배열
     -> tag를 이용해 여러 개의 데이터를 가져온다.
  4. document.querySelector('선택자')　　　　　　　　　　: 변수
     -> 선택자로 변수인 데이터를 가져온다. 혹여 여러 개를 가져와도 1번째거 하나만 사용한다.
  5. document.querySelectorAll('선택자') 　　　　　　　　 : 배열
     -> 선택자로 배열인 데이터(여러 개)를 가져온다.
  
  

• 문서 객체 속성 : HTML 구성요소의 속성(Attribute)을 의미
  1. 객체.속성 　　->> 이 방식으로 호출!
  2. 주요 속성
     2-1. textContent : 태그 내부에 텍스트 추가
     2-2. innerHTML　: 하위에 태그 자체를 추가
     2-3. style　　　　: css 추가
  3. 조작 방법
     3-1. 속성을 직접 조작
     3-2. getAttribute(), setAttribute() 메소드 활용
     -> getAttribute('속성이름') : 속성 값 알아내기
     ->setAttribute('속성', '값') : 속성 값 변경하기

• DOM 관점에서의 속성
  property (prop 관점에서는 클래스이름이 className <-> attr 관점에서는 class)

  <div class="primary" id="area">텍스트</div>
   <script>
       document.getElementById('area').className = 'boom';
       // JS로 속성들을 저장시킨 후에는 더이상 attr(attribute)이 아닌 prop(property)이다.
  
       document.getElementById('area').setAttribute('class', 'baam');
        // class 이름 변경 가능 -> html의 관점(attribute)에서 class와 js관점(property)에서 className은 같다는 것을 확인 가능!
  
   </script>

  -> 속성 이름을 그대로 가져다 쓰는 경우네는 getAttribute를 쓰는 것이 안전합니다용

📢 참고 https://m.blog.naver.com/ares132/222925542918