개발자들의 용어 정리 16 + [AJAX]
AJAX에는 여러 기술이 사용된다.
HTML, JS, XML 그리고 DOM 까지..
HTML은 설계도라면 브라우저는 공장의 개념이다.
브라우저가 HTML의 설계를 바탕으로 만들어낸 제품Product의 개념이 DOM이다.
"HTML 문서가 실체화된 API" 라고 정의 가능하다고 한다.
----------------------------------------------------------------------------------------------------------------------
<HTML>
<head>
<title>웹 사이트</title>
</head>
<body>
<div>
<h1 id="h1">사이트 제목</h1>
<input type="text">
<button id= "button"><확인></button>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
다음과 같은 HTML 코드는 일종의 설계도이다.
이러한 설계도를 바탕으로 브라우저는 다음과 같은 객체를 생성한다.
DOM에 대한 이해를 하려면
DOM = HTML 문서가 실체화된 API 라고 명명한 뜻을 좀 더 자세히 알아볼 필요가 있다.
----------------------------------------------------------------------------------------------------------------------
//button과 h1 요소의 DOM 객체를 선택한다.
const button = document.getElementById('button')
const h1 = document.getElementById('h1')
//DOM 객체에 명령을 내린다.
button.addEventListener(
'click',
() => {h1.innerText = '클릭했습니다.'}
)
----------------------------------------------------------------------------------------------------------------------
위의 코드에서 getElementByID 로 HTML 문서 안의 Document에게 button 과 h1을 찾아오란 명령을 내릴 수 있다.
ㄴ 즉, HTML 안에 Document 에 getElementByID 가 명령을 내릴 수 있다는 의미로 API 라고 명명하는 것이다.
비슷한 Function으로
addEventListener 로 버튼 클릭시 실행할 일을 등록할 수 있으며
innerText 로 h1에 텍스트 내용을 보거나 변경할 수 있는 것 모두 DOM이 API이기 가능한 일이다.
※ API : S/w에서 프로그램 간 소통을 위해 만들어진 신호체계
Dom tree 출처
https://en.wikipedia.org/wiki/Document_Object_Model