📙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태그를 쓰더라도 모두 텍스트로 처리됨 |
요소 노드 다루기
- 요소 노드 만들기 :
document.createElement('태그이름')- 요소 노드 꾸미기 :
element.textContent,element.innerHTML,element.innerText- 요소 노드 추가 혹은 이동하기 :
element.prepend,element.append,element.after,element.before- 요소 노드 삭제하기 :
element.remove()
HTML 속성 다루기
대부분의 HTML 속성은 DOM 객체의 프로퍼티로 변환이 가능하지만, 표준 속성이 아닌 경우에는 프로퍼티로 변환이 안된다.
이때 아래의 메소드를 활용하면 표준이 아닌 HTML 속성도 다룰 수 있게 된다!
1. 속성에 접근하기 :element.getAttribute('속성')
2. 속성 추가(수정) 하기 :element.setAttribute('속성', '값')
3. 속성 제거하기 :element.removeAttribute('속성')
스타일 다루기
- style 프로퍼티 활용하기 :
element.style.styleName = 'value';- 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로 구분할 수 있습니다.
