DOM & EVENT 정리

📄 DOM (Document Object Model, 문서객체모델)

• html 문서들을 트리형식으로 표현해줌
  
  

1. 노드에 접근하기 📂

• html에 접근
  document.documentElement

• body에 접근
  document.body

• style에 접근
  documetn.body.style

• id에 접근
  document.getElementById('')

• 모든 p 태그에 접근
  document.getElementsByTagName('')

• 개수
  .length

• pList는 for of로 순회 가능

<p태그의 폰트 사이즈를 30px>
 
for(p of pList) {
    p.style.fontSize = '30px';
}

<p태그의 투명도를 랜덤하게>

for(p of pList) {
    p.style.opacity =String(Math.random());
}

• getElementsBy를 이용해 클래스 네임이나, 네임으로도 노드에 접근 O

  • document.getElementsByClassName()
  • document.getElementsByName()

• 문서 객체 선택

  • document.querySelectorAll()
    : 모든 노드를 가져옴
  • document.querySelector()
    : 딱 하나, 제일 처음의 노드를 가져옴

• 두 번째 h3를 찾기
  document.querySelector('h3:nth-of-type(2)');

• 짝수 번째 p만 찾기
  const pList = document.querySelectorAll('p:nth-of-type(2n)')

---

2. 부모 자식 형제 노드 👪

• querySelectorAll과 getElementsByTagName의 차이

  • querySelectorAll
    • Nodelist
      : 한번 저장된 값을 바꾸지 않음
  • getElementsByTagName
    • HTMLCollection
      : 실시간 반영

• 부모노드 접근

  • red의 부모에 접근법
    • red.parentNode
      : 부모의 노드중 모든 노드 반환
    • red.parentElement
      : 부모 노드중에 요소(html태그로 이루어진 요소) 노드만 반환

• node type (자주 사용하는 것)

  • Node.ELEMENT_NODE (1)
    : An Element node like <p> or <div>.
  • Node.ATTRIBUTE_NODE (2)
    : An Attribute of an Element.
  • Node.TEXT_NODE (3)
    : The actual Text inside an Element or Attr.
  • Node.COMMENT_NODE (8)
    : A Comment node, such as <!-- … -->.
  • Node.DOCUMENT_NODE (9)
    : A Document node.

• 자식 노드 접근

  • .childNodes
    • Nodelist
      : HTMLCollection 같이 실시간 반영이 됨 예외
  • .children
    • HTMLCollection

• 형제 노드 접근

  • 형제노드

    • 이전 형제 노드
    • 다음 형제 노드

  • 형제 노드 중 모든 타입을 가져오기

    • 이전 형제 노드
      .previousElementSibling
    • 다음 형제 노드
      .nextSibling

  • 형제 노드 중 요소 노드만

    • 이전 형제 노드
      .previousElementSibling
    • 다음 형제 노드
      .nextElementSibling

---

3. 노드 생성, 추가, 복제, 삭제🪄

• 텍스트 노드의 정보

  • .nodeName

  • .nodeType

  • .nodeValue : 텍스트 노드만 이를 통해 텍스트 수정 가능

    • .textContent
      텍스트 노드가 아님에도 텍스트 수정이 가능
    • markup이 적용되지 않아 잘 사용하지 않음
      마크업을 제대로 표현하려면 .innerHTML 사용

• 요소 만들기
  document.createElement('li')

• 노드의 자식 만들기
  .appendChild()

• innerHTML 사용하지 않고 만들기

  • li 요소노드 만들기
    const newLi2 = document.createElement('li');
  • 텍스트 노드 만들기
    const newText = document.createTextNode('pink');
  • 텍스트 노드를 넣어주기
    newLi2.appendChild(newText);
  • ul에 li 넣기
    ul.appendChild(newLi2)

• 원하는 곳에 삽입하기
  .innerBefore(넣을 것, 어떤 거 앞에 넣을지)

• 복제

  • .cloneNode
    • (true)
      : 자식 노드까지 복제

• 삭제
  .removechild

• innerHtml vs innerText

  • innerHtml은 element의 HTML이나 XML을 가져옴
  • innerText는 element의 text만 가져옴

---

4. 클래스 제어 🔎

• .className (사용 잘 X)

  • .className = 'bg-red';

• 클래스 이름 반환
  .classList

• ClassList

  • domtokenlist 메소드 제공

• 클래스 추가
  .classlist.add()

  • 여러 개 추가하려면 , 로 구분

• 제거
  .classlist.remove

• 변환
  .classlist.replace( , )

• 특정 클래스를 넣었다 뺐다 하는 것. 해당 클래스가 있으면 제거하고 없으면 넣어줌

setInterval(()=> {
	box.classList.tolglle('bg-red');
}, 1000)

---

5. 이벤트 🎉

• 이벤트 헨들러 할당 방식

  <button onclick="alert('click')">클릭</button>
        <button onclick="sayHello()">클릭2</button>
        <button id="btn">클릭3</button>
        <button id="btn2">클릭4</button>
        
        function sayHello() {
                alert("Hello");
            }

            const el = document.getElementById("btn");
            el.onclick = sayHello;

            const el2 = document.getElementById("btn2");
            el2.addEventListener("click", sayHello);
 

• addEventListener()

  • dblclick
  • keyup
  • blur
  • focus
  • mousemove
  • resize (창의 크기를 알 수 있음)

• 이벤트 버블링

  • 자식요소에서 발생된 이벤트 객체는 부모와 그 부모를 통해 전파

  • 하위요소에서 상위요소로 더 이상 부모가 없을 때까지 이벤트가 거슬러 올라 감 (버블과 비슷)

  • 버블링이 안되는 것도 있음

    • focus
    • blur
    • mouseenter
    • mouseleave)

  • 버블링하게 하고 싶으면

    • focusin
    • focusout
    • mouseover
    • mouseout

• 이벤트 위임
  • 자신에게 발생하는 이벤트를 다른 요소에서 처리하는 것 (버블링 이용해 가능)
• event.target
  : 이벤트를 발생시키는 요소
• event.currenttarget
  : 이벤트 핸들러가 등록된 요소