DOM (Document Object Model)

• 페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델
• 역할: HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 이어줌
  JavaScript가 웹 페이지에 접근하고, 페이지 수정하는 것을 가능하게 함

document (전역객체)

• JavaScript의 document 객체: DOM 구조를 접근하는 관문. HTML 문서를 나타낸다고 할 수 있음.

  js가 html에 접근할 때 사용

• DOM트리의 root node에 접근하게 해줌

요소(element) / 요소의 속성(attribute) / 요소의 내용(content) 에 접근 가능

• class, id 추가 & style 수정 가능
• 내용(content) : innerHTML으로 접근 / 수정

            // 1.
            document.body.innerHTML = '바꿀 값';

            // 2. 
            let blueElement = document.querySelector('.blue');
            blueElement.style.backgroundColor = 'blue';

            // 3.
            createElement(tagName)

            //4.
            const 변수명 = document.getElementsByClassName('클래스명')[0];

• 1. body태그 내부 모든 요소를 '바꿀 값'으로 전부 교체
     - 내용을 전부 대체 시켰다면 appendChild함수는 요소의 뒤쪽에 붙여줌

• 2. 특정 element 접근 (css selector (class, id, tag 등)로 가능)
     - JavaScript에서 style 수정할 때

     hypen(-) 사용불가

     camelCase 사용

• 3. element 생성
  • 아직 HTML의 어디에 들어가야 할지 지정해준 것 아님
    - 생성 후 어딘 가의 element에 append시켜줘야 함.
• 4. class로 요소 찾는 함수와 index

  • .getElementsByClassName('클래스명')

    '클래스명'이 클래스이름인 요소를 찾음

  • [index]

    앞의 함수가 요소들을 찾으면 배열로 반환 → 원하는 위치의 index 찾음

• 주의

  • 함수가 찾은 요소 1개→ 요소로 return

    함수가 찾은 요소들→ 배열로 return