[JS] 노드(Node) 객체와 window 객체

노드(Node)와 노드 트리

노드(Node) : HTML DOM 에서 정보를 저장하는 계층적 단위

노드 트리 : 노드들의 집합으로 노드 간의 관계를 나타냄

자바스크립트에서는 HTML DOM을 이용하여 노드트리에 포함된 모든 노드에 접근할 수 있다.

노드 간의 관계

노드 트리의 모든 노드들은 서로 계층적 관계를 맺고 있다.

노드의 종류

• 문서 노드(document node) : HTML 문서 전체를 나타내는 노드
• 요소 노드(element node) : 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드
• 주석 노드(comment node) : HTML 문서의 모든 주석은 주석 노드
• 속성 노드(attribute node) : 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다. 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않는다.
• 텍스트 노드(text node) : HTML 문서의 모든 텍스트는 텍스트 노드

노드의 값

노드에 대한 정보는 다음과 같은 프로퍼트를 통해 접근할 수 있다.

nodeName(이름) , nodeValue(값), nodeType(타입)

// HTML 문서의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택
document.childNodes[0].nodeName;
// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 노드값을 선택
document.getElementById("heading").firstChild.nodeValue;
// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 타입을 선택
document.getElementById("heading").firstChild.nodeType;

nodeType 프로퍼티 값

childNodes[0].nodeType;  // 자식 노드 중에서 첫 번째 노드의 이름을 선택

nodeType 프로퍼티 값은 텍스트가 아닌 숫자로 표현된다.

대표적인 HTML 노드별 nodeType 프로퍼티 값

요소 노드:1
속성 노드: 2
텍스트 노드: 3
주석 노드: 8
문서 노드: 9

 

---

Window 객체

window 객체는 웹 브라우저의 창을 가르키며, window 객체를 이용하여 브라우저를 조작 할 수 있다.

메서드	설명
close()	현재 창을 닫는다.
open(링크, 새 탭 or 현재 탭, 설정)	새 창을 연다
setTimeout(함수, 밀리초)	지정한 초 뒤에 함수를 실행
alert(메세지)	팝업 창 생성
scrollTo(옵션)	옵션에 있는 좌표 값으로 스크롤

 

scrollTo()

원하는 위치로 스크롤

• window.scrollTo(options): 현재 화면을 options에 해당하는 위치로 이동시키는 메소드
• offsetTop : 선택된 영역의 상단까지의 거리를 절대 좌표로 반환하는 메서드

window.scrollTo(0, 1000);
window.scrollTo({
  top: 100,
  left: 100,
	// 부드럽게 올라가는 옵션
  behavior: 'smooth'
});

window.scrollTo({
            'behavior': 'smooth',
            'top':  target.offsetTop
        })