DOM 튜토리얼
DOM 시작하기
수색…
비고
DOM (Document Object Model)은 웹 브라우저 및 기타 응용 프로그램에서 HTML 문서의 내용에 액세스하는 데 사용되는 API입니다.
DOM은 구조를 트리로 나타내며, 노드는 자식 노드를 포함 할 수 있으며 자식이없는 노드는 리프 노드라고합니다.
이를 통해 문서와 그 구성 요소의 구조와 속성을 조작 할 수 있습니다.
주요 주제에는 요소 찾기, 스타일 정보 액세스 및 애니메이션이 포함됩니다.
DOM을 사용한 대부분의 작업은 JavaScript 언어를 사용하여 수행되지만 API는 모든 언어에 개방되어 있습니다.
버전
W3C DOM
| 번역 | 출시일 |
|---|---|
| 1 | 1998-10-01 |
| 2 (코어) | 2000-11-13 |
| 3 (코어) | 2004-04-07 |
| 4 | 2013-11-07 |
선택기 API 레벨
| 번역 | 출시일 |
|---|---|
| 1 | 2013-02-21 |
기존 html 요소 검색
가장 일반적인 작업 중 하나는 DOM에서 기존 요소를 검색하여 조작하는 것입니다. 가장 일반적으로 이러한 메소드는 루트 노드이므로 document 에서 실행되지만 이러한 모든 메소드는 트리의 모든 HTML 요소에서 작동합니다. 노드가 실행 된 노드에서만 자식을 반환합니다.
ID로 검색
var element = document.getElementById("logo");
element 에는 id 속성이 "logo"로 설정된 (유일한) 요소가 포함되거나 해당 요소가 없으면 null 이 포함됩니다. 이 id를 가진 요소가 여러 개 있으면 문서가 유효하지 않으며 아무 것도 발생할 수 없습니다.
태그 이름으로 검색
var elements = document.getElementsByTagName("a");
elements 에는 문서의 모든 링크 태그에 대한 라이브 HTMLCollection (배열과 유사한 객체)이 포함됩니다. 이 콜렉션은 DOM과 동기화되어 DOM에 대한 모든 변경 사항이이 콜렉션에 반영됩니다. 컬렉션은 임의 액세스를 제공하며 길이가 있습니다.
var element = elements[0];
//Alternative
element = elements.item(0);
element는 처음 발견 된 HTML 링크 요소를 포함하거나 인덱스가 범위를 벗어난 경우null입니다.
var length = elements.length;
length는 현재 목록에있는 HTML 링크 요소의 수와 같습니다. 이 번호는 DOM이 변경 될 때 변경 될 수 있습니다.
수업 별 검색
var elements = document.getElementsByClassName("recipe");
elements 에는 class 속성에 "recipe"가 포함 된 모든 요소의 라이브 HTMLCollection (배열과 유사한 객체)이 포함됩니다. 이 콜렉션은 DOM과 동기화되어 DOM에 대한 모든 변경 사항이이 콜렉션에 반영됩니다. 컬렉션은 임의 액세스를 제공하며 길이가 있습니다.
var element = elements[0];
//Alternative
element = elements.item(0);
element는이 클래스에서 처음 발견 된 HTML 요소를 포함합니다. 이러한 요소가없는 경우element는 첫 번째 예제에서는 값이undefined값을 가지며 두 번째 예제에서는null값을 갖습니다.
var length = elements.length;
length는 현재 "recipe"클래스가있는 HTML 요소의 수와 같습니다. 이 번호는 DOM이 변경 될 때 변경 될 수 있습니다.
이름으로 검색
var elements = document.getElementsByName("zipcode");
elements 에는 name 속성이 "zipcode"로 설정된 모든 요소의 라이브 NodeList (배열과 유사한 객체)가 포함됩니다. 이 콜렉션은 DOM과 동기화되어 DOM에 대한 모든 변경 사항이이 콜렉션에 반영됩니다. 컬렉션은 임의 액세스를 제공하며 길이가 있습니다.
var element = elements[0];
//Alternative
element = elements.item(0);
element는이 이름을 가진 첫 번째로 발생한 HTML 요소를 포함합니다.
var length = elements.length;
length는 현재 이름 속성으로 "zipcode"가있는 HTML 요소의 수와 같습니다. 이 번호는 DOM이 변경 될 때 변경 될 수 있습니다.
시작하기
DOM (Document Object Model)은 HTML 및 XML 문서의 프로그래밍 인터페이스이며 문서의 논리적 구조와 문서가 액세스되고 조작되는 방식을 정의합니다.
DOM API의 주요 구현자는 웹 브라우저입니다. 사양은 W3C 및 WHATWG 그룹에 의해 표준화되며 개체 모델은 프로그래밍 인터페이스의 논리 모델을 지정합니다.
DOM 구조의 표현은 트리 유사보기와 유사합니다. 각 노드는 특정 요소 및 공유 기능을 상속하는 유형에 따라 마크 업의 일부를 나타내는 개체입니다.
"Document Object Model"이라는 이름은 전통적인 객체 지향 디자인 감각에서 "객체 모델"이기 때문에 선택되었습니다. 즉, 문서는 객체를 사용하여 모델링되고 모델은 문서의 구조뿐만 아니라 문서의 동작을 포함합니다 그리고 그것이 구성되어있는 대상들. 즉, 예제 HTML 다이어그램을 사용하면 노드는 데이터 구조를 나타내지 않고 함수와 ID를 갖는 객체를 나타냅니다. 객체 모델로서 Document Object Model은 다음을 식별합니다.
- 문서를 표현하고 조작하는 데 사용되는 인터페이스와 객체
- 이러한 인터페이스 및 객체의 의미 - 동작 및 속성 모두 포함
- 이러한 인터페이스와 객체 간의 관계 및 협업
DOM이로드 될 때까지 기다립니다.
DOM과 상호 작용하는 <script> 코드가 <head> 섹션에 포함되어 DOMContentLoaded 사용하십시오. DOMContentLoaded 콜백 안에 랩핑되지 않으면 코드가 다음과 같은 오류를 발생시킵니다.
null읽을 수 없습니다.
document.addEventListener('DOMContentLoaded', function(event) {
// Code that interacts with DOM
});
https://html.spec.whatwg.org/multipage/syntax.html#the-end
DOMContentLoaded 대안
대안 ( IE8에 적합)
// Alternative to DOMContentLoaded
document.onreadystatechange = function() {
if (document.readyState === "interactive") {
// initialize your DOM manipulation code here
}
}
https://developer.mozilla.org/en/docs/Web/API/Document/readyState
innerHTML 사용
HTML
<div id="app"></div>
JS
document.getElementById('app').innerHTML = '<p>Some text</p>'
이제 HTML은 다음과 같이 보입니다.
<div id="app">
<p>Some text</p>
</div>
HTML 마크 업
예제 입력 :
<html>
<head>
<title>the title</title>
<link href='css/app.css' type='text/css' rel='stylesheet'>
<script src='js/app.js'></script>
</head>
<body>
<h1>header</h1>
<div>
<p>hello!</p>
</div>
</body>
</html>
DOM 요소 출력 :
------------
| document | <--- DOM root object.
------------
|
|
------------
| html | <--- document.documentElement
------------
______________|______________
| |
------------ ------------
| head | | body |
------------ ------------
______________|______________ |______________
| | | | |
------------ ------------ ------------ ------------ ------------
| title | | link | | script | | h1 | | div |
------------ ------------ ------------ ------------ ------------
|
|
------------
| p |
------------
위의 모든 요소는 HTMLElement 인터페이스에서 상속 받아 특정 태그에 따라 사용자 정의됩니다.