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

    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.


    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

    özellik Olarak ayarlandığında doğru
    öğelistesindebirden Hedefin çocuk düğümlerinin yerleştirilmesi ve çıkarılması gözlendi.
    Öznitellikler Hedefin özelliklerinde değişiklikler gözlendi.
    characterData Hedef verilerindeki değişiklikler gözlendi.

    Ş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

    özellik İade
    addedNodes Boş dizi veya eklenen düğüm dizisi.
    attributeName Eklenmiş, kaldırılmış veya değiştirilmiş özniteliğin boş veya adı.
    attributeNamespace Eklenen, kaldırılan veya değiştirilen özniteliğin boş veya ad alanı.
    nextSibling Eklenen veya kaldırılan düğümün boş veya sonraki kardeşi.
    OLDVALUE Özniteliğin veya verilerin boş veya önceki değeri değişti.
    previousSibling Eklenmiş veya kaldırılmış olan düğümün boş veya önceki kardeşi.
    removedNodes Boş dizi veya kaldırılan düğüm dizisi.
    hedef Tarafından hedeflenen düğüm MutationObserver
    tip Gözlenen mutasyon türü.

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

    Tarayıcı Desteği

    GÖRÜNTÜ: Kullanabilir miyim. 19 Haziran 2015

    Referans

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