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

DAY 28

🔖 오늘 읽은 범위 :

📢2/11(수) 진도표 알림
▶️공부 내용: 19 문서 객체 모델(DOM) 다루기(2)
▶️쪽수: 644~669쪽

---

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

• DOM 에 이벤트 처리기를 연결하면 HTML 태그와 스크립트 코드를 분리할 수 있음.
• 복잡한 프로그램을 관리하기 편해짐.

DOM 요소에 함수 연결하기

• 간단한 이벤트 처리 함수 연결하기

    // 이미지 클릭 시 실행 함수 작성하기.
    let cat = document.querySelector('#cat');
    cat.onclick = () => alert('이미지 클릭!!');
  
    //------------------------------------------
  
    // 이미지 클릭 시 실행 함수 이름 지정하기.
    let cat = document.querySelector('#cat');
    cat.onclick = changePic;
  
    function changePic() {
      cat.src = 'images/kitty-2.png';
    }

DOM event 객체 알아보기

• event 객체 : 이벤트 정보를 저장한 객체.

• 웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어 있음.

    let container = document.querySelector(".container");
    container.onclick = (event) => {
        alert(`event occurred: ${event.pageX}, ${event.pageY}`);
    }

• event 객체 주요 프로퍼티 및 메서드

  프로퍼티	설명
  altKey	이벤트가 발생할 때 Alt 를 눌렀는지 여부를 불린 값으로 반환한다.
  button	마우스에서 누른 버튼의 키 값을 반환한다.
  charCode	keypress 이벤트 발생 시 어떤 키를 눌렀는지 유니코드 값으로 반환.
  clientX	이벤트가 발생한 가로 위치 반환.
  clientY	이벤트가 발생한 세로 위치 반환.
  ctrlKey	이벤트 발생 시, ctrl 을 눌렀는지 여부를 불린 값으로 반환.
  pageX	현재 문서 기준으로 이벤트가 발생한 가로 위치 반환.
  pageY	현재 문서 기준으로 이벤트가 발생한 세로 위치 반환.
  screenX	현재 화면 기준으로 이벤트가 발생한 가로 위치 반환.
  screenY	현재 화면 기준으로 이벤트가 발생한 세로 위치 반환.
  shiftKey	이벤트 발생 사, shift 눌렀는지 여부를 불린 값으로 반환.
  target	이벤트가 최초 발생한 대상을 반환한다.
  timeStamp	이벤트가 발생한 시간을 반환한다.
  type	발생한 이벤트 이름을 반환한다.
  which	키보드와 관련된 이벤트가 발생할 때 키의 유니코드 값을 반환한다.
  메서드	설명
  preventDefault()	이벤트를 취소할 수 있는 경우에 취소한다.

• event 객체에는 이벤트 정보만 들어 있음.

• 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this 를 사용해야 한다.

• 단, this 예약어는 화살표 함수에서 사용할 수 없다.

    let cat = document.querySelector('#cat');
    cat.onclick = function(event) {
      alert(`Image file: ${this.src}`);
    }

addEventListener() 함수 사용하기

• 태그 안에 이벤트 처리기를 연결하거나, DOM 요소에 함수를 직접 연결하는 방식은 유지 보수가 어려움.

• 이벤트 리스너 : 이벤트 발생할 때 함수와 연결 지어줌.

    // 기본형태
    요소.addEventListener(이벤트, 함수, 캡쳐 여부);
  
    // 함수 선언해서 처리하기.
    let cat = document.querySelector("#cat");
    cat.addEventListener("mouseover", changePic, false);
    cat.addEventListener("mouseout", originPic, false);
  
    function changePic() {
      cat.src = "images/kitty-2.png";
    }
  
    function originPic() {
      cat.src = "images/kitty-1.png";
    }
  
    // 화살표 함수로 표현하기.
    let cat = document.querySelector("#cat");
    cat.addEventListener("mouseover", () => {
      cat.src = "images/kitty-2.png";
    });
    cat.addEventListener("mouseout", () => {
      cat.src = "images/kitty-1.png";
    });

  • 캡쳐 여부 : 이벤트를 캡쳐 하는 지 여부. true 이면 캡처링, false 이면 버블링한다. 기본값 : false. 생략 가능.

CSS 속성 접근하기

• 스타일 속성 값 변경 및 효과 적용함.
• 속성 이름에 따른 접근법
  • 한 단어인 경우 : 그대로 사용.
  • • 로 연결되는 경우 : 카멜케이스처럼 사용. ex) background-color ⇒ backgroundColor

// 기본형
document.요소명.style.속성명

// 예제
let rect = document.querySelector("#rect");
rect.addEventListener("mouseover", () => {
    rect.style.backgroundColor = "green";
    rect.style.borderRadius = "50%";
});
rect.addEventListener("mouseout", () => {
    rect.style.backgroundColor = "";
    rect.style.borderRadius = "";
});

DOM 노드 추가 및 삭제하기

• 내용이 보이지 않다가 클릭이나 이벤트가 발생하면 나타나는 경우
  • CSS display 속성을 사용해서 만들거나,
  • DOM 트리에 새로운 노드를 추가하거나.
• 노드 추가 시, 요소 노드 뿐만 아니라 텍스트와 속성 노드도 함께 추가해야 한다는 점에 주의해야 함.

노드 리스트

• 노드를 여러 개 저장한 데이터 형태. DOM 노드 리스트.

• 노드 리스트는 배열과 비슷함. 인덱스 번호로 특정 위치의 노드에 접근함.

    document.querySelectorAll("li")
    > NodeList(3)[li, li, li]

내용이 있는 텍스트 노드 추가

• 텍스트 노드와 요소 노드를 새로 만들어 연결. → 원하는 위치에 추가.
  1. createElement() → 요소 노드 만들기
  2. createTextNode() → 텍스트 노드 만들기
  3. appendChild() → 자식 노드 연결하기.
     1. 요소 노드의 자식 노드로 텍스트 노드 연결한다.
  4. 생성한 요소 노드는 추가할 위치의 요소의 자식 노드로 추가한다.

속성값이 있는 요소 새로 추가하기

• 이미지를 추가한다면, img 태그 뿐만 아니라 그 안에 src 속성도 넣어야 한다.

  1. createElement() → 요소 노드 만들기

      let newImg = document.createElement("img")

  2. 속성 추가하기

      newImg.src = "images/books.png"

  3. appendChild() → 자식 노드 연결하기

      document.body.appendChild(newImg)

노드 삭제하기

• DOM 트리에서 특정 노드를 삭제하기.

    // 기본형
    노드.remove()
  
    // 예제
    let heading = document.querySelector('h1')
    heading.remove()

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

• DOM 이벤트 연결, DOM 요소 추가 및 삭제와 변경하기.
• DOM 을 이용하면 로직에 따른 처리가 잘 될 듯.

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

• 이벤트 캡쳐링, 버블링
  • https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%BA%A1%EC%B3%90%EB%A7%81

---

🤟소감 3줄 요약

• 덜 춥기 시작했다.
• 퇴근 후 저녁마다 하는 공부~
• 이제 얼마 안 남았지~