Javascript_03: DOM(Document Object Model)의 이해

Javascript_03: DOM(Document Object Model)의 이해

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를 console에 연결시켜보자

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

2. 위와 같이 connect에 id를 연결한 이후 console창에 입력해보면?

*해당하는 id의 태그가 호출된다

3. 연결한 id에 속성을 부여해보자

connect.style.color = "blue"

*새로고침하면 적용이 된 것을 알 수 있다

console.log VS 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형태로 출력 객체로 출력

from http://devyoseph.tistory.com/7 by ccl(A) rewrite - 2021-09-22 06:26:43