[Javascipt] DOM

DOM(Document Object Model)

HTML 문서를 객체로 표현한 것, JS에서 HTML을 제어할 수 있게 해줌

DOM API

Dom을 통해 사용할 수 있는 명령어 집합

---

Node VS Element

노드가 요소보다 좀 더 상위 개념

• 노드 : HTML 요소, 텍스트, 주석 등 모든 것을 의미
• 요소 : HTML 요소만을 의미

---

속성 / 메소드

• Document.QuerySelectorAll() : css 선택자로 검색한 모든 요소를 NodeList 형태로 반환 NodeList 객체(유사배열)는 forEach를 사용할 수 있음
• N.parentElement() : 노드의 부모 요소를 반환
• E.closest(‘css 선택자’) : 자신을 포함한 조상 요소 중 CSS 선택자와 일치하는 가장 가까운 요소를 반환
• N.previousSibling / N.nextSibiling : 노드의 이전 형제 혹은 다음 형제 노드를 반환
• E.previousElementSibiling / E.nextElementSibiling : 요소의 이전 형제 혹은 다음 형제 요소를 반환
• E.children : 요소의 모든 자식 요소를 반환 (HTMLCollection으로 반환(유사배열))
• E.firstElementChild / E.lastElementChild : 요소의 첫 번째 자식 혹은 마지막 자식 요소 반환
• Document.createElement() : 메모리에만 존재하는 새로운 HTML 요소를 생성해 반환
• E.prepend() / E.append() : 노드를 요소의 첫 번째 혹은 마지막 자식으로 삽입함
• E.remove() : 요소를 제거
• E.insertAdjacentElement() : 대상 요소의 위치에 새로운 요소를 삽입
  • Beforebegin
  • Afterbegin
  • Beforeend
  • Afterend

  대상요소.insertAdjacentElement(위치, 새로운 요소)
  
  <--beforebegin-->
  <div class="target">
  	<--afterbegin-->
  	content
  	<--beginend-->
  </div>
  <--afterend-->
  

• N.insertBefore() : 부모노드의 자식인 참조 노드의 이전 형제로 노드를 삽입 💡 부모노드.insertBefore(노드, 참조_노드)
• N.contains() : 주어진 노드가 노드의 자신을 포함한 후손인지 확인
• N.textContent : 노드의 모든 텍스트를 얻거나 변경
• E.innerHTML : 요소의 모든 HTML 내용을 하나의 문자로 얻거나, 새로운 HTML을 지정함
• E.dataset : 요소의 각 ‘data-’ 속성 값을 얻거나 지정
• E.tagName : 요소의 태그 이름을 반환
• E.id : 요소의 id 속성 값을 얻거나 지정
• E.className : 요소의 class 속성 값을 얻거나 지정 → 보통 속성 값을 얻을 때만 사용함
• E.classList : class 속성 값을 제어
  • .add() : 새로운 값을 추가
  • .remove(): 기존 값을 제거
  • .toggle() : 값을 토글
  • .contains() : 값을 확인
• E.style : 요소의 style 속성(인라인 스타일)의 css 속성 값을 얻거나 지정

Object.assign(el.style , { width : '100px', ... }) //Object.assign을 통해 한번에 지정할 수 있음

• window.getComputedStyle() : 요소에 적용된 스타일 객체를 반환
• E.getAttribute() / E.setAttribute() : 요소에서 특정 속성 값을 얻거나 지정
• E.hasAttribute() / E.removeAttribute() : 요소에서 특정 속성 값을 확인하거나 제거
• window.innerWidth / window.innerHeight : 현재 화면(Viewport)의 크기를 얻음
• window.scrollX / window.scrollY : 페이지의 좌상단 기준, 현재 화면의 수평 혹은 수직 스크롤 위치 얻음
• window.scrollTo() / E.scrollTo() : 지정된 좌표로 대상(화면, 스크롤 요소)을 스크롤

대상.scrollTo(x좌표, y좌표) 대상.scrollTo({top:Y, left:X, behavior : ‘smooth’}) //객체데이터도 제공가능

• E.clientWidth / E.clientHeight : 테두리 선(border)을 제외한 요소의 크기를 얻음 , 스크롤바 너비도 제외될 수 있음
• E.offsetWidth / E.offsetHeight : 테두리 선을 포함한 요소의 크기를 얻음
• E.scrollLeft / E.scrollTop : 스크롤 요소의 좌상단 기준, 현재 스크롤 요소의 수평 혹은 수직 스크롤 위치 얻음
• E.offsetLeft / E.offsetTop : 페이지 좌상단 기준, 요소의 위치 얻음
• E.getBoundingClientRect() : 테두리 선을 포함한 요소의 크기와 화면에서의 상대 위치 정보를 얻음