DOM Düğüm Değişiklikleri için MutationObserver API Nasıl Kullanılır?

İşte bir senaryo: Rita, bir dergi yazarı çevrimiçi bir makale düzenliyor. Değişikliklerini kaydediyor ve mesajı görüyor “değişiklikler kaydedildi!” Tam o sırada, kaçırdığı bir yazım hatası olduğunu fark etti. O düzeltir ve tıklamak üzere “kayıt etmek”, patronundan öfkeli bir telefon aldığında.

Arama bittikten sonra ekrana geri döner, görür “değişiklikler kaydedildi!” bilgisayarını kapattı ve ofis dışında fırtınalar.

Hikaye anlatma konusundaki beceriksizliğimden ayrı olarak, bu kısa senaryodan, kalıcı mesajın ne gibi bir sorun çıkardığını fark ettik. Bu nedenle, gelecekte mümkün olduğunda bundan kaçınmaya karar veririz ve birini tıklatarak onaylamanızı isteyen birini kullanırız - veya kendi kendine kaybolur. İkinciyi hızlı mesajlar için kullanmak iyi bir fikirdir.

Bir öğenin sayfadan nasıl kaybolmasını sağladığımızı zaten biliyoruz, bu yüzden bu bir sorun olmamalı. Bilmemiz gereken şey ne zaman ortaya çıktı? Böylece makul bir zamandan sonra ortadan kaybolabiliriz.

MutationObserver API

Genel olarak, bir DOM öğesi (mesaj gibi) div) ya da başka herhangi bir düğüm değişikliği, bunu bilmemiz gerekir. Uzun süredir geliştiriciler, yerel bir API olmamasından dolayı bilgisayar korsanlarına ve çerçevelere güvenmek zorunda kaldılar. Ama bu değişmişti.

Şimdi sahibiz MutationObserver (daha önce Mutasyon Olayları). MutationObserver bir özellikleri ve yöntemleri kümesi olan bir JavaScript yerel nesnesidir. Bize izin veriyor herhangi bir düğümde bir değişiklik gözlemlemek DOM Elementi, Belge, Metin vb. gibi. Mutasyonla demek istiyoruz. bir düğümün eklenmesi veya çıkarılması ve bir düğümün niteliği ve verisinde değişiklik yapılması.

Daha iyi anlaşılması için bir örnek görelim. Önce, Rita'nın gördüğü gibi, düğme tıklatıldığında bir mesajın görüneceği bir kurulum yapacağız. O zaman iyi mutasyon gözlemcisi oluşturup o mesaj kutusuna bağla ve mesajı otomatik olarak gizlemek için mantığı kodla. anlayış?

Not: Bir noktada olabilir veya benden zaten kafanda sormuş olabilirsin “Neden sadece butonun içindeki mesajı gizlemiyorsunuz??” Benim örneğimde, bir sunucu ile çalışmıyorum, bu yüzden elbette müşteri mesajı göstermek ve çok kolay bir şekilde gizlemekle yükümlüdür. Ancak, Rita'nın düzenleme aracında olduğu gibi, sunucu DOM içeriğini değiştirmeye karar veren sunucuysa, istemci yalnızca uyanık kalabilir ve bekleyebilir.

Öncelikle, düğmesine tıkladığınızda mesajı gösterecek kurulumu oluşturduk.

 Mesajı Göster

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Değişiklikler kaydedildi!"; / * Düğme tıklatma olayı ekle * / document .querySelector ('düğme') .addEventListener ('klik', showMsg); showMsg () işlevi msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

İlk kurulumu çalıştırdığımızda, aşağıdakileri yapalım;

• Oluşturmak MutationObserver kullanıcı tanımlı bir geri çağırma işlevine sahip nesne (işlev, gönderide ileride tanımlanır). İşlev, tarafından gözlenen her mutasyonda yürütülür. MutationObserver.
• Tarafından gözlemlenecek mutasyonların türünü belirtmek için bir config nesnesi oluşturun. MutationObserver.
• Bağlayın MutationObserver 'msg' olan hedefe div örneğimizde.

(function startObservation () var / * 1) Bir MutationObserver nesnesi oluşturun * / observer = new MutationObserver (function (mutasyonlar) mutationObserverCallback (mutations);), / * 2) Bir yapılandırma nesnesi oluşturun * / config = childList: doğru; / * 3) Hepsini yapıştır * / observer.observe (msg, config); ) (); 

Aşağıdaki özelliklerin listesi yapılandırma mutasyonların farklı türlerini tanımlayan nesne. Örneğimizde, yalnızca mesaj metni için oluşturulmuş bir alt metin düğümüyle ilgilendiğimizden, öğelistesindebirden özellik.

Gözlenen mutasyon çeşitleri

Şimdi, gözlemlenen her mutasyona uygulanan bu geri arama işlevine.

fonksiyon mutationObserverCallback (mutasyonlar) / * İlk mutasyonu al * / var mutationRecord = mutasyonlar [0]; / * Bir alt düğüm eklendiyse, 2s * / if (mutationRecord.addedNodes [0]! == undefined) 'den sonra msj'yi gizleyin. SetTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Çünkü biz sadece bir mesaj ekliyoruz. div, Sadece gözlemlenen ilk mutasyonu alacağız ve bir metin düğümü yerleştirilmiş olup olmadığını kontrol edeceğiz. Eğer birden fazla değişiklik olursa, mutasyonlar dizi.

Her mutasyonda mutasyonlar dizi nesne tarafından temsil edilir MutationRecord aşağıdaki özelliklere sahip.

Özellikleri MutationRecord

Ve bu kadar. Son adım için kodu bir araya getirmeliyiz..

Tarayıcı Desteği

Referans

• “W3C DOM4 Mutasyonu Gözlemcisi.” W3C. Ağ. 19 Haziran 2015
• “MutationObserver.” Mozilla Geliştirici Ağı. Ağ. 19 Haziran 2015.