개요
DOM은 Document object model의 준말이며, 문서 객체 모델은 HTML,XML 서식값의 시각 인터페이스화된 구조이다.
DOM은 문서 [ 코드 나열 ]의 BOM [ Browser object model ] 부속 값이며, 브라우저 엔진에 의해 ,프로그래밍 언어가 DOM 구조 자신 자체에 접근 방법을 제공하고, [ 문서 구조, 스타일, 내용 ] 등을 변경할 수 있게 돕는다.
DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.
쉽게 말해, DOM 개념이 있기에, 페이지를 표현하는 것이 목적이 아닌 자바스크립트로도, 페이지 표현이 가능해진다. 이는 다이나믹하다.
let paragraphs = document.getElementsByTagName("P");
// 스크립트의 제어를 통해 HTML 문서의 P 태그 리스트에 접근 가능하도록 변수 선언
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName); // HTML 문서에 작성된 첫 번째 자식값의 태그 네임을 보여줌
// source from MDN
DOM에 접근하기
1.스크립트 태그를 이용하여 작성하거나, 페이지 로드 스크립트로 초기화 시부터 문서 자체를 조작 가능
2.문서 내의 요소 값들을 직접 얻는 API들을 통해 조작 가능
하단 MDN의 예제를 보면, 자바스크립트를 이용하여 페이지 로드할 때, 'welcome to my home page!'라는 팝업창을 줄 수 있다.
<body onload="window.alert('welcome to my home page!');">
//onload 함수를 통해, 문서를 로드하여 인터랙션 값을 사용자에게 준다
//=> MDN아래의 자바스크립트는 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때임) 실행되는 함수를 정의하였다. 이 함수는 새로운 H1 element 를 생성하고, element 에 text 를 추가하며, H1 을 이 문서의 트리에 추가한다.
<html>
<head>
<script>
// run this function when the document is loaded
window.onload = function () { // 페이지 로드시 함수 실행
let heading = document.createElement("h1"); // 'h1' 태그 컨테이너 생성
let heading_text = document.createTextNode("Big Head!"); // 텍스트 노드 값을 채워줌
heading.appendChild(heading_text); // heading 컨테이너의 맨 끝 값으로 'Big head!'를 이동
document.body.appendChild(heading); // 문서내의 body 값 끝에 노드 값 'Big head!' 표현
}
</script>
</head>
<body>
</body>
</html>
CTO를 꿈꾸는 CDO