[JavaScript] Ch09. DOM

DOM(Document Object Model)

• DOM이란, HTML 문서를 객체로 표현한 것으로, JS에서 HTML을 제어할 수 있게 해준다.

DOM API

• api는 단순하게, 사용할 수 있는 명령들.

Node vs Element

• 노드(Node) : HTMl 요소, 텍스트, 주석 등 모든 것을 의미
• 요소(Element) : HTML 요소를 의미
  노드라는 것은 html 요소도 포함하고 있으므로 요소라는 것은 노드의 하위개념이다.

--> 요소라고 지칭하는 것은, 꺽새괄호가 열리고 , tag에 이름이 작성이 되어 있으면서, 열리고 닫히는 기본적인 구조이다.
주석이 작성되어 있는 부분도 요소라고 부르지 않는다.

console.dir()

--> 하나의 객체데이터처럼 출력이 된다. div형식이 아닌.

하나의 요소는 하나의 노드이고, 그 노드에서 상속된, 파생된 객체이다

• 속성과 메소드들이 어떤 것은 노드라는 개념에서 실행이 되고 어떤 것은 요소라는 개념에서 실행이 된다.
  요소라는 개념에서 실행되는 것은 텍스트나, 주석에서는 동작이 되지는 않지만 노드라는 개념에서 실행되는
  속성이나 메소드는, 요소에서도 그래도 쓸 수 있다는 것이다.

검색과 탐색

js를 통해서 html을 검색하고 탐색해보자

document.getElementById()

• HTML 'id' 속성 값으로 검색한 요소를 반환
• 여러 요소가 검색되면, 가장 먼처 찾은 요소만 반환
• 검색결과가 없으면, 'null' 을 반환

document.querySelector()

• 'css 선택자'로 검색한 요소를 하나 반환
• 여러 요소가 검색되면, 가장 먼저 찾은 요소 반환
• 검색 결과 없으면, 'null'을 반환
• 단 하나의 요소만 찾는 것이고, 선택자를 통해서 여러 개의 요소가 검색 되더라도 가장 먼저 찾은 요소를 반환한다.

document.querySelectorAll()

• 'CSS 선택자'로 검색한 모든 요소를 'NodeList'개념으로 반환

• 'NodeList' 객체는 '.forEach()'를 사용할 수 있다.
  .forEach(): 배열에서 사용법과 같음

• 유사배열같은 nodeList는, forEach메서드는 사용할 수 있지만, 다른 배열데이터에서 쓸수 있는 다양항 메소드들은 사용할 수 없다. 만약 유사배열에서 다른 메소드를 사용하고 싶다면,

console.log(Array.from(nodeList).reverse())

Array 클래스에서 from 이라는 정적 메소드를 통해서 유사배열을 실제 배열로 바꿔서 실제 배열에서 사용할 수 있는 메소드를 연결해서 사용하면 된다.

N.parentElement

• 노드에서 사용할 수 있음
• 노드라는 것은 요소의 상위개념이기 때문에 요소에서도 사용 가능
• 노드의 부모 요소를 반환

E.closest()

• 요소 자신을 포함한 조상 요소 중 'css선택자'와 일치하는, 가장 가까운 요소를 반환
• 요소를 찾지 못 하면, null 반환

// child라는 클래스를 가진 요소를 찾는다
const el = document.querySelector('.child')

console.log(el.closest('div'))

// 기본적으로 html의 구조는 body 태그의 후손 요소가 될 수 있기 때문에, 
console.log(el.closest('body'))
console.log(el.closest('.hello'))

N.previousSibling(이전) / N.nextSibling(다음)

Sibling: 형제

• 노드의 이전 형제 혹은 다음 형제 노드를 반환

const el = document.querySelector('.child')
console.log(el.previousSibling)
console.log(el.nextSibling)

E.previousElementSibling(이전) / E.nextElemtSibling(다음)

• Elment에서 사용
• 요소의 이전 형제 혹은 다음 형제 요소를 반환

const el = document.querySelector('.child')
console.log(el.previousElementSibling)
console.log(el.nextElementSibling)

E.children()

• 요소의 모든 자식 요소를 반환

E.firstElementChild / E.lastElementChild

• 요소의 첫 번째 자식 혹은 마지막 자식 요소를 반환

생성 조회 수정1

• 돔을 생성, 조회, 수정할 수 있는 다양한 속성과 메소드를 살펴보자

document.createElement()

• 메모리에만 존재하는 새로운 HTML 요소를 생성해 반환한다.
• createElement메소드를 사용하게되면 메모리 상에만 html 요소를 생성해서 그것을 js로 제어할 수 있으며, 뒤쪽에서 배우는 메서드를 통해서 html 구조에 삽입을 할 수 있다.

E.prepend() / E.append()

• 노드를 요소의 첫 번째 혹은 마지막 자식으로 삽입
• 요소에서 사용하는 메소드. 요소의 각각의 인수로 노드(요소, 텍스트, 주석)를 삽입.

E.remove()

• 대상 요소 제거

E.insertAdjacentElement()

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

N.insertBefore()

• '부모 노드'의 자식인 '참조 노드'의 이전 형제로 '노드'를 삽입
• 부모노드.insertDefore(노드, 참조노드)

N.contains()

• '주어진 노드'가 '노드'의 자신을 포함한 후손인지 확인
• 노트.constains(주어진_노드)
• 주어진_노드 : 내가 후손인지 확인하고 싶은 노드

N.textContent()

• 노드의 모든 텍스트를 얻거나 변경

E.innerHTML ⭐️ (자주 사용되는 속성)

• 요소의 모든 HTML 내용을 하나의 문자로 얻거나, 새로운 HTML을 지정

생성 조회 수정2

E.dataset

• 요소의 각 'data-' 속성 값을 얻거나 지정

E.tagName

• 요소의 태그 이름을 반환

E.id

• 요소의 'id' 속성 값을 얻거나 지정

E.className

• 요소의 'class' 속성 값을 얻거나 지정
• 단순 문자로 할당돼서 들어가거나 확인되기 때문에 class 전체값이 하나의 문자로나왓을 때 active, child클래스가 있는 지 등 문자데이터로 직접 다뤄서 할당해야하기 때문에 불편
• 그 값을 얻어서 간단하게 확인하는 정도로만 사용
• 복잡한건 classList 속성을 사용하자

E.classList

• 요소의 'class' 속성 값을 제어
• .add() : 새로운 값을 추가
• .remove() : 기존 값을 제거
• .toggle() : 값을 토글
• .contains() : 값을 확인

toggle : 있으면 제거하고 없으면 추가

E.style

• 요소의 'style'속성(인라인 스타일)의 css 속성 값을 얻거나 지정
• 인라인 스타일로 작성한 css 속성은, 우선순위 점수가 천점이기 때문에 id, class 선택자의 백점, 십점으로는 덮어쓸 수가 없기 때문에 js를 통해서 요소에 css내용을 적용할 때는 적용할 내용을 너무 남발하지 말고 최대한 인라인 스타일 방식으로 들어가지 않도록 별도의 css파일을 만들어 사용하거나 스타일 태그 내부에다가 입력하는 것이 좋다.
  그러나 우리가 이렇게 지정한 css내용을 동적으로 제어하고 관리하고 싶다면, 당연하게 자바스트립트의
  style 속성에 있는 각각의 css 내용에 값을 지정할 수가 있다.
  => 꼭 필요한 곳에서만 사용하자.
  => 개별지정이란: el.style.width = 100px (하나의 객체데이터)
  => 한번에 지정:

Object.assign(el.style, {
    width:'100px',
    fontSize: '20px' ,
    backgroundColor:'green',
    position: 'absolute'  
})

점 표기법이나, 여러 개의 css 내용을 적용할 땐, 오브젝트로도 할 수 있다

window.getComputedStyle()

• 요소에 적용된 스타일 객체를 반환
• 직전에 style 속성 같은 경우에는 인라인작성방식만 확인이 가능하고 인라인으로 스타일이 추가가 됨. 계산이 완료되어 적용된 스타일을 얻는 이 메소드를 통해서 해당 값을 얻어낼 수 있다.
  -> 인라인 방식으로 작성된 것이 아니기 때문에 style태그는 요소의 style속성만 가지고서는 확인할 수가 없다.

E.getAttribute() / E.setAttribute()

• 요소에서 특정 속성 값을 얻거나 지정
  Attribute: html의 속성을 지정할 때 사용하는 단어
  

E.hasAttribute() / E.removeAttribute()

hasAttribute : html 속성이 들어있는지. 없는지
removeAttribute : 속성을 제거

• 요소의 특정 속성을 확인하거나 제거

크기와 좌표

window.innerWidth / window.innerHeight

• 현재 화면(Viewport)의 크기를 얻는다.
  

window.scrollX / window.scrollY

• 페이지의 좌상단 기준, 현재 화면(Viewport)의 수평 혹은 수직 스크롤 위치를 얻는다

window.scrollTo() / E.scrollTo()

• 지정된 좌표로 대상(화면, 스크롤 요소)을 스크롤한다.
• 대상.scrollTo(X좌표, Y좌표)
• 대상.scrollTo({ top : Y, left: X , behavior: 'smooth' })
• parent의 값이 overflow가 auto로 지정되어 있으면 스크롤이 가능.

E.clientWidth / E.clientHeight

• 요소의 테두리선(border) 을 제외한 요소의 크기를 얻습니다.
• 스크롤바의 너비가 제외될 수 있다.

E.offsetWidth / E.offsetHeight

• 테두리 선(border)을 포함한 요소의 크기를 얻는다.

E.scrollLeft / E.scrollTop

• 스크롤 요소의 좌상단 기준, 현재 스크롤 요소의 수평 혹은 수직 스크롤 위치를 얻는다.

E.offsetLeft / E.offsetTop

• 페이지의 최상단 기준, 요소의 위치를 얻는다.

E.getBoudingClientRect()

• 테두리 선(border)을 포함한 요소의 크기와 화면에서의 상대 위치 정보를 얻는다.
• 요소의 크기를 얻을 땐 요소의 offsetWidth같은 것처럼 선 포함
• 화면의 상대위치 정보이며, top, bottom, left, right 속성은 상단과 좌측에서만 거리를 잰다. 만약 윈도우에서 스크롤을 하게 되면 또 다른 값이 나오게 된다.

우리가 사용할 수 있는 일반적인 요소는 화면에 굉장히 여러 개가 존재하는데, 이러한 모든요소의위치 정보를 매번 사용자의 화면이 스크롤 될 때마다 갱신하는 것은 매우 비효율적이기 때문에
속성이 아닌 메소드를 호출해서 그때그때 따로 값을 얻는 개념으로 사용한다.