260912_JS_ch19 (끝)

• DOM : document object model : JS를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
  - 웹 문서 하나를 객체로 정함 → document 객체
  - 웹 문서를 이루는 모든 요소도 객체로 정의함 → image 객체
• DOM tree : DOM은 parent-child node로 구분함
  - 각 요소에서 사용한 내용과 속성도 자식으로 나타냄
  - ex. src, alt 속성은 img 요소의 자식이 됨

DOM 요소에 접근하고 내용 수정하기

• document.getElement* : DOM 요소에 접근
  - document.getElementByClassName("class명")
• document.querySeletor(선택자) : id, class, 타입 선택자, 하위, 형제 선택자 등 다양한 선택자 모두 사용 가능
• document.querySelectorAll(선택자) : 해당 선택자에 대한 모든 요소 가져옴
• 요소.innerText | innerHTML | textContent : 텍스트가ㅏ 있는 웹 요소의 텍스트 내용 가져오거나 수정 가능
  - innerText : 웹 브라우저 창에 보이는 내용만 가져옴
  - innerHTML : html 코드 그대로 다 가져옴
  - textContent : 코드에 있는대로 가져옴
  

DOM에서 이벤트 처리하기

• cat.onclick = () => alert('이미지 클릭함'); → 이벤트 함수 간단하면 이벤트 이름 앞에 on 붚여서 함수 작성할 수 있음
• event 객체 : 이벤트 정보 저장함. 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트인지 등의 정보 있음
  - event 객체의 peoperty와 method 를 통해 정보 알 수 있음
  - 이벤트가 발생한 대상에 접근하려면 예약어 this 사용해야 함 (화살표 함수에서는 사용할 수 없음)
• 요소.addEventLister(이벤트 유형, 이벤트 발생하면 실행할 함수, 캡쳐여부);
  - 함수 정의할 때는 event 객체를 인수로 받음
  - 하나의 이벤트에 함수 여러개 추가 가능
• document.요소명.style.속성명 : CSS 속성에 접근하여 수정 가능
  - cat.style.backgroundColor = "white";

cat.addEventListener("mouseover", () => {
  cat.style.backgroundColor = "lightgreen";
  cat.style.borderRadius = "50%";
  cat.src = "images/kitty-2.png";
}, false);

DOM에서 노드 추가 + 삭제

• 노드 리스트 : 노드 정보 여러개 저장한 것
• 새로운 노드 만들어서 추가하거나 삭제하려면 node list 사용해야 함
• 텍스트 노드 추가하기
  - 요소 노드 만들기 : document.createElement(요소명)
  - 텍스트 노드 만들기 : document.createText(내용)
  - 자식 노드를 부모 노드에 연결하기 : 부모노드.appendChild(자식노드)
• 속성값 있는 요소에 속성 추가하기
  - 요소 노드 만들기 : let new_img = document.createElement("img");
  - 속성 추가하기 : new_img.src = "images/~.png"
  - 자식 노드를 부모 노드에 연결하기 : document.body.appendChild(new_img)
• 노드 삭제하기 : 노드.remove()

<script>
  const li_parent = document.querySelector("#itemList");
  function register() {
    let newItem = document.createElement("li");
    let subject = document.querySelector("#subject");
    let inputText = document.createTextNode(subject.value);

    newItem.appendChild(inputText);

    li_parent.appendChild(newItem);

    subject.value = "";
  }

  document.addEventListener("DOMContentLoaded", function() {
    const button = document.querySelector("button");
    button.addEventListener("click", function(event) {
      event.preventDefault();
      register();
    });
  });

  li_parent.addEventListener("click", (event) => {
    if (event.target.tagName === "LI") {
      if (confirm("삭제하시겠습니까?")) {
        event.target.remove();
      }
    }
  });
</script>

class 속성 추가 + 삭제

• 웹 요소 객체의 classList 프로퍼티 : 해당 요소에 있는 class 속성 다룰 대 사용
• 추가 : 요소.classList.add(클래스명)
• 삭제 : 요소.classList.remove(클래스명)
• 그외 classList 에서 사용하는 함수
  - toggle : 지정한 클래스가 있으면 classList에서 제거, 없으면 추가
  - contains : 지정한 클래스가 classList에 있는지 확인

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const checkbox = document.querySelector('#agree');
    const go_button = document.querySelector('#proceed');

    checkbox.addEventListener('change', function() {
      if (this.checked) {
        go_button.classList.remove('disabled');
        go_button.classList.add('enabled');
        go_button.disabled = false;
      } else {
        go_button.classList.add('disabled');
        go_button.classList.remove('enabled');
        go_button.disabled = true;
      }
    });
  })
</script>