Javascript_03: DOM(Document Object Model)의 이해

브라우저도 객체

window객체를 활용해 브라우저 열고 닫기, 크기 반환 등을 수행할 수 있다

window 객체를 자바스크립트 내에서 불러올 수 있다. 전역개체(Global Object)이다

window 객체(전역개체)
window.innerWidth	브라우저 창의 너비 반환
window.innerHeight	브라우저 창의 높이 반환
window.open()	브라우저 창 열기
window.close()	브라우저 창 닫기

console 또한 window.console이지만 전역개체이므로 생략가능하다

 

DOM(Document Object Model)

문서 객체 모델이제껏 사용해왔던 document객체가 DOM의 최상단 객체이다

DOM은 웹페이지에 나타난 html 문서 전체를 객체로 표현한다

document 알아보기

console.log(typeof document)
//document의 type은 객체(object)이다

console.log(document);
//객체가 아닌 해당 html 태그 전체가 출력된다

console.dir(document);
//document의 객체를 열람할 수 있다

---

1. 특정 id나 class를 변수에 연결한다

const connect = document.querySelector('#id명');

 

2. 위와 같이 connect에 id를 연결한 이후

console창에 입력하면 connect의 id의 태그가 호출된다

 

3. 연결한 id에 속성을 부여할 수 있다

connect.style.color = "blue"

*새로고침하면 적용!

 

console.dir

console.log와 console.dir의 용도가 다르다

	console.log	console.dir
출력하는 자료형	다양함	모두 문자열
출력하는 내용	값 자체	객체의 속성
출력하는 개수	전달받은 파라미터 전부	첫번째 값만
DOM	HTML형태로 출력	객체로 출력

 

 

DOM Tree

DOM tree에서 각 객체는 Node라고 한다
포함관계에 따라 부모node와 자식node, 형제node로 나뉜다

노드 타입(Node Type)에는 
태그를 표현하는 요소 노드(Element Node)
문자를 표현하는 텍스트 노드(Text Node)가 있고

일반적으로 텍스트 노드 → 노드의 자식노드이다
텍스트노드는 자식노드를 가질 수 없다
이 외에 많은 node가 있지만 위 두개가 대표적이다

 

 

DOM tree 접근하기

getElement와 querySelector로 하나씩 불러올 수 있지만

DOM연결구조 안에서 서로의 관계를 이용해 불러올 수도 있다

DOM의 노드관계를 통한 접근

부모(parent)와 자식(children), 형제(sibling)

DOM tree 접근하기(요소노드)
부모노드에 접근	.parentElement
자식노드에 접근	.children
	.children[1]. //index를 활용
	.firstElementChild //첫번째
	.lastElementChild //마지막
형제노드에 접근	.previousElementSibling
	.nextElementSibling

 

 

요약

window 객체(전역개체)
window.innerWidth	브라우저 창의 너비 반환
window.innerHeight	브라우저 창의 높이 반환
window.open()	브라우저 창 열기
window.close()	브라우저 창 닫기

	console.log	console.dir
출력하는 자료형	다양함	모두 문자열
출력하는 내용	값 자체	객체의 속성
출력하는 개수	전달받은 파라미터 전부	첫번째 값만
DOM	HTML형태로 출력	객체로 출력

DOM tree 접근하기(요소노드)
부모노드에 접근	.parentElement
자식노드에 접근	.children
	.children[1].//index를 활용
	.firstElementChild//첫번째
	.lastElementChild//마지막
형제노드에 접근	.previousElementSibling
	.nextElementSibling