Ayrıntılarda Belge Nesne Modeli'ni (DOM) Anlama

Hepimiz duyduk DOM, veya Belge Nesnesi Modeli, JavaScript ile ilgili zaman zaman söz eder. DOM web geliştirmede oldukça önemli bir kavramdır. O olmadan, yapamazdık HTML sayfalarını dinamik olarak değiştir tarayıcıda.

DOM sonuçlarını daha iyi anlamak için öğrenmek ve anlamak erişme, değiştirme ve izleme HTML sayfasının farklı unsurları. Belge Nesne Modeli de bize yardımcı olabilir komut dosyası yürütme zamanında gereksiz artışları azaltmak.

Veri yapısı ağaçları

DOM'nun ne olduğu, nasıl oluştuğu, nasıl olduğu ve onun içinde ne olduğu hakkında konuşmadan önce, ağaçlar hakkında bilgi sahibi olmanızı istiyorum. İğne yapraklı ve yaprak döken tür değil ama veri yapısı ağacı.

Tanımını basitleştirirsek, veri yapıları kavramını anlamak çok daha kolaydır. Veri yapısı hakkında verilerinizi düzenlemek. Evet, sadece düz eski düzenleme, evinizdeki mobilyaları veya bir kitaplıktaki kitaplarınızı veya tabağınızda yemek yemek için sahip olduğunuz tüm farklı yemek gruplarını düzenleyeceğiniz gibi sizin için anlamlı kılmak.

Tabii ki, hepsi bir veri yapısına değil, her şeyin başladığı yer orasıdır. Bu “aranjman” her şeyin merkezinde. DOM'de de oldukça önemlidir. Ama henüz DOM hakkında konuşmuyoruz, o yüzden seni bir yönlendirmeye yönlendireyim. aşina olabileceğiniz veri yapısı: diziler.

Diziler ve ağaçlar

Diziler var endeksleri ve uzunluk, onlar yapabilir çok boyutlu, ve daha birçok özelliğe sahip. Diziler hakkında bu şeyleri bilmek ne kadar önemliyse, şu anda kendimizi bununla rahatsız etmeyelim. Bizim için bir dizi oldukça basittir. O zaman sen bir çizgide farklı şeyler düzenlemek.

Benzer şekilde, ağaçları düşünürken, diyelim ki işleri birbirinin altına koymak, tepede tek bir şeyle başlayarak.

Şimdi, tek sıralı ördekleri öncekilerden alabilirsin., dik çevir, ve söyle bana “şimdi, her ördek başka bir ördek altında”. O zaman bir ağaç mı? Bu.

Verilerinizin ne olduğuna veya onu nasıl kullanacağınıza bağlı olarak, ağacınızdaki en üstteki veriler ( kök) olan bir şey olabilir çok önemli ya da sadece orada olan bir şey altındaki diğer öğeleri.

Her iki durumda da, bir ağaç veri yapısındaki en üstteki öğe çok önemli bir şey yapar. Bir yer sağlar Ağaçtan çıkarmak istediğimiz bilgileri aramaya başla.

DOM'un anlamı

DOM kısaltması Belge Nesnesi Modeli. Döküman HTML (XML) belgesine işaret eder hangisi bir nesne olarak temsil. (JavaScript’te her şey yalnızca bir nesne olarak gösterilebilir!)

Model tarayıcı tarafından oluşturulan bu bir HTML belgesini alır ve onu temsil eden bir nesne oluşturur. Bu nesneye JavaScript ile erişebiliriz. Ve bu nesneyi HTML belgesini değiştirmek ve kendi uygulamalarımızı oluşturmak için kullandığımızdan, DOM temelde bir API.

DOM ağacı

JavaScript kodunda, HTML belgesi nesne olarak temsil edilir. Bu belgeden okunan tüm veriler ayrıca nesne olarak kaydedildi, birbirlerinin altına yerleştirilmişler (çünkü daha önce söylediğim gibi, JavaScript’te her şey yalnızca nesne olarak gösterilebilir).

Yani, bu temelde DOM verilerinin fiziksel düzenlemesidir: her şey nesne olarak düzenlenmiş. Ancak, mantıksal olarak, bu bir ağaç.

DOM Ayrıştırıcısı

Her tarayıcı yazılımının adı verilen bir program vardır. DOM Ayrıştırıcı bu sorumlu bir HTML belgesini DOM içine ayrıştırma.

Tarayıcılar bir HTML sayfasını okur ve verilerini DOM'yi oluşturan nesnelere dönüştürür. Bu JavaScript DOM nesnelerinde bulunan bilgiler, DOM ağacı olarak bilinen bir veri yapısı ağacı olarak mantıksal olarak düzenlenir..

HTML’den DOM ağacına veri ayrıştırma

Basit bir HTML dosyası alın. Bu vardır kök elemanı . Onun alt elemanlar Hangi ve , her birinin kendine ait birçok alt öğesi vardır..

Yani aslında, tarayıcı HTML belgesindeki verileri okur, buna benzer bir şey:

Ve, onları bir DOM ağacına yerleştirir bunun gibi:

DOM ağacındaki her HTML öğesinin (ve ona ait içeriğin) gösterimi, düğüm. kök düğümü düğümü .

DOM arayüzü JavaScript'te denir belge (çünkü bu HTML belgesinin temsilidir). Böylece bir HTML belgesinin DOM ağacına erişiyoruz içinden belge arayüzey JavaScript’te.

Sadece erişemiyoruz, aynı zamanda HTML belgesini değiştirmek DOM üzerinden. Bir web sayfasına eleman ekleyebilir, kaldırabilir ve güncelleyebiliriz. DOM ağacındaki düğümleri her değiştirdiğimizde veya güncellediğimizde, web sayfasına yansıtır.

Düğümler nasıl tasarlanır?

Daha önce bir HTML belgesindeki her veri parçasının JavaScript'te nesne olarak kaydedildi. Peki, bir nesne olarak kaydedilen verilerin mantıksal olarak bir ağaç olarak düzenlenmesi?

Bir DOM ağacının düğümleri belirli özelliklere veya özelliklere sahiptir. Bir ağaçtaki hemen hemen her düğüm bir ana düğüme sahip (üstündeki düğüm), çocuk düğümleri (altındaki düğümler) ve kardeşler (aynı ebeveyne ait diğer düğümler). Bu sahip aile bir düğümün üstünde, altında ve çevresinde, onu bir bir ağacın parçası.

Her düğümün bu aile bilgisi o düğümü temsil eden nesnede özellikler olarak kaydedildi. Örneğin, çocuklar bu düğümün alt öğelerinin bir listesini taşıyan, böylece alt öğelerini mantıksal olarak düğüm altında düzenleyen bir düğümün özelliğidir..

DOM manipülasyonunu aşırı yapmaktan kaçının

DOM’i güncellemeyi yararlı bulabildiğimiz kadarıyla (bir web sayfasını değiştirmek için), Aşırıya kaçmak.

Diyelim ki, bir

JavaScript kullanarak bir web sayfasında. Yapmanız gereken şey karşılık gelen DOM düğümü nesnesine erişme ve color özelliğini güncelleyin. Bu ağacın geri kalanını etkilememelidir (ağaçtaki diğer düğümler).

Ama ya istersen bir düğümü ağaçtan kaldırma veya bir tane ekle? Bütün ağaç yeniden düzenlenmesi gerekebilir, düğüm kaldırıldı veya ağaca eklendi. Bu pahalı bir iştir. Bu işin yapılması zaman ve tarayıcı kaynağını alır.

Mesela diyelim, istersiniz bir tabloya beş fazladan satır ekleyin. Her satır için, yeni düğümler oluşturulduğunda ve DOM’e eklendiğinde, ağaç her zaman güncellenir, toplamda beş güncellemeye ekleme.

Bunu kullanarak bunu önleyebiliriz. DocumentFragment arayüz. Bunu yapabilecek bir kutu olarak düşünün beş satırı da tut ve ağaca eklenecek. Bu şekilde beş satır tek bir veri parçası olarak eklendi tek tek değil, ağaçta yalnızca bir güncellemeye yol açıyor.

Bu yalnızca öğeleri kaldırırken veya eklediğimizde olmaz, ancak bir öğeyi yeniden boyutlandırma yeniden boyutlandırılan öğenin çevresindeki diğer öğelere ihtiyaç duyması nedeniyle diğer düğümleri de etkileyebilir. boyutlarını ayarla. Bu nedenle, diğer tüm öğelerin karşılık gelen düğümlerinin güncellenmesi gerekecek ve HTML öğeleri yeni kurallara göre yeniden oluşturulacak.

Aynı şekilde, bir web sayfasının düzeni bir bütün olarak etkilendiğinde, web sayfasının bir kısmı veya tamamı yeniden işlenebilir. Bu işlem olarak bilinir yeniden düzenle. amacıyla aşırı akmayı önlemek DOM’u çok fazla değiştirmediğinizden emin olun. DOM’deki değişiklikler, bir web sayfasında Yeniden Akıma neden olabilecek tek şey değildir. Tarayıcıya bağlı olarak, diğer faktörler de buna katkıda bulunabilir.

Sarma

İşleri sararken, DOM bir ağaç olarak görselleştirilmiş HTML belgesinde bulunan tüm öğelerden oluşur. Fiziksel (bir dijitalin alabileceği kadar fiziksel), bu bir iç içe JavaScript nesneleri kümesi hangi özellik ve yöntemlerin mümkün kılan bilgiyi sakladığını mantıksal olarak onları bir ağaca düzenleyin.