각각의 브라우저는 자신만의 방법으로 DOM을 구현하였으며, 이로 이해 실제 DOM기준을 따르는지 확인해야 하는 번거로움이 발생하였습니다.(브라우저간의 DOM 구현의 차이 때문) 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느 정도의 DOM을 항상 사용합니다.
접근방법.
DOM 프로그래밍은 아래 처럼 window object로 부터 alert() 함수를 사용하여 alert message를 표시하는 간단한 것일 수도 있고, 그 아래 예제처럼 새로운 content를 작성하는 복잡한 DOM이 될 수도 있습니다.
1. 인라인 타입 : window object로 부터 alert 함수 사용하여 간단한 메시지 표시.
<body onload="window.alert('안녕하세요! 반갑습니다.');">
2. content를 작성하는 복잡한 DOM
<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>
중요한 데이터 타입
아래의 표는 이러한 data types 에 대한 간략한 설명이다.
| document | member 가 document type 의 object 를 리턴할 때(예를 들어 element의 ownerDocument property 는 그것이 속해 있는 document 를 return 한다. ), 이 object 는 root document object 자체이다. 는 document object 에 대한 설명은 DOM document Reference 챕터를 참조하라. |
|---|---|
| element | element 는 DOM API 의 member 에 의해 return 된 element 또는 element type 의 node 를 의미한다. document.createElement() method 가 node 를 참조하는 object 를 리턴한다고 말하는 대신, 이 method 가 DOM 안에서 생생되는 element 를 리턴한다고 좀 더 단순하게 말할 수 있다. element 객체들은 DOM Element interface 와 함께 좀 더 기본적인 Node interface 를 구현한 것이기 때문에 이 reference 에는 두 가지가 모두 포함되었다고 생각하면 된다. |
| nodeList | nodeList 는 elements 의 배열이다. (document.getElementsByTagName() method 에 의해 리턴된 것과 같은) nodeList의 Items 은 index 를 통해 접근 가능하며, 다음과 같이 두 가지 방식이 있다:
|
| attribute | attribute 가 member 에 의해 리턴되는 것은(예를 들어 createAttribute() method 호출에 의한 리턴), attribute 에 대한 특별한 인터페이스를 노출하는 object reference 이다. attributes 는 DOM 에서 elements 와 같은 nodes 이다. elements 만큼 많이 사용되지는 않는다. |
| namedNodeMap | namedNodeMap 는 array 와 유사하지만 items 은 name 또는 index 에 의해 접근 가능하다. 리스트는 특별한 정렬이 적용되지 않았기 enumeration 할 때 index 를 주로 사용한다. namedNodeMap 는 이를 위해 item() method 가 있으며, namedNodeMap 에 item 을 추가하거나 삭제할 수 있다. |
여기서 DOM 2강을 마무리 하겠습니다.
참조 : https://developer.mozilla.org/ko/docs/Gecko_DOM_Reference/%EC%86%8C%EA%B0%9C#DOM_and_JavaScript
