Saf JavaScript DOM manipülasyonu. Giriş dom nesnesi yöntemleri
Belge Nesne Modeli veya "DOM", web sayfalarının öğelerine erişmek için bir programlama arabirimidir. Temel olarak, bir sayfanın içeriğini, yapısını ve stillerini okumanıza ve değiştirmenize izin veren bir sayfa API'sidir. Nasıl çalıştığını ve nasıl çalıştığını görelim.
Bir web sayfası nasıl oluşturulur?
Orijinal HTML belgesini oluşturulmuş, stilize edilmiş ve etkileşimli bir sayfaya dönüştürme işlemine "Kritik Oluşturma Yolu" denir. Bu süreç, Kritik Oluşturma Yolunu Anlama'da anlattığım gibi, birden çok adıma bölünebilse de, bu adımlar kabaca iki adıma ayrılabilir. Birincisinde, tarayıcı nihayetinde sayfada neyin görüntüleneceğini belirlemek için belgeyi ayrıştırır ve ikincisinde tarayıcı oluşturur.
İlk adımın sonucu, "render ağacı" olarak adlandırılan şeydir. Ağacı işle Sayfada görüntülenecek HTML öğelerinin ve bunlarla ilişkili stillerin bir temsilidir. Bu ağacı oluşturmak için tarayıcının iki şeye ihtiyacı vardır:
- CSSOM, öğelerle ilişkili stillerin sunumu
- DOM, öğe gösterimi
DOM neyden yapılmıştır?
DOM, orijinal HTML belgesinin nesne temsilidir. Aşağıda göreceğimiz gibi bazı farklılıkları vardır, ancak özünde bir HTML belgesinin yapısını ve içeriğini çeşitli programlar tarafından kullanılabilecek bir nesne modeline dönüştürme girişimidir.
DOM nesnelerinin yapısı "düğüm ağacı" olarak adlandırılan şeyle temsil edilir. Buna denir, çünkü tek bir ebeveyne sahip, her biri yapraklara sahip olabilen birkaç alt dala ayrılan bir ağaç olarak düşünülebilir. Bu durumda, ana "öğe" kök öğedir, alt öğe "dallar" iç içe öğelerdir ve "yapraklar" öğeler içindeki içeriktir.
Bu HTML belgesini örnek olarak alalım:
Selam Dünya!
Nasılsın?
Bu belge aşağıdaki düğüm ağacı olarak gösterilebilir:
- html
- baş
- başlık
- İlk web sayfam
- başlık
- vücut
- h1
- Selam Dünya!
- p
- Nasılsın?
- h1
- baş
DOM ne değildir
Yukarıdaki örnekte, DOM, orijinal HTML belgesinin 1: 1 eşlemesi gibi görünmektedir. Ancak dediğim gibi farklılıklar var. DOM'un ne olduğunu tam olarak anlamak için ne olmadığına bir göz atmamız gerekiyor.
DOM, orijinal HTML'nin bir kopyası değildir
DOM bir HTML belgesinden oluşturulsa da, her zaman tam olarak aynı değildir. DOM'un orijinal HTML'den farklı olabileceği iki durum vardır.
1. HTML biçimlendirme hataları içerdiğinde
DOM, bir HTML belgesinin gerçek (yani önceden oluşturulmuş) öğelerine erişim için kullanılan arabirimdir. DOM oluşturma sürecinde, tarayıcının kendisi HTML kodundaki bazı hataları düzeltebilir.
Bu HTML belgesini bir örnek olarak düşünün:
Selam Dünya!
Belgede eksik öğeler
ve HTML için bir zorunluluktur. Ancak ortaya çıkan DOM ağacına bakarsak, bunun düzeltildiğini görebiliriz:- html
- baş
- vücut
- Selam Dünya!
2. DOM, Javascript tarafından değiştirildiğinde
Bir HTML belgesinin içeriğini görüntülemek için bir arayüz olmanın yanı sıra, DOM'un kendisi de değiştirilebilir.
Örneğin, Javascript kullanarak DOM için ek düğümler oluşturabiliriz.
Var newParagraph \u003d document.createElement ("p"); var paragraphContent \u003d document.createTextNode ("Ben" yeniyim! "); newParagraph.appendChild (paragraphContent); document.body.appendChild (newParagraph);
Bu kod DOM'u değiştirecek, ancak değişiklikler HTML belgesinde görünmeyecek.
DOM, tarayıcıda gördüğünüz şey değildir (yani, oluşturma ağacı)
Tarayıcı görünüm alanında, dediğim gibi DOM ve CSSOM'un bir kombinasyonu olan işleme ağacını görüyorsunuz. DOM ile oluşturma ağacı arasındaki fark, ikincisinin yalnızca nihayetinde ekranda görüntülenecek olan şeyden oluşmasıdır.
İşleme ağacı yalnızca görüntülenenlerle ilgilendiğinden, görsel olarak gizlenen öğeleri hariç tutar. Örneğin, stillere sahip öğeler görüntü yok.
Selam Dünya!
DOM öğesini içerecek
- html
- baş
- vücut
- h1
- Selam Dünya!
- p
- Nasılsın?
- h1
Ancak, işleme ağacı ve dolayısıyla görünüm alanında görünen şey bu öğeye dahil edilmeyecektir.
- html
- vücut
- h1
- Selam Dünya!
- h1
- vücut
DOM, DevTools'ta gösterilen şey değil
Bu fark biraz daha küçüktür çünkü DevTools Element Inspector, bir tarayıcıda sahip olduğumuz DOM'a en yakın yaklaşımı sağlar. Ancak DevTools denetçisi, DOM'da olmayan ek bilgiler içerir.
Bunun en iyi örneği CSS sözde öğeleridir. Seçiciler kullanılarak oluşturulan sözde öğeler :: önce ve :: sonraCSSOM ve render ağacının bir parçasıdır, ancak teknik olarak DOM'un bir parçası değildir. Bunun nedeni, DOM'un öğeye uygulanan stiller dahil değil, yalnızca orijinal HTML belgesinden oluşturulmasıdır.
Sözde öğeler DOM'un bir parçası olmasalar da, geliştirici öğe denetçimizde yer alırlar.
Özet
DOM, bir HTML belgesinin arayüzüdür. Görüntü alanında neyin oluşturulacağını belirlemenin ilk adımı olarak tarayıcılar tarafından ve sayfanın içeriğini, yapısını veya stilini değiştirmek için Javascript kodu tarafından kullanılır.
DOM genellikle DOM ağacı olarak adlandırılır çünkü düğümler adı verilen bir nesne ağacından oluşur. Belge Nesne Modelinin (DOM) ne olduğunu, belge nesnesine nasıl erişileceğini ve konsolu kullanarak özelliklerini nasıl değiştireceğinizi öğrendiniz, ayrıca HTML ve DOM kaynak kodu arasındaki farkı da öğrendik.
Bu eğiticide, JavaScript ve DOM ile çalışmak için ihtiyacınız olan HTML terminolojisini bulacak, bir ağacın ve DOM düğümlerinin ne olduğunu öğrenecek ve en yaygın düğüm türlerini nasıl belirleyeceğinizi öğreneceksiniz. DOM'u etkileşimli olarak değiştirmek için konsolda bir JavaScript programı da oluşturabilirsiniz.
HTML terminolojisi
HTML ve JavaScript terimlerini anlamak, DOM ile çalışmak için çok önemlidir. Temel terimlere hızlıca bir göz atalım.
Şu HTML öğesine bakın:
Ev
İndex.html'ye bir bağlantı olan bir bağlantı içerir.
- a - etiket
- href - öznitelik
- html - öznitelik değeri
- Ev - metin.
Açılış ve kapanış etiketleri arasındaki her şey bir HTML öğesi oluşturur.
Önceki öğreticiden index.html dosyasına geri dönelim:
Belge Nesnesi Modeli
JavaScript ile bir öğeye erişmenin en kolay yolu, id niteliğidir. Yukarıdaki bağlantıyı id \u003d "nav" ile index.html dosyamıza ekleyelim.
...
Belge Nesnesi Modeli
Ev
...
Sayfayı bir tarayıcı penceresinde yükleyin (veya yenileyin) ve kodun güncellendiğinden emin olmak için DOM'a bakın.
Ardından öğenin tamamına erişmek için getElementById () yöntemini kullanın. Konsolda şunları girin:
document.getElementById ("nav");
Ev
GetElementById () yöntemi tüm öğeyi alır. Şimdi, nav bağlantısına her erişmeniz gerektiğinde bu nesneyi ve yöntemi girmek zorunda kalmadan, çalışmayı kolaylaştırmak için öğeyi bir değişkene koyabilirsiniz.
let navLink \u003d document.getElementById ("nav");
NavLink değişkeni çapayı içerir. Burada özellikleri ve değerleri kolayca değiştirebilirsiniz. Örneğin, bağlantının konumunu değiştirmek için href niteliğini değiştirin:
navLink.href \u003d "https://www.wikipedia.org";
TextContent özelliğini yeniden atayarak da metni değiştirebilirsiniz:
navLink.textContent \u003d "Wikipedia’ya Git";
Şimdi, bu öğeyi konsolda görüntüleyerek veya Elements etiketini kontrol ederek, nasıl güncellendiğini görebilirsiniz.
navLink;
Wikipedia'ya gidin
Değişiklikler ön uca da yansıtılacaktır.
Sayfayı yenilemek tüm orijinal değerleri döndürür.
Bu noktada, bir öğeye erişmek için belge yöntemini nasıl kullanacağınızı, bir değişkene bir öğeyi nasıl atayacağınızı ve bir öğedeki özelliklerin ve değerlerin nasıl değiştirileceğini anlamalısınız.
DOM ağacı ve düğümleri
DOM'daki tüm öğeler düğümler olarak tanımlanır. Pek çok düğüm türü vardır, ancak en sık çalışacağınız üç ana düğüm vardır:
- Eleman düğümü
- Metin düğümü
- Yorum düğümü
Bir HTML öğesi DOM'daki bir öğe olduğunda, buna öğe düğümü denir. Bir elemanın dışındaki herhangi bir tek metin bir metin düğümüdür ve bir HTML yorumu bir yorum düğümüdür. Bu üç tür düğümün yanı sıra, belge nesnesinin kendisi, diğer tüm düğümlerin kök düğümü olan bir belge düğümüdür.
DOM, genellikle DOM ağacı olarak adlandırılan, iç içe geçmiş düğümlerden oluşan bir ağaç yapısından oluşur. Muhtemelen bir soy ağacının ne olduğunu biliyorsunuzdur - ebeveynlerden, çocuklardan ve yakın akrabalardan oluşan aile bağlarının şematik bir temsilidir. DOM'daki düğümler, diğer düğümlerle olan ilişkilerine göre üst ve alt olarak da adlandırılır.
Örneğin, bir nodes.html dosyası oluşturun. ona bir metin düğümü, yorum ve eleman düğümleri ekleyin.
Bir eleman düğümü
Bir metin düğümü.
Html öğe düğümü üst öğedir. head ve body, html'nin alt düğümleridir. body, üç alt düğüm içerir ve hepsi aynı düzeydedir - düğümün türü, iç içe geçme düzeyini etkilemez.
Not: HTML tarafından oluşturulan DOM ile çalışırken, HTML kaynak girintisi, DevTools Öğeleri sekmesinde görünmeyecek birçok boş metin düğümü oluşturur. Bağlantıda bunun hakkında daha fazla bilgi.
Düğüm tipini belirleme
Bir belgedeki her düğümün, nodeType özelliği aracılığıyla erişilen bir türü vardır. Mozilla Geliştirici Ağı, tüm düğüm türü sabitlerinin güncellenmiş bir listesine sahiptir. Aşağıda en yaygın düğüm türlerinin bir tablosu bulunmaktadır.
Geliştirici Araçlarındaki Öğeler sekmesinde, DOM'da herhangi bir satırı tıkladığınızda ve seçtiğinizde, yanında \u003d\u003d $ 0 değerinin göründüğünü fark edebilirsiniz. Bu, şu anda etkin olan öğeye erişmenin çok uygun bir yoludur.
Node.html konsolunda, body (h1) içindeki ilk öğeye tıklayın.
NodeType özelliğini kullanarak seçili düğümün türünü öğrenmek için konsolu kullanın.
$ 0.nodeType;
1
H1 öğesini seçerek, ELEMENT_NODE öğesine başvuran çıktı olarak 1 göreceksiniz. Aynısını diğer düğümlerle yapın ve sırasıyla 3 ve 8 döndürürler.
Bir öğeye nasıl erişileceğini bilerek, DOM'daki öğeleri vurgulamadan düğümün türünü görebilirsiniz.
document.body.nodeType;
1
NodeType'a ek olarak, bir metin veya yorum düğümünün değerini bulmak için nodeValue özelliğini ve bir öğenin etiketini almak için nodeName özelliğini de kullanabilirsiniz.
Olayları kullanarak DOM'u değiştirme
Şimdiye kadar, konsolda DOM'un nasıl değiştirileceğini gördünüz ve bu tür değişikliklerin geçici olduğu biliniyor; sayfa her yenilendiğinde tüm değişiklikler kaybolur. Konsolda sayfanın arka plan rengini güncellediniz. Arka plan rengini değiştiren etkileşimli bir düğme oluşturmak için bu eğitimde öğrendiklerinizi zaten bildiklerinizle birleştirmeyi deneyin.
İndex.html dosyanıza geri dönün ve kimliğine sahip bir düğme öğesi ekleyin. Ayrıca yeni js dizini js / scripts.js'deki yeni dosyaya bir bağlantı eklemeniz gerekir.
Belge Nesnesi Modeli
JavaScript'teki bir olay, bir kullanıcının gerçekleştirdiği bir eylemdir. Kullanıcı fareyi bir öğenin üzerine getirir, üzerine tıklar veya klavyedeki belirli bir tuşa tıklar - bunların hepsi olaylardır. Bu özel durumda, düğme, kullanıcı tıkladığında bir işlem yapmalıdır. Bunu yapmak için bir olay dinleyicisi eklemeniz gerekir. Bir scripts.js dosyası oluşturun ve bunu yeni bir js dizinine kaydedin. Dosyada, bir düğme elemanı tanımlamanız ve onu bir değişkene atamanız gerekir.
AddEventListener () yöntemini kullanarak, düğme tıklamaları dinleyecek ve tıklamadan sonra işlevini gerçekleştirecektir.
...
button.addEventListener ("tıklayın", () \u003d\u003e (
// eylem buraya gidecek
});
Fonksiyonun içine, arka plan rengini fuşya olarak değiştirmek için önceki kılavuzdaki kodu koymanız gerekir.
...
Komut dosyası şöyle görünüyor:
let button \u003d document.getElementById ("changeBackground");
button.addEventListener ("tıklayın", () \u003d\u003e (
document.body.style.backgroundColor \u003d "fuşya";
});
Dosyayı kaydedin ve kapatın. Tarayıcınızda index.html sayfasını yenileyin. Yeni butona tıkladığınızda sayfanın arka plan rengi değişecektir.
Etiketler :,Bu eğitimde DOM'un ne olduğuna, neden gerekli olduğuna ve nasıl oluşturulduğuna bakacağız.
DOM nedir?
Bir tarayıcı bir sayfa istediğinde ve sunucudan yanıt olarak HTML kaynağını aldığında, önce onu ayrıştırması gerekir. HTML kodunu analiz etme ve ayrıştırma sürecinde, tarayıcı buna dayalı bir DOM ağacı oluşturur.
Bu ve diğer birkaç işlemi tamamladıktan sonra, tarayıcı sayfayı oluşturmaya başlar. Elbette bu süreçte, orijinal HTML kodunu değil, oluşturduğu DOM ağacını zaten kullanıyor.
DOM, tarayıcının sunucudan aldığı HTML kodunu temel alarak bilgisayar belleğinde oluşturduğu bir belge nesne modelidir.
Basit bir ifadeyle, HTML sayfanın metnidir ve DOM, tarayıcının metni ayrıştırırken oluşturduğu bir dizi ilişkili nesnedir.
Chrome'da, tarayıcının aldığı sayfanın kaynak kodu Web Geliştirici Araçları panelinin Kaynak sekmesinde görüntülenebilir.
Chrome, oluşturduğu DOM ağacını görüntülemek için bir araca sahip değildir. Ancak bu DOM ağacının HTML kodu biçiminde bir temsili vardır, "Öğeler" sekmesinde mevcuttur. Elbette bu DOM temsili, bir web geliştiricisinin birlikte çalışması için çok daha uygundur. Bu nedenle, DOM'u bir ağaç yapısı olarak temsil edecek bir araç yoktur.
Bu modeldeki nesneler, belgenin kendisi de dahil olmak üzere HTML'deki hemen hemen her şeyden (etiketler, metin içeriği, yorumlar vb.) Oluşturulur. Modelde bu nesneler arasındaki bağlantılar, HTML öğeleri, birbirine göre kodda bulunur.
Bu durumda, belgenin oluşturulduktan sonra DOM'si değiştirilebilir. DOM değiştiğinde, tarayıcı sayfa görüntüsünü neredeyse anında yeniden çizer. Sonuç olarak, elimizde sayfa oluşturma her zaman DOM ile eşleşir.
DOM'u programlı olarak okumak ve değiştirmek için, tarayıcı bize DOM API veya başka bir deyişle programlı arayüz sağlar. Basit bir şekilde, DOM API, kullanabileceğimiz çok sayıda farklı nesne, bunların özellikleri ve yöntemlerinden oluşan bir settir. dOM okur ve değişir.
Çoğu durumda JavaScript, DOM ile çalışmak için kullanılır. bugün, bir tarayıcıda kodlanabilen tek programlama dilidir.
DOM API'ye neden ihtiyacımız var? JavaScript kullanarak sayfayı anında değiştirebilmemiz için buna ihtiyacımız var, yani. dinamik ve etkileşimli hale getirin.
DOM API bize (geliştiriciler) sayfadaki her şeyi değiştirebileceğimiz ve kullanıcıyla etkileşime girebileceğimiz çok sayıda yöntem sunar. Şunlar. bu programlama arayüzü, karmaşık arayüzler, formlar oluşturmamıza, kullanıcı eylemlerini işlememize, sayfadaki çeşitli öğeleri eklememize ve kaldırmamıza, içeriklerini, özelliklerini (niteliklerini) değiştirmemize ve çok daha fazlasını yapmamıza olanak tanır.
Artık web'de, komut dosyalarında DOM ile çalışmayan neredeyse hiç site yok.
Sayfanın HTML'si nelerden oluşur?
Belge nesne modelinin çalışmasına geçmeden önce, ilk olarak bir web sayfasının (HTML belgesi) kaynak kodunun ne olduğunu hatırlamanız gerekir.
Bir web sayfasının kaynak kodu, etiketler, öznitelikler, yorumlar ve metinden oluşur. Etiketler temel HTML sözdizimidir. Çoğu eşleştirilmiş. Bu durumda, biri açılış, diğeri kapanış olanıdır. Böyle bir etiket çifti bir HTML öğesi oluşturur. HTML öğelerinin ek parametreleri olabilir - öznitelikler.
Bir belgede, belirli bir biçimlendirme oluşturmak için bazı öğeler diğerlerinin içindedir. Sonuç olarak, bir HTML belgesi, iç içe geçmiş HTML öğeleri kümesi olarak düşünülebilir.
Örnek olarak, aşağıdaki HTML kodunu göz önünde bulundurun:
Makale başlığı
Makale bölümü
Makale içeriği
Bu kodda, kök öğe html'dir. İç içe geçmiş baş ve vücut elemanlarına sahiptir. Head öğesi başlığı içerir ve gövde h1 ve div öğelerini içerir. Div öğesi sırayla h2 ve p içerir.
Şimdi bir tarayıcının HTML kodunu temel alarak bir DOM ağacını nasıl oluşturduğuna bakalım.
Bir belgenin DOM ağacı nasıl oluşturulur?
Yukarıda açıklandığı gibi, tarayıcı HTML öğelerine ve sayfanın kaynak kodunun diğer varlıklarına dayalı bir ağaç oluşturur. Bu işlem sırasında, öğelerin iç içe geçmesini hesaba katar.
Sonuç olarak, tarayıcı sonuçta elde edilen DOM ağacını yalnızca çalışmasında kullanmakla kalmaz, aynı zamanda JavaScript aracılığıyla rahatça çalışabilmemiz için bize bir API sağlar.
DOM oluştururken, tarayıcı bu dilin HTML öğelerinden, metninden, yorumlarından ve diğer varlıklarından nesneler (DOM ağacının düğümleri) oluşturur.
Çoğu durumda, web geliştiricileri yalnızca HTML öğelerinden oluşan nesnelerle (düğümler) ilgilenir.
Aynı zamanda, tarayıcı yalnızca HTML öğelerinden nesneler oluşturmakla kalmaz, aynı zamanda koddaki her birinin diğeriyle nasıl ilişkili olduğuna bağlı olarak bunları belirli bağlantılarla birbirine bağlar.
Doğrudan bazı öğelerde bulunan öğeler, onunla ilişkili alt öğelerdir. Ve her biri için bir ebeveyndir. Ayrıca birbirleriyle ilgili tüm bu unsurlar kardeşlerdir (kardeşler).
Dahası, HTML'de herhangi bir öğenin her zaman bir ebeveyni vardır (doğrudan içinde bulunduğu HTML öğesi). HTML'de, bir öğenin birden çok üst öğesi olamaz. Tek istisna html öğesidir. Onun ebeveyni yok.
DOM ağacını tarayıcı oluştururken elde etmek için, tüm öğeleri birbirleriyle ilişkilerine göre "sıralamanız" yeterlidir.
DOM ağacı oluşturma, yukarıdan aşağıya doğru yapılır.
Bu durumda, DOM ağacının kökü her zaman belgenin kendisidir (belge düğümü). Dahası, ağaç HTML kodunun yapısına bağlı olarak oluşturulur.
Örneğin, yukarıda incelediğimiz HTML kodu aşağıdaki DOM ağacına sahip olacaktır:
Bu ağacın en üstünde belge düğümü bulunur. Bu düğüm html ile ilgilidir, onun alt noktasıdır. Html düğümü, html öğesi ( ...). Baş düğümler (
...) ve vücut ( ...) html'ye ana bağlantıya sahip. Birbirleriyle ilişkili olarak, kardeşler çünkü bir ebeveyni var. Baş düğüm, başlık ile ilişkilidir (lt; başlık\u003e ...), o onun çocuğu. H1 ve div düğümleri, ebeveyn olduğu gövde ile ilişkilidir. Div düğümü h2'ye bağlıdır (...
) ve p (), onlar onun çocukları.Ağaç, yukarıda belirtildiği gibi, belge nesnesiyle (düğüm) başlar. Buna karşılık, html öğesinden oluşan bir alt düğüme sahiptir ( ...). Baş unsurları (
...) ve vücut ( ...) html içindedir ve bu nedenle çocuklarıdır. Ayrıca, baş düğüm, başlığın ebeveynidir (lt; başlık\u003e ...). H1 ve div öğeleri vücudun içinde yuvalanmıştır, bu nedenle onlar onun çocuklarıdır. Div doğrudan h2 öğelerini içerir (...
) ve P (). Bu, her biri için div düğümünün ebeveyn olduğu anlamına gelir.HTML koduna dayalı olarak bir tarayıcıda DOM ağacı oluşturmak bu kadar kolaydır.
Neden bir DOM ağacının nasıl oluşturulduğunu bilmeniz gerekiyor? Birincisi, bir şeyi değiştirmek istediğiniz ortamın anlaşılmasıdır. İkinci olarak, DOM ile çalışırken çoğu eylem, gerekli öğeleri bulmaya (seçmeye) bağlıdır. DOM ağacının nasıl çalıştığını ve düğümler arasındaki bağlantıları bilmeden, içinde belirli bir öğeyi bulmak oldukça zor olacaktır.
Görev
Şekilde gösterilen DOM ağacına göre, HTML kodu oluşturun.
Konu gerçekten karmaşık. Ama dedikleri gibi, şeytan boyandığı kadar korkunç değildir. İşte burada, kırılması zor ceviz bana geliyor: bir tür “boyama” süper görevi olabildiğince sindirilebilir, ancak tamamen ilkel değil. Şimdiye kadar okuduğum tüm materyaller ya zaum ya da ilkel olma eğilimindedir.
DOM nedir
Kısaltma DOM duruyor Belge Nesnesi Modeli (Belge Nesnesi Modeli).
DOM HTML, XHTML ve XML belgelerine, yani HTML, XHTML ve XML etiketlerinin ve niteliklerinin yanı sıra CSS stillerinin programlama nesneleri olarak sunulması için bir programlama arayüzüdür. Hem JavaScript hem de diğer web programlama dilleri bu modelle çalışır.
Biraz tarih
4 seviye vardır DOM (0, 1, 2 ve 3).
Seviye 0(1996) dahil modeller DOM1. düzeyden önce var olan koleksiyonlar şunlardır: document.images, document.forms, document.layers ve document.all. Bu modeller resmi olarak teknik özellikler değildir. DOMyayınlanan W3C... Aksine, standardizasyon süreci başlamadan önce var olanlarla ilgili bilgi sağlarlar.
Seviye 1 (1997) ayrıca XML belgelerini işlemek için temel işlevleri de içeriyordu: tek tek düğümlerle çalışmanın birden çok yolu, XML işleme talimatlarıyla çalışma, vb.
Dışında, DOM Seviye 1, tek tek HTML öğelerini işleyebilen bir dizi özel arabirim içerir. Örneğin, HTML tabloları, formlar, seçme listeleri ve daha fazlasıyla çalışabilirsiniz.
İÇİNDE DOM düzey 2 (2002) birkaç yeni özellik ekledi.
Eğer DOM 1. seviye ad alanı desteğinden yoksundu, arayüzler DOM Düzey 2, XML belgeleri oluşturma ve işleme gereksinimleriyle ilişkili ad alanlarını yönetme yöntemlerini içerir.
Dışında, DOM 2. düzey etkinlikleri destekler.
Seviye 2, mevcut özellik seviyesidir DOM, Ancak W3C Seviye 3 spesifikasyonunun bazı bölümlerini önerir.
DOM düzey 3 işlevselliği artıran bir spesifikasyonun çalışma taslağıdır DOM Seviye 2. Spesifikasyonun bu sürümünün en önemli özelliklerinden biri, birden çok uzantı ile çalışabilme becerisidir. DOM.
Yazılım arayüzü ne anlama geliyor?
ingilizce kelime arayüz "iletişim alanı" olarak tercüme edilebilir. Kabaca bir bilgisayar, yalnızca iki şeyi anlar: boş bir parça ve dolu bir parça. Bir bilgisayar tarafından konuşulan dil, sonsuz sayıda farklı kombinasyon veren sonsuz bir sıfırlar ve birler dizisi olarak düşünülebilir.
Herhangi bir program kodu, bilgisayarın birlikte çalıştığı bu "sıfırların ve birlerin" programcı yorumu için anlaşılırdır. Dolayısıyla, herhangi bir programlama dili bir insan-makine arayüzüdür.
Tarayıcılar, diğer bilgisayar uygulamalarıyla aynı şekilde çalışır. HTML, XML, CSS, JavaScript, PHP, Perl, vs.'yi "sıfırlar ve birler" olarak yorumlarlar. Bu çok dillilikle çalışmak için ortak bir platforma ihtiyacınız var. Bu platform DOM - belirli bir programlama dilinden veya biçimlendirmeden bağımsız bir şartname. Web sayfalarının oluşturulmasıyla ilgili birçok popüler programlama dilinde kullanılabilen ve nesneleri anlayabilen ve yorumlayabilen bir arayüzdür. DOM.
DOM ve tarayıcılar
DOM ve JavaScript
JavaScript'te, nesnelerin hiyerarşik merdiveninin en üstünde DOM, bu arayüze bir tür "iletken" nesnedir belgeve nesneler DOM özellikleri, özelliklerinin özellikleri vb. haline gelir. Onlar da denir dOM düğümleri.
DOM düğümleri
İÇİNDE DOM 2. düzey 12 tür düğüme sahiptir. Her düğüm türünün arkasında DOM benzersiz ad ile sabit sabit. Düğümlerin çoğu birlikte çalışmak üzere tasarlanmıştır XML... Montajda HTML - JavaScriptuğraştığımız, sadece 5 tip kullanılabilir. Ancak bu "buzdağının görünen ucu" bile, bir veya iki seansta kapsanamayacak kadar "yayılan bir ağaçtır".
Spesifikasyonda tanımlandığı gibi eksiksiz düğüm tipi sabitleri seti W3C DOM (için mevcut düğümler HTML - JavaScript):
Sabit isim |
Değer |
Açıklama |
Düğüm.ELEMENT_NODE |
Öğe düğümü (belgenin kök öğesini döndürür, HTML belgeleri için bu HTML öğesidir) |
|
Düğüm.ATTRIBUTE_NODE |
Öznitelik düğümü (XML veya HTML belgesindeki bir öğenin özniteliğini döndürür) |
|
Metin düğümü (#text) |
||
Düğüm.CDATA_SECTION_NODE |
CDATA Bölüm Düğümü (XML: Karakter Verilerini Görüntülemek için Alternatif Sözdizimi) |
|
Düğüm.ENTITY_REFERENCE_NODE |
||
Node.ENTITY_NODE |
Bölüm düğümü |
|
Node.PROCESSING_INSTRUCTION_NODE |
XML Yönergesi Düğümü |
|
Node.COMMENT_NODE |
Yorum düğümü |
|
Düğüm.DOCUMENT_NODE |
Belge düğümü (belgenin içeriğine erişmenin ve bileşenlerini oluşturmanın temeli) |
|
Düğüm.DOCUMENT_TYPE_NODE |
Belge türü düğümü (verilen belgenin türünü, yani DOCTYPE etiketinin değerini döndürür) |
|
Düğüm.DOCUMENT_FRAGMENT_NODE |
Belge parçası düğümü (belge ağacının bir bölümünü çıkarmak, yeni bir belge parçası oluşturmak, bir düğümün alt öğesi olarak bir parça eklemek, vb.) |
|
Node.NOTATION_NODE |
Gösterim düğümü * |
* Gösterimler, ayrıştırılmamış bölümlerin biçimini, gösterim özniteliğine sahip öğelerin biçimini veya bir yönergenin adreslendiği uygulamayı tanımlayan adlardır. (Net değil? Ben de pek iyi değilim.)
DOM'daki belge yapısı
Tüm belge nesneleri DOM düğümleridir. Temel bir belgeyi düşünün:
< title>DOM"center"\u003e Başlık
Paragraf metni
İşte DOM ağacının bir diyagramı:
Her düğümün alt düğümleri olabilir (oklar diyagramda onlara götürür). Belge nesnesi - belge ağacının tabanı - aynı zamanda bir düğümdür, ancak bir üst düğüme sahip değildir ve diğer düğümlerin sahip olmadığı bir dizi özellik ve yönteme sahiptir. Bir alt düğümü vardır: eleman .
Eleman iki alt düğüm:
ve İçerdikleri tüm unsurların çocuk haline geldiği.Dikkat!
"Öğe" ve "etiket" eşanlamlı değildir. Etiket bir biçimlendirme işaretidir: iki farklı etikettir. Ve bir öğe, şu etiketlerle işaretlenmiş bir nesnedir: Paragraf metni
Elementler