JavaScript (7) DOM (Document Object Model)

DOM

Document Object Model

 

 

Document

웹브라우저

 

DOM은 트리 구조로 되어있다

DOM 시각화 예시)

구조 형태

 

html 웹 문서 동작

1) 컴퓨터 웹브라우저에 html 문서를 읽어들임(파싱 : 문법 해석)

2) 파싱된 문서(DOM) => 메모리에 저장(DOM 저장됨)

 

노드(Node)

html 문서의 특징

태그(tag)

속성 (attribute)

텍스트(text)

주석(comment)

를 통칭하여 노드(Node)라고 한다.

 

태그 , 속성 , 텍스트 , 주석별로 구분하여 트리구조로 메모리에 저장됨

 

 

 

querySelector()

DOM(html태그) 접근하는(선택하는) 함수

 

사용법

document.querySelector("선택자") : html 선택자 선택

태그 : 속성(style등) , 상세속성(backgroundColor 등)

 

예시)

document.querySelector("선택자").속성.상세속성 = "값";

 

또는

 

document.querySelector("선택자");

선택자(or 변수).속성.상세속성 = "값"

 

따라서 

선택함수 qeurySelector()은

return 값을 html 태그로 준다