DOM & EVENT 정리

SERI·2022년 5월 17일
0

📄 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. 부모 자식 형제 노드 👪

  • querySelectorAllgetElementsByTagName의 차이

    • 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
    : 이벤트 핸들러가 등록된 요소
profile
절망의 계곡을 탈출하자

0개의 댓글