브라우저
window 객체가 최상위 객체이며, 모든 웹 페이지의 기본이 됩니다.
window 객체 아래에는 BOM(Browser Object Model)과 DOM(Document Object Model)이 있습니다.
BOM (Browser Object Model)
웹 브라우저와 관련된 객체들을 제공합니다.
- location:
현재 페이지의 URL 정보를 제공. location.href, location.replace, location.reload 등을 사용하여 URL 조작 가능. - navigator:
웹 브라우저 및 장치 정보를 제공. navigator.userAgent를 통해 브라우저 정보를 반환. - screen:
디바이스의 화면 정보를 제공합니다. screen.width, screen.height 등으로 화면 크기 확인. - history:
사용자가 방문한 URL 기록을 관리합니다. history.back(), history.forward()를 사용해 이전/다음 페이지로 이동.
DOM (Document Object Model)
DOM(Document Object Model)은 HTML문서의 구조화된 표현을 나타내며, 웹 페이지를 동적으로 조작하고 수정할 수 있도록 하는 브라우저의 인터페이스입니다.
DOM은 웹 페이지의 각 요소를 객체로 다루어, 자바스크립트를 사용해 페이지의 콘텐츠와 스타일을 동적으로 변경하거나 이벤트를 처리할 수 있게 합니다.
브라우저는 HTML 문서를 로드한 후, 해당 문서에 대한 모델을 메모리에 생성합니다. 모델은 객체의 트리로 구성되는데, 이것을 DOM tree라고 합니다.
문서 노드(Document Node)
트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 합니다.
즉, DOM tree에 접근하기 위한 시작점(entry point)입니다.
요소 노드(Element Node)
요소 노드는 HTML 엘리먼트를 표현합니다.
어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 합니다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성되어 있습니다.
어트리뷰트 노드(Attribute Node)
어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현합니다.
어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현됩니다.
따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있습니다.
텍스트 노드(Text Node)
텍스트 노드는 HTML 요소의 텍스트를 표현합니다.
텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없습니다.
즉, 텍스트 노드는 DOM tree의 최종하단입니다.
요소의 텍스트는 텍스트 노드에 저장되어 있습니다.
문서 객체 선택
- document.querySelector():
CSS 선택자를 사용하여 문서에서 첫 번째 지정된 요소를 반환합니다. - document.querySelectorAll():
CSS 선택자를 사용하여 문서에서 모든 지정된 요소를 반환합니다. - document.getElementById(), document.getElementsByClassName(), document.getElementsByTagName():
특정 속성이나 태그에 해당하는 요소를 반환합니다.
최근에는 성능 차이가 미미해 querySelector 가 자주 사용됩니다.
문서 객체 조작
- 스타일 변경:
element.style.color = "blue"와 같이 개별 스타일을 직접 변경합니다. - 속성 조작:
setAttribute, getAttribute, removeAttribute를 통해 요소의 속성을 추가, 가져오기, 삭제할 수 있습니다. - 콘텐츠 조작:
- innerText: 보이는 텍스트만을 반환.
- textContent: 모든 텍스트를 반환, 보통 텍스트 조작 시 사용 (퍼포먼스 유리).
- innerHTML: 선택된 요소 내부의 HTML 콘텐츠를 포함해 가져오고 설정.
- outerHTML: 선택된 요소 자신을 포함한 HTML을 가져오고 설정.
- 새로운 문서 객체 추가:
createElement(), appendChild(), insertBefore() 등으로 동적으로 요소를 생성하고 추가 가능. - 문서 객체 삭제:
element.remove(): 선택한 요소를 바로 삭제.
parent.removeChild(element): 부모 요소에서 특정 자식 요소를 삭제.
