Interacting with Webpages

DOM

• Document Object Model
• cross-platform and language-independent interface
• XML 또는 HTML 문서를 트리 구조로 다루는(표현하는)
• HTML은 초기 설계도 역할
  DOM은 브라우저가 HTML을 바탕으로 만든 화면에 접근할 수 있는 인터페이스
  (TV와 교류하기 위한 리모콘과 같은 역할)

Selecting Elements

화면 속 요소를 선택하는 방법에는 크게 아래와 같이 4가지가 있습니다.

1. 아이디 이름을 이용하여 선택하는 방법

   // special-button 아이디를 가진 요소를 선택하여 `$el` 변수에 대입
   const $el = document.getElementById("special-button");
   
   // special-button 아이디를 가진 요소의 텍스트 변경
   $el.textContent = "I am a Special Button";

• 아이디(고유한 값)을 이용하여 선택한 경우, 하나의 요소(Node 혹은 HTML Element)를 얻음

Node vs. HTML Element
https://velog.io/@jplendor/Node-vs.-Element

2. 클래스 이름을 이용하여 선택하는 방법

   // item 클래스를 가진 "모든 요소들"을 선택하여 `$listItems` 변수에 대입
   const $listItems = document.getElementsByClassName("item");
   
   // container 클래스를 가진 "모든 요소들"을 선택하여 `$container` 변수에 대입
   const $container = document.getElementsByClassName("container");
   
   // getElementsByClassName의 결과값은 배열과 유사한 형태이므로 인덱스로 접근하여 사용한다.
   $listItems[0].textContent = "List 1";
   $listItems[1].textContent = "List 2";
   $listItems[2].textContent = "List 3";
   
   // HTML 상에서 해당 클래스를 가진 요소가 단 하나 뿐이더라도,
   // getElementsByClassName의 결과값은 배열과 유사한 형태이므로 인덱스로 접근하여 사용한다.
   $container[0].style.backgroundColor = "green";

• 클래스를 이용하여 선택한 경우, 여러 요소가 담긴 유사 배열을 얻음
• 유사 배열에 담긴 요소들이 하나의 HTML Element

3. 태그 이름을 이용하여 선택하는 방법

   // li 태그를 이용한 "모든 요소들"을 선택하여 `$listItems` 변수에 대입
   const $listItems = document.getElementsByTagName("li");
   
   // p 태그를 이용한 "모든 요소들"을 선택하여 `$paragraphs` 변수에 대입
   const $paragraphs = document.getElementsByTagName("p");
   
   // getElementsByTagName의 결과값은 배열과 유사한 형태이므로 인덱스로 접근하여 사용한다.
   $listItems[0].textContent = "List 1";
   $listItems[1].textContent = "List 2";
   $listItems[2].textContent = "List 3";
   
   // 위치와 상관없이 모든 p 태그를 선택하게 되므로 $paragraphs에는 총 4개의 요소가 선택되고,
   // 그 중 첫번째 요소의 배경 색깔을 수정합니다.
   $paragraphs[0].style.backgroundColor = "green";

• 태그 이름를 이용하여 선택한 경우, 여러 요소가 담긴 유사 배열을 얻음
• 유사 배열에 담긴 요소들이 하나의 HTML Element

4. CSS 선택자를 이용하여 선택하는 방법

   // CSS 선택자 문법을 이용하여 container라는 클래스 이름을 가진 요소를 선택합니다.
   // querySelector라는 함수는 모든 경우에 "하나의 요소"를 반환합니다.
   const $container = document.querySelector(".container");
   
   const $button = document.querySelector("#special-button");
   
   // 주어진 CSS 선택자와 일치하는 요소가 여러 개일 경우,
   // querySelector 함수는 가장 첫번째 요소를 반환합니다.
   const $listItem = document.querySelector(".item");
   
   // querySelectorAll 함수는 주어진 CSS 선택자와 일치하는 "모든 요소들"을 유사 배열의 형태로 반환합니다.
   // (요소를 제어하고 싶다면 인덱스 위치를 사용해야 합니다.)
   const $paragraphs = document.querySelectorAll("p");

• 가장 많이 사용되는 방법

Manipulating Elements

• 필요한 작업에 따라 검색해서 하기
• 자주 사용할만한 속성/메서드
  • Element.children - 자식 요소 가져오기
  • Element.classList - 요소의 클래스 정보
  • Element.innerHTML - 요소의 HTML, XML
  • Element.innerText - 요소의 사용자에게 보여지는 텍스트 값
  • node.textContent - <script>나 <style>과 상관없이
    해상 노드가 가지고 있는 텍스트 값 그대로
  • Element.style - 요소의 CSS 스타일
  • Element.remove - 요소 삭제하기
  • Element.appendChild - 자식 요소 추가하기

Creating Elements

// h1 요소 만들어서 `heading`이라는 변수에 할당
const heading = document.createElement("h1");

// 방금 생성한 `heading` 요소의 텍스트 설정
heading.textContent = "제목입니당";
// 방금 생성한 `heading` 요소의 스타일 설정
heading.style.fontSize = "50px";

// 방금 생성한 `heading` 요소를 body 태그의 자식으로 추가
document.body.appendChild(heading);

Events