1. DOM이란?
DOM은 Document Object Model의 약자로 직역 하면 Document : 문서, Object : 객체 로 문서 객체 모델로 번역 할 수 있다.
그러면 html에서의 문서 객체는 무엇일지 생각 해봐야 될 것이다.
html에서의 문서 객체는 body, div 등과 같은 태그들을 JavaScript가 이용할 수 있는 객체로 만든 것을 문서, 객체 라고 한다. 문서 객체를 인식하는 방식으로 해석 할 수 있다.
2. DOM에 어떻게 접근할 수 있을까?
javascript로 작성 중이라면 script 태그를 통해서 html 태그들을 조작할 수 있다.
<html>
<head>
<script>
// run this function when the document is loaded
window.onload = function() {
// create a couple of elements in an otherwise empty HTML page
var heading = document.createElement("h1");
var heading_text = document.createTextNode("Big Head!");
heading.appendChild(heading_text);
document.body.appendChild(heading);
}
</script>
</head>
<body>
</body>
</html>
- 위 예시는 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때) 실행되는 함수를 정의하였다. 이 함수는 새로운 H1 element 를 생성하고, element 에 text 를 추가하며, H1 을 이 문서의 트리에 추가한다.
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
프론트앤드 공부중인 챔수입니다.