13 Ocak 2021

DOM Yapısı

Bir HTML belgesinin omurgası etiketlerdir.

Document Object Model (DOM)’ a göre, her HTML etiketi bir nesnedir. İç içe geçmiş etiketlere, çevreleyen etiketin “alt öğeleri” denir.

Bir etiketin içindeki metin de bir nesnedir…

Tüm bu nesnelere JavaScript kullanılarak erişilebilir.

Bir DOM örneği

Örneğin, bu belge için DOM’u inceleyelim:

<!DOCTYPE HTML>
<html>
<head>
  <title>About elks</title>
</head>
<body>
  The truth about elks.
</body>
</html>

DOM, HTML’i etiketlerin ağaç yapısı olarak temsil eder. Şu şekilde görünür:

Yukarıdaki resimde, eleman düğümlerine tıklayabilirsiniz ve çocukları açılacak / daralacaktır…

Etiketler eleman düğümleri veya sadece eleman olarak adlandırılır. İç içe geçmiş etiketler, çevreleyenlerin alt öğeleri olur. Sonuç olarak bir element ağacımız var: <html> burada köktür, sonra <head> ve <body> gelir bunlar ise html’nin çocuklarıdır vb.

Öğelerin içindeki metin, #text olarak etiketlenmiş metin düğümleri oluşturur. Bir metin düğümü yalnızca bir dize içerir. Alt öğeleri olmayabilir ve her zaman ağacın bir yaprağıdır.

Örneğin, <title> etiketinde "About elks" metni bulunur.

Lütfen metin düğümlerindeki özel karakterlere dikkat edin:

  • yeni satır: (Javascript’te bilineni: \n)
  • boşluk:

Boşluklar ve satır sonları tamamen geçerli karakterlerdir, metin düğümleri oluştup DOM’un bir parçası olurlar. Dolayısıyla, örneğin yukarıdaki örnekte “” etiketi, “” dan önce bazı boşluklar içerir ve bu metin bir “#text” düğümü haline gelir (yalnızca bir satırsonu ve bazı boşluklar içerir).</p> <p>Yalnızca iki üst düzey istisna vardır:</p> <ol> <li>“<head>” öncesindeki boşluklar ve satırsonları tarihsel nedenlerden dolayı göz ardı edilir,</li> <li>“</body>” 'den sonra bir şey koyarsak, HTML spesifikasyonu tüm içeriğin “<body>” içinde olmasını gerektirdiğinden, bu otomatik olarak sonunda “body” nin içine taşınır. Dolayısıyla “</body>” öğesinden sonra boşluk kalmayabilir…</li> </ol> <p>Diğer durumlarda her şey basittir; eğer belgede boşluklar varsa (tıpkı herhangi bir karakter gibi), o zaman bunlar DOM’da metin düğümleri olurlar ve eğer onları kaldırırsak, o zaman kaybolacaklardır.</p> <p>Yalnızca boşluk içeren metin düğümleri yoktur:</p> <div id="webpbvi4pw" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-markup"><code><!DOCTYPE HTML> <html><head><title>About elks</title></head><body>The truth about elks.</body></html></code></pre> </div> </div> </div><div class="domtree"></div> <script> let node2 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elks"}]}]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"The truth about elks."}]}]} drawHtmlTree(node2, 'div.domtree', 690, 210); </script> <div class="important important_smart"> <div class="important__header"><span class="important__type">Edge spaces and in-between empty text are usually hidden in tools</span></div> <div class="important__content"><p>DOM ile çalışan tarayıcı araçları (yakında ele alınacaktır) genellikle metnin başında / sonunda boşluklar ve etiketler arasında boş metin düğümleri (satır sonları) göstermez.</p> <p>Bunun nedeni, esas olarak HTML’yi dekore etmek için kullanılmaları ve gösterilme şeklini etkilememeleridir (çoğu durumda).</p> <p>Daha fazla DOM resimlerinde, işleri kısa tutmak için bazen ilgisiz oldukları yerlerde bunları çıkarırız.</p> </div></div> <h2><a class="main__anchor" name="otomatik-dzeltme" href="#otomatik-dzeltme">Otomatik düzeltme</a></h2><p>Tarayıcı hatalı biçimlendirilmiş HTML ile karşılaşırsa, DOM oluştururken bunu otomatik olarak düzeltir.</p> <p>Örneğin, en üstteki etiket her zaman <html> olur. Belgede olmasa bile – DOM’da bulunacak, tarayıcı onu oluşturacaktır. Aynısı <body> için de geçerlidir .</p> <p>Örnek olarak, HTML dosyası tek bir kelimeyse yani “Hello” gibi birşey ise , tarayıcı onu <html> içine saracak, gerekli olan <body> ve <head> kısmını ekleyecek ve DOM şu şekilde olacaktır:</p> <div class="domtree"></div> <script> let node3 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Hello"}]}]} drawHtmlTree(node3, 'div.domtree', 690, 150); </script> <p>DOM oluşturulurken, tarayıcılar belgedeki hataları otomatik olarak işler, etiketleri kapatır vb.</p> <p>Kapatılmamış etiketlere sahip böyle bir belge:</p> <div id="irklucwqup" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-markup"><code><p>Hello <li>Mom <li>and <li>Dad</code></pre> </div> </div> </div><p>…Tarayıcı etiketleri okurken ve eksik kısımları geri yüklerken normal bir DOM haline gelecektir:</p> <div class="domtree"></div> <script> let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"P","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Hello"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Mom"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"and"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Dad"}]}]}]} drawHtmlTree(node4, 'div.domtree', 690, 360); </script> <div class="important important_warn"> <div class="important__header"><span class="important__type">Tablolar her zaman <code><tbody></code> e sahiptir</span></div> <div class="important__content"><p>İlginç “özel durum” tablolardır. DOM şartnamesine göre <tbody> 'ye sahip olmaları gerekir, ancak HTML metni bunu (resmi olarak) ihmal edebilir. Ardından tarayıcı DOM içinde otomatik olarak <tbody> oluşturur.</p> <p>HTML gösterimi:</p> <div id="4g5czp5o7b" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-markup"><code><table id="table"><tr><td>1</td></tr></table></code></pre> </div> </div> </div><p>DOM yapısı olarak:</p> <div class="domtree"></div> <script> let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType":1,"children":[{"name":"TR","nodeType":1,"children":[{"name":"TD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"1"}]}]}]}]}; drawHtmlTree(node5, 'div.domtree', 600, 200); </script> <p>Gördünüz mü ? Aniden <code><tbody></code> ortaya çıktı. Sürprizlerden kaçınmak için tablolarla çalışırken bunu aklınızda bulundurmalısınız.</p> </div></div> <h2><a class="main__anchor" name="dier-dm-trleri" href="#dier-dm-trleri">Diğer düğüm türleri</a></h2><p>Sayfaya daha fazla etiket ve bir yorum ekleyelim:</p> <div id="jtkzhcbrca" data-trusted="1" class="code-example" data-highlight="[{"start":6,"end":6}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-markup"><code><!DOCTYPE HTML> <html> <body> The truth about elks. <ol> <li>An elk is a smart</li> <!-- comment --> <li>...and cunning animal!</li> </ol> </body> </html></code></pre> </div> </div> </div><div class="domtree"></div> <script> let node6 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n The truth about elks.\n "},{"name":"OL","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"An elk is a smart"}]},{"name":"#text","nodeType":3,"content":"\n "},{"name":"#comment","nodeType":8,"content":"comment"},{"name":"#text","nodeType":3,"content":"\n "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"...and cunning animal!"}]},{"name":"#text","nodeType":3,"content":"\n "}]},{"name":"#text","nodeType":3,"content":"\n \n"}]}]}; drawHtmlTree(node6, 'div.domtree', 690, 500); </script> <p>Burada yeni bir ağaç düğümü türü görüyoruz <code>#comment</code> olarak etiketlenmiş bir yorum düğümü.</p> <p>DOM’a neden bir yorum eklendiğini düşünebiliriz. Yorumlar sayfayı hiçbir şekilde etkilemez. Ancak bir kural vardır – HTML’de bir şey varsa, o zaman da DOM ağacında olmalıdır.</p> <p><strong>HTML’deki her şey, hatta yorumlar bile DOM’un bir parçası haline gelir.</strong></p> <p>HTML’nin en başındaki <! DOCTYPE …> yönergesi bile bir DOM düğümüdür. DOM ağacında <html> 'den hemen öncedir. Bu düğüme dokunmayacağız, hatta bu nedenle onu diyagramlar üzerine çizmeyeceğiz, ama oradadır.</p> <p>Tüm belgeyi temsil eden <code>document</code> nesnesi, resmi olarak bir DOM düğümüdür</p> <p><a href="https://dom.spec.whatwg.org/#node">12 düğüm tipi</a> vardır. Pratikte genellikle 4 tanesiyle çalışırız:</p> <ol> <li><code>document</code> – DOM’a “giriş noktasıdır”.</li> <li>eleman düğümleri – HTML etiketleri, ağaç yapı taşları.</li> <li>metin düğümleri – metin içerir.</li> <li>yorumlar – bazen bilgileri oraya koyabiliriz, kullanıcıya gösterilmez, ancak JS bunu DOM’dan okuyabilir.</li> </ol> <h2><a class="main__anchor" name="kendin-gr" href="#kendin-gr">Kendin gör</a></h2><p>DOM yapısını gerçek zamanlı görmek için, deneyin <a href="http://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM Viewer</a>. Sadece belgeyi yazın, DOM’u anında gösterecektir</p> <h2><a class="main__anchor" name="tarayc-gelitirici-aralarnda-grn" href="#tarayc-gelitirici-aralarnda-grn">Tarayıcı geliştirici araçlarında görün</a></h2><p>DOM’u keşfetmenin bir başka yolu da tarayıcı geliştirici araçlarını kullanmaktır. Aslında, geliştirirken kullandığımız şey bu.</p> <p>Bunu yapmak için web sayfasını açın <a href="/article/dom-nodes/elks.html">elks.html</a>, tarayıcı geliştirici araçlarını açın ve Öğeler sekmesine geçin.</p> <p>Böyle görünmeli:</p> <figure><div class="image" style="width:689px"> <div class="image__ratio" style="padding-top:54.71698113207547%"></div> <img src="/article/dom-nodes/elks.png" alt="" width="689" height="377" class="image__image"> </div></figure><p>DOM’u görebilir, öğelere tıklayabilir, ayrıntılarını görebilir ve daha fazlasını yapabilirsiniz.</p> <p>Geliştirici araçlarındaki DOM yapısının basitleştirildiğini lütfen unutmayın. Metin düğümleri sadece metin olarak gösterilir. Ve “boş” (yalnızca boşluk) metin düğümleri de yoktur. Sorun değil, çünkü çoğu zaman eleman düğümleriyle ilgileniyoruz.</p> <p>Sol üst köşedeki düğmeyi tıklamak <span class="devtools" style="background-position:-328px -124px"></span>, bir fare (veya diğer işaretçi aygıtları) kullanarak web sayfasından bir düğüm seçmeye ve onu “incelemeye” (Öğeler sekmesinde ona kaydırın) izin verir. Bu, büyük bir HTML sayfamız (ve buna karşılık gelen devasa DOM) olduğunda ve içindeki belirli bir öğenin yerini görmek istediğinde harika çalışıyor.</p> <p>Bunu yapmanın başka bir yolu da bir web sayfasına sağ tıklayıp içerik menüsünde “İncele” yi seçmektir.</p> <figure><div class="image" style="width:690px"> <div class="image__ratio" style="padding-top:59.42028985507246%"></div> <img src="/article/dom-nodes/inspect.png" alt="" width="690" height="410" class="image__image"> </div></figure><p>Araçların sağ tarafında aşağıdaki alt sekmeler bulunur:</p> <ul> <li><strong>Stiller(Styles)</strong> – CSS’nin, yerleşik kurallar (gri) dahil olmak üzere belirli öğelere kurallar uygulandığını görebiliriz. Aşağıdaki kutunun boyutları / kenar boşlukları / dolgular dahil hemen hemen her şey yerinde düzenlenebilir.</li> <li><strong>Hesaplanmış (Computed)</strong> – öğeye uygulanan özellikleri CSS’de görmek için: her özellik için onu veren bir kural görebiliriz (CSS mirası vb. dahil).</li> <li><strong>Olay Dinleyicileri (Event Listeners)</strong> – DOM öğelerine eklenen olay dinleyicilerini görmek için (serinin sonraki bölümünde bunları ele alacağız). …ve bunun gibi.</li> </ul> <p>Bunları incelemenin en iyi yolu, öğeye tıklamaktır. Değerlerin çoğu yerinde düzenlenebilir.</p> <h2><a class="main__anchor" name="konsol-ile-etkileim" href="#konsol-ile-etkileim">Konsol ile etkileşim</a></h2><p>DOM’u keşfederken, ona JavaScript de uygulamak isteyebiliriz. Örneğin: bir düğüm alın ve sonucu görmek için onu değiştirmek için bir kod çalıştırın. Öğeler sekmesi ve konsol arasında gezinmek için birkaç ipucu.</p> <ul> <li>Öğeler sekmesinde ilk <code><li></code> öğesini seçin.</li> <li><kbd class="shortcut">Esc</kbd> tuşuna basın – konsolu Elements sekmesinin hemen altında açacaktır.</li> </ul> <p>Artık son seçilen öğe <code>$0</code> olarak mevcut, önceden seçilen öğe <code>$1</code> vb.</p> <p>Onlara komutlar çalıştırabiliriz. Örneğin, <code>$0.style.background = 'red'</code> seçilen liste öğesini şu şekilde kırmızı yapar:</p> <figure><div class="image" style="width:692px"> <div class="image__ratio" style="padding-top:71.09826589595376%"></div> <img src="/article/dom-nodes/domconsole0.png" alt="" width="692" height="492" class="image__image"> </div></figure><p>Diğer taraftan, eğer konsoldaysak ve bir DOM düğümünü referans alan bir değişkenimiz varsa, o zaman komutu <code>inspect(node)</code> Elementler bölmesinde görmek için kullanabiliriz. Ya da bunu konsola çıkarabilir ve <code>document.body</code> kısmını aşağıdaki gibi “yerinde” keşfedebiliriz: <img src="/article/dom-nodes/domconsole1.png" alt="" width="695" height="493"></p> <p>Bu elbette hata ayıklama amaçlıdır. Bir sonraki bölümde DOM’a JavaScript kullanarak erişip değiştireceğiz.</p> <p>Tarayıcı geliştirici araçları, geliştirmede harika bir yardımcıdır: DOM’u keşfedebilir, bir şeyler deneyebilir ve neyin yanlış gittiğini görebiliriz.</p> <h2><a class="main__anchor" name="zet" href="#zet">Özet</a></h2><p>Bir HTML / XML belgesi tarayıcının içinde DOM ağacı olarak temsil edilir.</p> <ul> <li>Etiketler eleman düğümleri haline gelir ve yapıyı oluşturur.</li> <li>Metin, metin düğümleri haline gelir.</li> <li>HTML’deki her şeyin yeri, hatta yorumlar da DOM’da vardır.</li> </ul> <p>DOM’u incelemek ve manuel olarak değiştirmek için geliştirici araçlarını kullanabiliriz. Burada, başlangıç için en çok kullanılan ve önemli eylemlerin temellerini ele aldık. Chrome Geliştirici Araçları hakkında kapsamlı bir dokümantasyon vardır <a href="https://developers.google.com/web/tools/chrome-devtools">https://developers.google.com/web/tools/chrome-devtools</a>. Bu araçları öğrenmenin en iyi yolu, onlara tıklamak, menüleri okumaktır. Çoğu seçenek tıklamaya açıktır. Daha sonra, onları genel olarak tanıdığınızda, belgeleri okuyun ve gerisini alın.</p> <p>DOM düğümleri, aralarında gezinmeye, değiştirmeye, sayfada dolaşmaya ve daha pek çok şeye izin veren özelliklere ve yöntemlere sahiptir. Sonraki bölümlerde onlara değineceğiz.</p> </div></article></div><div class="page__nav-wrap"><a class="page__nav page__nav_prev" href="/browser-environment" data-tooltip="Tarayıcı Ortamı, Özellikleri"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Önceki ders</span></a><a class="page__nav page__nav_next" href="/dom-navigation" data-tooltip="Walking the DOM"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">Bir sonraki ders</span></a></div><div class="article-tablet-foot tablet-only"><div class="article-tablet-foot__layout"><div class="share-icons"><span class="share-icons__title">Paylaş</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Ftr.javascript.info%2Fdom-nodes" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Ftr.javascript.info%2Fdom-nodes" rel="nofollow"></a></div><div class="article-tablet-foot__map"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">Eğitim haritası</span></a></div></div></div><div class="comments formatted" id="comments"><div class="comments__header"><h2 class="comments__header-title"><a href="#comments" name="comments">Yorumlar</a></h2><div class="comments__read-before"><span class="comments__read-before-link">yorum yapmadan önce lütfen okuyun...</span><div class="comments__read-before-popup"><div class="comments__read-before-popup-i"><ul><li>Eğer geliştirme ile alakalı bir öneriniz var ise yorum yerine <a href="https://github.com/javascript-tutorial/en.javascript.info/issues/new">github konusu gönderiniz</a>.</li><li>Eğer makalede bir yeri anlamadıysanız lütfen belirtiniz.</li><li>Koda birkaç satır eklemek için <code><code></code> kullanınız, birkaç satır eklemek için ise <code><pre></code> kullanın. Eğer 10 satırdan fazla kod ekleyecekseniz <a href='https://plnkr.co/edit/?p=preview'>plnkr</a> kullanabilirsiniz)</li></ul></div></div></div></div><div id="disqus_thread"></div><script>var disqus_config = function() { if (!this.page) this.page = {}; Object.assign(this.page, {"url":"https:\/\/tr.javascript.info\/dom-nodes","identifier":"\/dom-nodes"}); };</script><script>var disqus_shortname = "tr-javascript-info";</script><script>var disqus_enabled = true;</script></div></main></div><div class="sidebar page__sidebar sidebar sidebar_sticky-footer"><button class="sidebar__toggle" data-sidebar-toggle></button><a class="map" href="/tutorial/map" data-action="tutorial-map" data-tooltip="Eğitim haritası"></a><div class="sidebar__inner"><div class="sidebar__content"><div class="sidebar__section"><h4 class="sidebar__section-title">Bölüm</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="/document">Document</a></li></ul></nav></div><div class="sidebar__section"><h4 class="sidebar__section-title">Ders menüsü</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#bir-dom-rnei">Bir DOM örneği</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#otomatik-dzeltme">Otomatik düzeltme</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#dier-dm-trleri">Diğer düğüm türleri</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#kendin-gr">Kendin gör</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#tarayc-gelitirici-aralarnda-grn">Tarayıcı geliştirici araçlarında görün</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#konsol-ile-etkileim">Konsol ile etkileşim</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#zet">Özet</a></li></ul></nav></div><div class="sidebar__section"><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#comments">Yorumlar</a></li></ul></nav></div><div class="sidebar__section"><div class="sidebar__section-title">Paylaş</div><a class="share share_tw sidebar__share" href="https://twitter.com/share?url=https%3A%2F%2Ftr.javascript.info%2Fdom-nodes" rel="nofollow"></a><a class="share share_fb sidebar__share" href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=https%3A%2F%2Ftr.javascript.info%2Fdom-nodes" rel="nofollow"></a></div><div class="sidebar__section"><a class="sidebar__link" href="https://github.com/javascript-tutorial/tr.javascript.info/blob/master/2-ui/1-document/02-dom-nodes" rel="nofollow">GitHub'da düzenle</a></div></div></div></div></div></div><div class="page-footer"><ul class="page-footer__list"><li class="page-footer__item page-footer__item_copy">© 2007—2021  Ilya Kantor</li><li class="page-footer__item page-footer__item_about"><a class="page-footer__link" href="/about">proje hakkında</a></li><li class="page-footer__item page-footer__item_contact"><a class="page-footer__link" href="/about#contact-us">iletişime geçin</a></li></ul></div></body></html>