DOM(The Document Object Model 문서객체모델)
브라우저에서는 HTML코드를 DOM이라는 객체 형태의 모델로 저장. 그렇게 저장된 정보를 DOM Tree라고 하며 결국 HTML element는 tree형태로 저장된다.
문서 객체란 무엇인가?
문서 객체란<html>이나<body>같은 html문서의 태그들을 javascript가 이용할 수 있는 객체(object)로 만들면 문서 객체라고 한다.
왜 모델이 뒤에 붙여졌을까? 문서 객체를 '인식하는 방식'이라고 해석할 수 있다.
DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 그들이 문서구조,스타일, 내용등을 변경할 수 있게 돕는다. DOM은 구조화된 nods,property,method를 갖고 있는 Object로 문서를 표현한다.
웹페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML소스 자체로 나타나기도 한다. DOM은 동일한 문서를 표현하고 저장하고 조작하는 방법을 제공한다.
DOM은 HTML문서에 대한 인터페이스이며 뷰포트에 무엇을 렌더링할지 결정하기 위해 사용되며, 페이지의 콘텐츠 구조 그리고 스타일이 자바스크립 프로그램에 의해 수정되기 위해 사용된다.
DOM은 항상 유효한 HTML형식이며 자바스크립에 수정될 수 있는 동적모델이어야 하며 가상요소를 포함하지 않고 보이지 않는 요소를 포함한다.자바스크립트로 문서 객체를 생성한다는 것은 HTML페이지에 없던 문서 객체를 동적으로 생성하는 것이 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서객체 모델(DOM) </title>
<script type= "text/javascript">
window.onload=function(){
//1. 문서 객체 생성
var header= document.createElement('h2');//h2태그생성
var textNode= document.createTextNode('Hello DOM');
//2. 노드(요소/텍스트)를 연결
header.appendChild(textNode);
//3.body 문서 객체에 header 문서 객체를 추가
document.body.appendChild(header);
};
</script>
</head>
<body>
<h1 id ="header_1" name= "" >HEADER-1 </h1 >
<div >
<h1 id = "header_2">HEADER-2</h1 >
</div >
<hr >
<h1 id = "clock"></h1>
</body>
</html>Element.querySelector()
DOM을 찾는데 특히 유용한 메소드
Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫번째Element를 반환한다. 일치하는 요소가 없으면 null을 반환한다.
ㅣ인터페이스
우리가 쓰는 프로그램들은 프로그램 상의 어떤 인터페이스를 통해서 컴퓨터 시스템의 자원들을 사용하고 네트워크와 통신하며 우리가 쓰는 컴퓨터에 아이콘을 띄우기도 한다.
즉, 상호 작용하는 곳.
ㅣ API
API(application programming interface)응용프로그램 프로그래밍 인터페이스. 응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스. 즉, 다른 프로그램에서 미리 명시한 명세(specification)대로 프로그램 코드를 짜면 해당 API로 다른 프로그램과 상호작용할 수 있게 되는 것이다. 다시 말하면, API는 다른 프로그램과 상호작용하는 곳이며 상호작용할 때는 프로그램 코드를 쓴다.
참고:
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C
