(js) DOM (Document Object Model) - 종류와 상세설명

01_dom_queryselector

1. DOM

• document.querySelector("css선택자").속성 = "값";
• Document Object Model == html 태그들을 말함
• documnet 객체 : html 문서에 대한 속성들을 가짐
• DOM 접근 함수 : querySelector() : 90% 사용
• css선택자 : 태그선택자, id선택자, class선택자, 전체선택자 등을 의미함
  -예) document.querySelector(".classH1").style.backgroundColor = "red";

// document.querySelector("css선택자").속성 = "값";
document.querySelector("h1").style.backgroundColor = "red";
document.querySelector("h2").style.backgroundColor = "yellow";

2. DOM 상세설명

• html 웹 문서 읽기 동작
  -1) 컴퓨터 웹브라우저에서 html 문서를 읽기
  -> 파싱 : html 사용법 해석
  2) 파싱된 문서 (html) -> 메모리에 트리구조로 저장
• 파싱된 문서(DOM) : 트리구조(자료구조)

// 예) html 현재 문서(03_dom.detail.html)
    //           window(최상위 부모객체: html문서, 주소창, 메뉴, 상태바등)
    //              |
    //           document(객체, html 문서)
    //              |
    //             html(태그, 부모)
    //              |
//   -------------------------------------
//   |                                    |
//  head(태그, 자식)                    body(태그)
//                                        |
//                    ----------------------------------------
//                    |                                      |
//   div(태그) - style="backgroundColor='aqua'"(속성)  script - src="./js/03_dom_detail.js"
//                    |
//              "안녕하세요"(텍스트, ==innerHTML속성)

• html 문서 주요 요소 (노드)
  1) 태그 : div
  2) 속성 : style 속성 등
  3) 텍스트 : "안녕하세요"
  4) 주석

3. innerHTML

• document.querySelector("css선택자").innerHTML = "문자열 (html태그)";
• DOM 접근함수 : 바닐라 JS (순수 JS 사용법)
• css 선택자로 선택한 태그 사이에 글자를 넣는 태그
  
• css선택자로 선택한 태그 사이에 글자를 넣는 속성

document.querySelector("#output").innerHTML = "hello world";

• 변수를 활용

let output = document.querySelector("#output");
output.innerHTML = "hello world";
// css 속성(js) : fontSize (낙타표기법: 카멜표기법)
output.style.fontSize = "50px";
output.style.textAlign = "center";

--> css 속성(js) - 낙타표기법: 카멜표기법

4. querySelectorAll

• querySelectorAll : DOM 태그를 여러개 선택하는 함수

// TODO: querySelectorAll() 예제
// TODO: 사용법
// TODO: DOM 태그를 여러개 선택하는 함수
let elements = document.querySelectorAll("ul li");
// TODO: 배열변수.length => 배열의 개수를 지정해준다
// 반복문 : for문
for(let i=0; i<elements.length; i++) {
    // 로그 출력 : 변수의 값 확인용
    console.log(elements);
    // TODO: li 태그들 (배열)
    elements[i].innerHTML = i + ": 목록";
    // 글자색 변경
    elements[i].style.color = "blue";
}

• 배열변수.length => 배열의 개수를 지정해준다