[JS] DOM

DOM

--> javascript 가 HTML에 접근하도록 도와주는 것

특징

• HTML 문서를 객체로 표현한 것
• DOM API (Application Programming Interface)
  --> DOM 에서 사용할 수 있는 여러가지 명령어 (함수)
  • DOM을 통해 웹페이지를 조작하려면 순서에 맞게 API를 사용해야함
    1) 조작하고자 하는 요소를 선택
    2) 선택된 요소의 콘텐츠를 조작

---

Node 와 Element

• Node : HTML 요소, 텍스트, 주석 등 모든 것을 의미
• Element : HTML 요소 (node의 하위개념)

---

검색 ( 특정 속성값이나 태그 이름으로 요소 찾기 )

• document.getElementById() : id 속성으로 검색
• document.getElementByTagName() : tag명으로 검색
• document.querySelector() : css 선택자 중 첫번째 요소를 반환 ( 주로 사용 ! )
• document.querySelectorAll() : css 선택자로 검색한 모든 요소

---

탐색 ( 요소의 관계를 활용하여 요소를 찾거나 이동 )

• N.parentElement : 노드의 부모요소를 반환

• E.closest() : 자신을 포함한 조사 요소 중 'css선택자' 와 일치하는 가장 가까운 요소를 반환

• N.previousSibling / N.nextSibling : 노드의 이전 or 다음 형제 노드를 반환

• E.previousElementSibling / E.nextElementSibling : 요소의 이전 or 다음 형제 요소를 반환

• E.children : 요소의 모든 자식을 반환

• E.firstElementChild / E.lastElementChild : 요소의 첫 번째 or 마지막 자식 요소를 반환

---

생성

• document.createElement() : 메모리에만 존재하는 새로운 HTML 요소를 생성하고 반환

---

조회

• E.tagName : 요소의 태그이름을 반환
• E.id : 요소의 ID 속성값을 얻거나 지정
• E.className : 요소의 클래스 속성값을 얻거나 지정
• E.clssList : 요소의 클래스 속성값을 제어
• E.getAttribute("속성명") : 지정된 속성의 값을 반환

---

수정

• E.prepend(), E.append() : 요소의 자식으로 노드를 추가

• E.remove() : 요소를 제거

• N.insertBefore(추가할 노드, 참조할 노드) : 부모 노드의 자식인 참조 노드의 이전 형제로 노드를 추가

• E.textContent : 요소의 모든 텍스트를 얻거나 변경

• E.innerHTML : 요소의 HTML 내용을 가져오거나 변경

• E.dataset : data 속성값을 얻거나 지정

• E.style : 요소의 CSS 속성값을 얻거나 지정

• window.getComputedStyle() : 요소에 적용된 스타일 객체를 반환

• E.hasAttribute("속성명"): 요소가 지정된 속성을 가지고 있는지 확인

• E.setAttribute("속성명", "값") : 요소의 속성값을 설정

• E.removeAttribute("속성명") : 요소의 속성을 제거

• E.InsertAdjacentElement() : 대상 요소의 지정한 위치에 새로운 요소를 삽입
  • insertAdjacentElement(위치, 새로운 요소)

    • 위치에는 beforebegin, beforeend, afterbegin, afterend 가 있음 !

      <!-- beforebegin --> 
      
      <div class="target">
      	<!-- afterbegin -->
        내용
        <! -- beforeend -->
      </div>
      <!-- afterend -->