[ JS ] DOM에 대한 총 정리!

📙Window 객체

window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체입니다.
자바스크립트 코드 어느 곳에서나 항상 접근할 수 있기 때문에 전역 객체 [ Global Object] 라고 부릅니다.
어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것 이기 때문에 window.을 생략하고 사용이 가능합니다!

🤷‍♂️DOM 이란?

DOM 은 Document Object Model 의 약자로서 '문서 객체 모델' 이라고 부릅니다.
웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것 으로 생각하면 됩니다.
이때, 각 객체를 노트 [ Node ] 라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분됩니다.

🏕️ DOM 트리

HTML의 계층 구조는 DOM에서도 반영되는데 이러한 계층구조를 나무에 비유하여 DOM Tree 라고 부릅니다.
각 노드 간의 관계는 부모, 자식, 형제라는 용어로 표현합니다.

👉DOM 이동 시 활용 가능한 프로퍼티

Property	유형	결과
element.children	자식 요소 노드	element의 자식 요소 모음(HTMLCollection)
element.firstElementChild	자식 요소 노드	element의 첫 번째 자식 요소 하나
element.lastElementChild	자식 요소 노드	element의 마지막 자식 요소 하나
element.parentElement	자식 요소 노드	element의 부모 요소 하나
element.previousElementSibling	형제 요소 노드	element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나
element.nextElementSibling	형제 요소 노드	element의 다음(next) 혹은 우측(right)에 있는 요소 하나
node.childNodes	자식 노드	node의 자식 노드 모음(NodeList)
node.firstChild	자식 노드	node의 첫 번째 자식 노드 하나
node.lastChild	자식 노드	node의 마지막 자식 노드 하나
node.parentNode	부모 노드	node의 부모 요소 하나
node.previousSibling	형제 노드	node의 이전(previous) 혹은 좌측(left)에 있는 노드 하나
node.nextSibling	형제 노드	node의 다음(next) 혹은 우측(right)에 있는 노드 하나

👀 주요 요소 노드 프로퍼티

Property	내용	참고사항
element.innerHTML	요소 노드 내부의 HTML코드 문자열로 리턴	요소 안의 정보를 확인할 수도 있지만,내부의 HTML 자체를 수정할 때 좀 더 자주 활용
element.outerHTML	요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴	outerHTML은 새로운 값을 할당하면 요소 자체가 교체되어 버리기 때문에 주의
element.textContent	요소 노드 내부의 내용들 중에서 HTML을 제외하고 텍스트만 리턴	textContent는 말그대로 텍스트만 다루기 때문에 HTML태그를 쓰더라도 모두 텍스트로 처리됨

요소 노드 다루기

1. 요소 노드 만들기 : document.createElement('태그이름')
2. 요소 노드 꾸미기 : element.textContent, element.innerHTML, element.innerText
3. 요소 노드 추가 혹은 이동하기 : element.prepend, element.append, element.after, element.before
4. 요소 노드 삭제하기 : element.remove()

HTML 속성 다루기

대부분의 HTML 속성은 DOM 객체의 프로퍼티로 변환이 가능하지만, 표준 속성이 아닌 경우에는 프로퍼티로 변환이 안된다.
이때 아래의 메소드를 활용하면 표준이 아닌 HTML 속성도 다룰 수 있게 된다!

1. 속성에 접근하기 : element.getAttribute('속성')
2. 속성 추가(수정) 하기 : element.setAttribute('속성', '값')
3. 속성 제거하기 : element.removeAttribute('속성')

스타일 다루기

1. style 프로퍼티 활용하기 : element.style.styleName = 'value';
2. class 변경을 통해 간접적으로 스타일 적용하기 : element.className, element.classList

메소드	내용	참고사항
classList.add	클래스 추가하기	여러 개의 값을 전달하면 여러 클래스 추가 가능
classList.remove	클래스 삭제하기	여러 개의 값을 전달하면 여러 클래스 삭제 가능
classList.toggle	클래스 없으면 추가, 있으면 삭제하기	하나의 값만 적용 가능하고, 두 번째 파라미터로 추가 또는 삭제 기능을 강제할 수 있음

---

프로퍼티와 메소드의 차이는?

JavaScript 에서 Method 는 함수로 된 Property 이다.
라고 하지만 저 글만 보고서는 확실하게 어떤걸 Property라 하는지, Method라 하는지 구분하기 어려워서 찾아보았습니다!
구분하는 방법은 두가지가 있습니다.

1. 의미로 구분하기
2. 사용방법으로 구분하기

의미로 구분하기는 Property가 속성 이라면, Method는 행동 으로 구분하는 것 입니다.
즉 listA라는 array가 있을 때, listA.length는 property이고, listA.push(1)은 Method인 것 입니다.

사용법으로 구분하기는 Method는 함수로 된 Property라 하였으므로, 함수의 가장 큰 특징인 callable (호출할 수 있는)을 사용하여 JavaScript에서 괄호로 함수를 호출하므로 괄호로 끝나면 Method, 괄호가 없으면 Property로 구분할 수 있습니다.