[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 19 문서 객체 모델(DOM) 다루기(1)

DAY 27

🔖 오늘 읽은 범위 :

📢2/10(화) 진도표 알림
▶️공부 내용: 19 문서 객체 모델(DOM) 다루기(1)
▶️쪽수: 632~643쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

문서 객체 모델

• DOM : document object model
• 자바스크립를 사용하는 이유 : 조건이나 동작에 맞게 웹 문서 전체 또는 일부분이 동적으로 반응하도록 만들기 위함.
• 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법.
• 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 객체로 정의함.

DOM 트리

• DOM 으로 어떻게 표현되는가?

• 문서 안의 요소들의 부모-자식 관계를 반영.

• 각 요소에서 사용한 내용과 속성도 자식으로 나타냄.

• 이러한 트리 구조를 ‘DOM 트리’ 라고 한다.

• 노드 : node; 트리에서 갈라져 나간 항목.

• 루트 노드 : root node; DOM 트리 시작 부분인 html 노드. 트리의 시작. 뿌리.

• 부모 노드 자식 노드, 부모 노드가 같은 형제 노드.

  💡

  HTML 코드 작성 할 때 들여쓰기를 잘해야 한다. 그래야 DOM 계층 구조를 파악하기 쉽다.

• DOM 구성 기본 원칙

  1. 모든 HTML 태그는 요소(element) 노드입니다.
  2. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드입니다.
  3. HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드입니다.
  4. 주석은 주석(comment) 노드입니다.

• 웹 문서를 해석 가능하게 DOM 트리 계층 구조를 만드는 것이 중요함.

DOM 요소에 접근하기

• getElement-* 함수 사용하기

  • CSS 선택자 사용해서 웹 요소 접근하기

      document.getElementById("id name")
      document.getElementsByClassName("class name")
      document.getElementsByTagName("tag name")

  • 반환 값이 2개 이상일 경우 HTMLCollection 객체 형태로 저장됨. 배열처럼 인덱스를 사용해 값을 사용 함.

• querySelector() 함수

    document.querySelector(선택자)

  • id, class, 타입 선택자 뿐만 아니라, 하위 선택자, 형제 선택자 등등 다양한 선택자를 모두 사용 가능.
  • id 선택자 지정할 때는 #기호를, class 선택자를 지정할 때 . 기호를 함께 사용함.
  • 선택자가 둘 이상 연결되어 있을 경우에는 그대로 사용하면 됨.
  • 클래스 선택자, 타입 선택자 사용할 경우 해당 되는 요소들 중 첫 번째 요소만 가져온다.

• querySelectorAll() 함수

  • 모든 요소를 가져온다.

  • id 선택자를 제외한 다른 선택자는 문서에서 여러 번 사용 될 수 있음.

  • 여러 요소를 가져올 때 사용한다. 배열처럼 인덱스를 사용해서 접근할 수 있다.

    document.querySelectorAll(선택자)

웹 요소의 내용을 가져오고 수정하기

• 웹 요소 내용 접근하기

    요소.innerText /* 웹 브라우저 창에 보이는 내용만 가져온다. */
    요소.innerHTML /* HTML 코드를 가져온다. */
    요소.textContent /* 접근한 요소의 내용을 코드에 있는 그대로 모두 가져온다. */
  
    let detail = document.querySelector("#detail > ul");
    console.log("detail.innerText: ", detail.innerText);
    console.log("detail.innerHTML: ",detail.innerHTML);
    console.log("detail.textContent: ", detail.textContent);

• 웹 요소 수정하기

  • 웹 요소 내용 접근할 때와 동일한 프로퍼티를 사용함.

  • 내용을 대입해주면 됨.

  • 이미지

      이미지요소.src = 파일 경로
    
      let heading = document.querySelector('#heading');
      let cup = document.querySelector('#cup');
      heading.onclick = () => heading.innerText = '추천! 오늘의 커피!!';
      cup.onclick = () => cup.src = 'images/coffee-blue.jpg';

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 문서를 객체로 접근하는 방식은 HTML이 구조적이기에 가능한 듯 하다.
• 요소 뿐만 아니라 속성까지 접근할 수 있는 건 강력한 장점.

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

• https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model
• https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-DOM-%EB%AC%B8%EB%B2%95-%F0%9F%92%AF-%EC%B4%9D%EC%A0%95%EB%A6%AC

---

🤟소감 3줄 요약

• 이 공부가 끝나면 블로그 작업을 한번 해보려한다.
• 날이 이제 좀 따뜻해지려나…