HTML DOM Yapısı (Document Object Model)

Web sayfaları tasarlanırken HTML elamanları alt alta veya iç içe olarak tasarlanabilir. Bazı nesneler diğer HTML elemanlarını altında veya içinde bulunabilirler. Bu şekilde arka arkaya devam eden hiyerarşik bir yapı oluşacaktır. Bu yapı DOM (Document Object Model) yapısı denir.

DOM yapısı ile CSS ve Javascript seçicilerinin HTML elemanlarına kolayca ulaşması sağlanır ve istenilen değişiklikler(manipulasyon-eleman ekleme silme-, stil değişikliği işlemleri vb.) basitçe yapılabilir.

DOM yapısında her düzeyin altında bir alt düzey bulunabilir. Bu düzeylerde de nesneler bulunur. Her alt düzeydeki nesneler bir üst düzeydeki nesnenin çocuğu, iki seviye üstteki nesnenin ise torunu konumundadırlar. Çocuk ve torun kavramları DOM yapısındaki hiyerarşiyi anlamak kolay bir yoldur.

Aşağıdaki görünen yapının html kodları şu şekildedir.

<p> <a href="http://www.frontendokulu.com" target="_blank">frontendokulu</a> <strong>Kalın Yazı</strong> - kalın yazı ve link aynı seviye de ve p nin çocukları durumundadır. - </p> <ul> <li>Liste Elemanı 1</li> <li>Liste Elemanı 2 <em>Eğik Yazı</em><span>Span</span> - Span ve eğik yazı liste elemanı 2 nin altında ve ul nin torunları durumundadır. - </li> </ul>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com