---
title: MutationObserver
slug: Web/API/MutationObserver
tags:
  - API
  - DOM
  - Dönüşüm Gözlemcisi
translation_of: Web/API/MutationObserver
---
<p>{{APIRef("DOM")}}</p>

<p><code>MutationObserver</code>, geliştiricilere <a href="/en-US/docs/DOM">DOM</a>'da gerçekleşen değişimleri yakalanması ve bir tepki üretilmesi için bir yol sunar. <a href="/en-US/docs/DOM/Mutation_events">Dönüşüm (Mutasyon) Olayları</a>'nın yerini almak üzere tasarlanmış, DOM3 Events (Olaylar) belirlemesinde tanımlanmıştır.</p>

<h2 id="Kurucu_İşlerlik_(İşlev)">Kurucu İşlerlik (İşlev)</h2>

<h3 id="MutationObserver()"><code>MutationObserver()</code></h3>

<p>DOM dönüşüm gözlemcilerini (mutation observer) yaratmak için kullanılır.</p>

<pre class="syntaxbox">new MutationObserver(
  function geriyeCagri
);
</pre>

<h6 id="Yönergeler_(Parametreler)">Yönergeler (Parametreler)</h6>

<dl>
 <dt>geriyeCagri</dt>
 <dd>Her DOM dönüşümünde çağrılacak işlerliktir. Gözlemci, bu işlerliği iki yönergeyle çağıracaktır. İlki, {{domxref("MutationRecord")}} cinsinden nesneleri barındıran bir dizi; ikincisi <code>MutationObserver</code>'ın geçerli olan örneğidir.</dd>
</dl>

<h2 id="Nesne_İşlerlikleri">Nesne İşlerlikleri</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} hedef, <a href="#MutationObserverInit">MutationObserverInit</a> ayarlar );</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>Anımsatma</strong>: Hedefin {{domxref("Node")}} diye belirtilen cinsi,  <a href="https://nodejs.org/en/">NodeJS</a> ile karıştırılmamalıdır..</p>
</div>

<h3 id="observe()"><code>observe()</code></h3>

<p>Belirtilen DOM düğüm noktasının (node) yapısında meydana gelen değişimlerin bildirilebilmesi için <code>MutationObserver</code> nesnesini kaydettirir.</p>

<pre class="syntaxbox">void observe(
  {{domxref("Node")}} hedef,
  <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> ayarlar
);
</pre>

<h6 id="Yönergeler">Yönergeler</h6>

<dl>
 <dt><code>hedef</code></dt>
 <dd>DOM yapısındaki dönüşümlerin gözleneceği, {{domxref("Node")}} sınıfında bir DOM düğüm noktasıdır.</dd>
 <dt><code>ayarlar</code></dt>
 <dd>Hangi dönüşümlerin bildirileceğini belirten bir <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> sınıfı nesnesidir.</dd>
</dl>

<div class="note"><strong>Anımsatma:</strong> Bir DOM ögesine (element) gözlemci atamak tıpkı addEventListener ile bir olay belirtmek gibidir. Eğer aynı gözlemciyi aynı geriye çağrı (callback) işlerliğiyle birden fazla kez aynı ögeye atarsanız dönüşümlerde işlerlik ikişer-üçer kez çağrılmaz. Tek bir kez gerçekleşir. Fakat aynı gözlemciyi aynı ögeye farklı geriye çağrı işlerlikleriyle atarsanız bu durumda her dönüşümde belirtilen tüm geriye çağrı işlerlikleri yürütülür.</div>

<h3 id="disconnect()"><code>disconnect()</code></h3>

<p><code>MutationObserver</code> nesnesinin DOM dönüşümlerinden haber almasını durdurur.  <a href="#observe()"><code>observe()</code></a> işlerliği çağrılıncaya dek, nesnenin geriye çağrı (callback) işlerliği, DOM dönüşümlerinde çağrılmaz.</p>

<pre class="syntaxbox">void disconnect();
</pre>

<h3 id="takeRecords()"><code>takeRecords()</code></h3>

<p><code>MutationObserver</code> nesnesinin kayıt kuyruğunda tuttuğu kayıtları elde etmeye ve kuyruğu boşaltmaya yarar.</p>

<pre class="syntaxbox">Array takeRecords();
</pre>

<h6 id="Döndürülen_değer">Döndürülen değer</h6>

<p>{{domxref("MutationRecord")}} nesnelerinden oluşmuş bir dizidir.</p>

<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2>

<p><code>MutationObserverInit</code> aşağıdaki niteliklerin tanımlandığı nesnedir.</p>

<div class="note"><strong>Anımsatma:</strong> En azından <code>childList</code>, <code>attributes</code> veyâ <code>characterData</code> nitelikleri <code>true</code> olarak belirtilmelidir. Tersi durumda, "Geçersiz veyâ hatalı bir metin belirtildi. (An invalid or illegal string was specified)" hatasıyla karşılaşılabilir.</div>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Nitelik</td>
   <td class="header">Açıklama</td>
  </tr>
  <tr>
   <td><code>childList</code></td>
   <td>Eğer <code>true</code> olarak belirtilirse DOM öğesinde gerçekleştirilen öge veyâ düğüm noktası eklemeler-çıkarmalar gözlenir. Metin düğüm noktaları (text node) da bunun içerisindedir.</td>
  </tr>
  <tr>
   <td><code>attributes</code></td>
   <td>Eğer <code>true</code> olarak belirtilirse hedef ögenin niteliklerinde ortaya çıkan değişiklikler gözlenir.</td>
  </tr>
  <tr>
   <td><code>characterData</code></td>
   <td>Eğer <code>true</code> olarak belirtilirse hedef ögenin verisindeki değişimler gözlenir.</td>
  </tr>
  <tr>
   <td><code>subtree</code></td>
   <td>Eğer <code>true</code> olarak belirtilirse hedef ögenin ve altögelerinin dönüşümleri gözlenir.</td>
  </tr>
  <tr>
   <td><code>attributeOldValue</code></td>
   <td>Eğer <code>true</code> olarak belirtilirse niteliğin değişimden önceki değeri de kayıt altına alınır.</td>
  </tr>
  <tr>
   <td><code>characterDataOldValue</code></td>
   <td>Eğer <code>true</code> olarak belirtilirse ögenin verisinin değişimden önceki değeri de kaydedilir.</td>
  </tr>
  <tr>
   <td><code>attributeFilter</code></td>
   <td>Eğer tüm niteliklerin gözlenmesi gerekmiyorsa gözlenmesi istenen niteliklerin adlarının bir dizisi bu niteliğe atanır.</td>
  </tr>
 </tbody>
</table>

<h2 id="Örnek_Kullanım">Örnek Kullanım</h2>

<p>Aşağıdaki örnek <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">bu blog gönderisinden</a> alınmıştır. Ancak açıklamalar ve değişken adları değiştirilmiştir.</p>

<pre class="brush: js">// Hedef DOM ögesini seç.
var nHedef = document.getElementById('bir-kimlik-degeri');

// Bir gözlemci yarat.
var nGozlemci = new MutationObserver(function(nDonusumler) {

  // Öge dönüştüğünde, tüm dönüşümleri dolaş.
  nDonusumler.forEach(function(nDonusum) {

    // Sıradaki dönüşümü komut satırı ekranına yazdır.
    console.log(nDonusum.type);

  });

});

// Gözlemcinin ayarlarını belirle.
var nAyarlar = { attributes: true, childList: true, characterData: true };

// Gözlemciyi belirlenen ayarlarla belirtilen ögeye ata.
nGozlemci.observe(nHedef, nAyarlar);

// Daha sonraları, aşağıdaki komutla gözlemleme durdurulabilir.
nGozlemci.disconnect();
</pre>

<h2 id="Ayrıca_Okuyunuz">Ayrıca Okuyunuz</h2>

<ul>
 <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">Kısa bir inceleme</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">Daha ayrıntılı bir tartışma</a></li>
 <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">Chromium geliştiricisi Rafael Weinstein'ın ekran vidyosu</a></li>
 <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">Dönüşüm özet kütüphanesi</a></li>
</ul>

<h2 id="Specifications" name="Specifications">Belirlemeler</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Belirleme</th>
   <th scope="col">Durum</th>
   <th scope="col">Yorum</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td>
   <td>{{ Spec2('DOM WHATWG') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Tarayıcı_Desteği">Tarayıcı Desteği</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Durum</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Temel destek</td>
   <td>18 {{property_prefix("-webkit")}}<br>
    26</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(14)}}</td>
   <td>11</td>
   <td>15</td>
   <td>6.0 {{property_prefix("-webkit")}}<br>
    7</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Durum</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Temel destek</td>
   <td>4.4</td>
   <td>18 {{property_prefix("-webkit")}}<br>
    26</td>
   <td>{{CompatVersionUnknown}}</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>