1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
|
---
title: MutationObserver
slug: Web/API/MutationObserver
translation_of: Web/API/MutationObserver
---
<p>{{APIRef("DOM")}}</p>
<p><code>MutationObserver</code> 는 개발자들에게 <a href="/en-US/docs/DOM">DOM</a> 변경 감시를 제공합니다. DOM3 이벤트 기술 설명서에 정의된 <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> 를 대체합니다.</p>
<h2 id="생성자">생성자</h2>
<h3 id="MutationObserver"><code>MutationObserver()</code></h3>
<p>새 DOM 변경 감시자의 인스턴스화에 대한 생성자.</p>
<pre class="syntaxbox">new MutationObserver(
function callback
);
</pre>
<h6 id="Parameters">Parameters</h6>
<dl>
<dt><code>callback</code></dt>
<dd>콜백 함수는 각 DOM 변경시 마다 호출될 것입니다. 감시자는 두 인자와 함께 이 함수를 호출할 것입니다. 첫째 인자는 오브젝트들의 배열이며, 오브젝트의 각 형식은 {{domxref("MutationRecord")}} 입니다. 둘째 인자는 이 <code>MutationObserver</code> 인스턴스 입니다.</dd>
</dl>
<h2 id="인스턴스_함수들">인스턴스 함수들</h2>
<table class="standard-table">
<tbody>
<tr>
<td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td>
</tr>
<tr>
<td><code>void <a href="#disconnect()">disconnect</a>();</code></td>
</tr>
<tr>
<td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td>
</tr>
</tbody>
</table>
<div class="note">
<p><strong>주</strong>: {{domxref("Node")}}의 대상은 <a href="https://nodejs.org/en/">NodeJS</a> 와 혼동되지 말아야 합니다.</p>
</div>
<h3 id="observe"><code>observe()</code></h3>
<p>특정 노드에서 DOM 변경의 알림을 받을 수 있도록 <code>MutationObserver</code> 인스턴스를 등록.</p>
<pre class="syntaxbox">void observe(
{{domxref("Node")}} target,
<a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options
);
</pre>
<h6 id="파라미터">파라미터</h6>
<dl>
<dt><code>target</code></dt>
<dd>DOM 변경을 감시할 {{domxref("Node")}}.</dd>
<dt><code>options</code></dt>
<dd>DOM 변경이 보고되어야 할 특정 <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> 객체.</dd>
</dl>
<div class="note">주: observer를 element에 추가하는 것은 addEventListner와 비슷하며, 여러 번 element를 관찰하더라도 차이가 나지 않습니다. element를 두번 관찰한다고해서 observe callback이 두 번 발생하지 않으며, disconnect()를 두번 실행하지 않아도 됩니다. 다시 말해서, 한번 element를 관찰하면 동일한 observer instance로 다시 관찰하더라도 아무 일이 발생하지 않습니다. 물론 callback object가 다르다면 다른 observer를 추가합니다.</div>
<h3 id="disconnect"><code>disconnect()</code></h3>
<p>DOM 변경 알림을 받는 <code>MutationObserver</code> 인스턴스 중지. <a href="#observe()"><code>observe()</code></a> 재사용시까지 감시 콜백은 발동되지 않을 것입니다.</p>
<pre class="syntaxbox">void disconnect();
</pre>
<h3 id="takeRecords"><code>takeRecords()</code></h3>
<p><code>MutationObserver</code> 인스턴스의 레코드 큐를 비우고 안에 든것을 반환합니다.</p>
<pre class="syntaxbox">Array takeRecords();
</pre>
<h6 id="반환값">반환값</h6>
<p>{{domxref("MutationRecord")}}들의 배열을 반환.</p>
<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2>
<p><code>MutationObserverInit</code> 는 다음 속성들을 가진 객체입니다:</p>
<div class="note">주: 최소한 <code>childList</code>, <code>attributes</code>, 또는 <code>characterData</code>는 <code>true</code>로 설정해야합니다. 그렇지 않으면 'An invalid or ilegal string was specified' 오류가 발생합니다. </div>
<table class="standard-table">
<tbody>
<tr>
<td class="header">속성</td>
<td class="header">설명</td>
</tr>
<tr>
<td><code>childList</code></td>
<td>Set to <code>true</code> if additions and removals of the target node's child elements (including text nodes) are to be observed.</td>
</tr>
<tr>
<td><code>attributes</code></td>
<td>Set to <code>true</code> if mutations to target's attributes are to be observed.</td>
</tr>
<tr>
<td><code>characterData</code></td>
<td>Set to <code>true</code> if mutations to target's data are to be observed.</td>
</tr>
<tr>
<td><code>subtree</code></td>
<td>Set to <code>true</code> if mutations to target and target's descendants are to be observed.</td>
</tr>
<tr>
<td><code>attributeOldValue</code></td>
<td>Set to <code>true</code> if <code>attributes</code> is set to <code>true</code> and target's attribute value before the mutation needs to be recorded.</td>
</tr>
<tr>
<td><code>characterDataOldValue</code></td>
<td>Set to <code>true</code> if <code>characterData</code> is set to <code>true</code> and target's data before the mutation needs to be recorded.</td>
</tr>
<tr>
<td><code>attributeFilter</code></td>
<td>Set to an array of attribute local names (without namespace) if not all attribute mutations need to be observed.</td>
</tr>
</tbody>
</table>
<h2 id="사용_예">사용 예</h2>
<p>다음 예제는 <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">이 블로그 글</a>에서 발췌했습니다.</p>
<pre class="brush: js">// 대상 node 선택
var target = document.getElementById('some-id');
// 감시자 인스턴스 만들기
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// 감시자의 설정:
var config = { attributes: true, childList: true, characterData: true };
// 감시자 옵션 포함, 대상 노드에 전달
observer.observe(target, config);
// 나중에, 감시를 중지 가능
observer.disconnect();
</pre>
<h2 id="더_보기">더 보기</h2>
<ul>
<li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li>
<li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li>
<li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li>
<li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li>
</ul>
<h2 id="Specifications" name="Specifications">규격</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">규격</th>
<th scope="col">상태</th>
<th scope="col">의견</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td>
<td>{{ Spec2('DOM WHATWG') }}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('DOM4', '#mutationobserver', 'MutationObserver')}}</td>
<td>{{ Spec2('DOM4') }}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>크롬</th>
<th>파이어폭스 (Gecko)</th>
<th>인터넷 익스플로러</th>
<th>오페라</th>
<th>사파리</th>
</tr>
<tr>
<td>기본 지원</td>
<td>18 {{property_prefix("-webkit")}}<br>
26</td>
<td>{{CompatGeckoDesktop(14)}}</td>
<td>11</td>
<td>15</td>
<td>6.0 {{property_prefix("-webkit")}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>안드로이드</th>
<th>안드로이드용 크롬</th>
<th>파이어폭스 모바일 (Gecko)</th>
<th>IE 폰</th>
<th>오페라 모바일</th>
<th>사파리 모바일</th>
</tr>
<tr>
<td>기본 지원</td>
<td>4.4</td>
<td>18 {{property_prefix("-webkit")}}<br>
26</td>
<td>{{CompatGeckoMobile(14)}}</td>
<td>11 (8.1)</td>
<td>15</td>
<td>6 {{property_prefix("-webkit")}}<br>
7</td>
</tr>
</tbody>
</table>
</div>
|
