DOM'yi görüntüleyip değiştirmeye başlama

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome Geliştirici Araçları'nı kullanarak bir sayfanın DOM'unu görüntüleme ve değiştirmeyle ilgili temel bilgileri öğrenmek için videoyu izleyin ve bu etkileşimli eğiticileri tamamlayın.

Bu eğitimde, DOM ile HTML arasındaki farkı bildiğinizi varsayıyoruz. Açıklama için Ek: HTML ve DOM bölümüne bakın.

DOM düğümlerini görüntüleme

DevTools'ta DOM ile ilgili tüm işlemleri Öğeler panelinin DOM ağacında yaparsınız.

Düğümleri inceleme

Belirli bir DOM düğümüyle ilgileniyorsanız DevTools'u açıp bu düğümü incelemenin hızlı bir yolu İncele'dir.

  1. Aşağıdaki Michelangelo'yu sağ tıklayın ve İncele'yi seçin.
    • Michelangelo
    • Raphael Düğümleri inceleme Geliştirici Araçları'nın Nesneler paneli açılır. <li>Michelangelo</li>, DOM Ağacı'nda vurgulanır. Michelangelo< düğümünü vurgulama
  2. DevTools'un sol üst köşesindeki İncele simgesini tıklayın. İncele simgesi

  3. Aşağıdaki Tokyo metnini tıklayın.

    • Tokyo

    • Beyrut

      Artık DOM ağacında <li>Tokyo</li> vurgulanmıştır.

Bir düğümü incelemek, düğümün stillerini görüntüleme ve değiştirmenin ilk adımıdır. CSS'yi Görüntüleme ve Değiştirme Başlangıç Kılavuzu başlıklı makaleyi inceleyin.

Klavyeyle DOM ağacında gezinme

DOM ağacında bir düğüm seçtikten sonra klavyenizle DOM ağacında gezinebilirsiniz.

  1. Aşağıdaki Ringo'yu sağ tıklayın ve İncele'yi seçin. DOM ağacında <li>Ringo</li> seçilidir.

    • George
    • Ringo
    • Paul

    • Jehan

      Ringo düğümünü inceleme

  2. Yukarı ok tuşuna 2 kez basın. <ul> seçili.

    ul düğümünü inceleme

  3. Sol ok tuşuna basın. <ul> listesi daraltılır.

  4. Sol ok tuşuna tekrar basın. <ul> düğümünün ebeveyni seçilidir. Bu durumda, 1. adımla ilgili talimatları içeren <li> düğümü.

  5. Az önce daralttığınız <ul> listeyi yeniden seçmek için aşağı ok tuşuna 3 kez basın. Şu şekilde görünmelidir: <ul>...</ul>

  6. Sağ ok tuşuna basın. Liste genişler.

Görünüme kaydır

DOM ağacını görüntülerken bazen şu anda görüntü alanında olmayan bir DOM düğümüyle ilgilenebilirsiniz. Örneğin, sayfanın en altına gittiğinizi ve sayfanın üst kısmındaki <h1> düğümüyle ilgilendiğinizi varsayalım. Görüntüye kaydır, düğümü görebilmeniz için ekran görüntüsünü hızlıca yeniden konumlandırmanızı sağlar.

  1. Aşağıdaki Magritte'yi sağ tıklayın ve İncele'yi seçin.

    • Magritte
    • Soutine

  2. Bu sayfanın en altındaki Ek: Kaydırarak görüntüleme bölümüne gidin. Talimatlar burada devam eder.

Sayfanın alt kısmındaki talimatları tamamladıktan sonra buraya geri dönmeniz gerekir.

Cetvelleri göster

Görüntü alanınızın üstündeki ve solundaki cetvellerle, Öğeler panelinde fareyle bir öğenin üzerine geldiğinizde öğenin genişliğini ve yüksekliğini ölçebilirsiniz.

Cetveller

Cetvelleri iki şekilde etkinleştirebilirsiniz:

  • Komut menüsünü açmak için Kontrol+Üst Karakter+P veya Command+Üst Karakter+P (Mac) tuşlarına basın, Show rulers on hover yazın ve Enter tuşuna basın.
  • Ayarlar > Tercihler > Öğeler > Üzerine gelindiğinde cetvelleri göster'i kontrol edin.

Cetvellerin boyutlandırma birimi pikseldir.

DOM ağacında dize, CSS seçici veya XPath seçiciye göre arama yapabilirsiniz.

  1. İmlecinizi Öğeler paneline getirin.
  2. Ctrl+F veya Command+F (Mac) tuşlarına basın. Arama çubuğu, DOM ağacının en altında açılır.

  3. The Moon is a Harsh Mistress yazın. Son cümle, DOM ağacında vurgulanır.

    Sorguyu arama çubuğunda vurgulama

Yukarıda belirtildiği gibi, arama çubuğu CSS ve XPath seçicileri de destekler.

Öğeler paneli, DOM ağacındaki ilk eşleşen sonucu seçer ve görüntüleme alanında görüntüler. Bu işlem varsayılan olarak siz yazarken gerçekleşir. Her zaman uzun arama sorgularıyla çalışıyorsanız DevTools'un aramayı yalnızca Enter tuşuna bastığınızda çalıştırmasını sağlayabilirsiniz.

Düğümler arasında gereksiz atlamalar olmasını önlemek için Ayarlar > Tercihler > Genel > Yazarken ara onay kutusunu temizleyin.

Ayarlar&#39;da Yazarken ara onay kutusunu temizleyin.

DOM'u düzenleme

DOM'u anında düzenleyebilir ve bu değişikliklerin sayfayı nasıl etkilediğini görebilirsiniz.

İçeriği düzenleyin

Bir düğümün içeriğini düzenlemek için DOM ağacında içeriği çift tıklayın.

  1. Aşağıdaki Michelle'i sağ tıklayıp İncele'yi seçin.

    • Kızartma
    • Merve

  2. DOM ağacında Michelle öğesini çift tıklayın. Diğer bir deyişle, <li> ile </li> arasındaki metni çift tıklayın. Metin, seçildiğini belirtmek için mavi renkle vurgulanır.

    Metni düzenleme

  3. Michelle'ü silin, Leela yazın ve değişikliği onaylamak için Enter tuşuna basın. Yukarıdaki metin Michelle yerine Leela olarak değişir.

Özellikleri düzenle

Özellikleri düzenlemek için özellik adını veya değerini çift tıklayın. Bir düğüme nasıl özellik ekleyeceğinizi öğrenmek için aşağıdaki talimatları uygulayın.

  1. Aşağıdaki Howard'ı sağ tıklayın ve İncele'yi seçin.

    • Howard
    • Vedat

  2. <li> simgesini çift tıklayın. Metin, düğümün seçildiğini belirtmek için vurgulanır.

    Düğümü düzenleme

  3. Sağ ok tuşuna basın, bir boşluk ekleyin, style="background-color:gold" yazın ve Enter tuşuna basın. Nodun arka plan rengi altın rengine döner.

    Nod&#39;a stil özelliği ekleme

Sağ tıklama menüsündeki Özelliği düzenle seçeneğini de kullanabilirsiniz.

Düzenleme özelliğinin vurgulandığı seçenekleri sağ tıklayın.

Düğüm türünü düzenleme

Bir düğümün türünü düzenlemek için türü çift tıklayın ve ardından yeni türü yazın.

  1. Aşağıdaki Hank'ı sağ tıklayıp İncele'yi seçin.

    • Dean
    • Espri
    • Tahsin
    • Brock

  2. <li> simgesini çift tıklayın. li metni vurgulanır.

  3. li'ü silin, button yazın ve Enter tuşuna basın. <li> düğümü <button> düğümüne dönüşür.

    Düğüm türünü düğme olarak değiştirme

HTML olarak düzenle

Düğümleri söz dizimi vurgulama ve otomatik tamamlama ile HTML olarak düzenlemek için düğümün açılır menüsünden HTML olarak düzenle'yi seçin.

  1. Aşağıdaki Leonard'ı sağ tıklayın ve İncele'yi seçin.

    • Penny
    • Howard
    • Rasim
    • Leonard

  2. Öğeler panelinde mevcut düğümü sağ tıklayın ve açılır menüden HTML olarak düzenle'yi seçin.

    Bir düğümün açılır menüsü.

  3. Yeni bir satır başlatmak ve <l yazmaya başlamak için Enter tuşuna basın. Geliştirici Araçları, HTML söz dizimini vurgular ve etiketleri sizin için otomatik olarak tamamlar.

    HTML etiketlerinin otomatik olarak tamamlanması.

  4. Otomatik tamamlama menüsünden li öğesini seçin ve > yazın. DevTools, imlecin ardından kapanış </li> etiketini otomatik olarak ekler.

    Geliştirici Araçları, etiketi otomatik olarak kapatır.

  5. Etiketin içine Sheldon yazın ve değişiklikleri uygulamak için Kontrol / Komut + Enter tuşlarına basın.

    Değişiklikleri uygulama.

Düğümleri kopyalama

Öğeyi kopyala sağ tıklama seçeneğini kullanarak bir öğeyi kopyalayabilirsiniz.

  1. Aşağıdaki Nana'yı sağ tıklayıp İncele'yi seçin.

    • Vanity Fair
    • Nana
    • Orlando
    • Beyaz Gürültü

  2. Öğeler panelinde <li>Nana</li> simgesini sağ tıklayın ve açılır menüden Öğeyi kopyala'yı seçin.

    Açılır listede vurgulanmış &quot;Öğeyi kopyala&quot; seçeneği.

  3. Sayfaya dönün. Liste öğesi anında kopyalandı.

Üst Karakter + Alt + Aşağı ok (Windows ve Linux) ve Üst Karakter + Option + Aşağı ok (MacOS) klavye kısayollarını da kullanabilirsiniz.

Düğüm ekran görüntüsü alma

Düğüm ekran görüntüsü al'ı kullanarak DOM ağacındaki herhangi bir düğümün ekran görüntüsünü alabilirsiniz.

  1. Bu sayfadaki herhangi bir resmi sağ tıklayın ve İncele'yi seçin.

  2. Öğeler panelinde resim URL'sini sağ tıklayın ve açılır menüden Düğüm ekran görüntüsünü yakala'yı seçin.

    Düğüm ekran görüntüsü alınıyor.

  3. Ekran görüntüsü, indirilenler klasörünüze kaydedilir.

    İndirilenler klasörüne kaydedilen düğüm ekran görüntüsü.

DevTools ile ekran görüntüsü almanın diğer yollarını öğrenmek için DevTools ile ekran görüntüsü almanın 4 yolu başlıklı makaleyi inceleyin.

DOM düğümlerini yeniden sıralama

Düğümleri sürükleyerek yeniden sıralayabilirsiniz.

  1. Aşağıdaki Elvis Presley'yi sağ tıklayın ve İncele'yi seçin. Bu öğenin listedeki son öğe olduğunu unutmayın.

    • Stevie Wonder
    • Tom Waits
    • Chris Thile
    • Elvis Presley

  2. DOM ağacında <li>Elvis Presley</li> öğesini listenin en üstüne sürükleyin.

    Nodu listenin en üstüne sürükleyerek

Durumu zorunlu kıl

Düğümleri :active, :hover, :focus, :visited ve :focus-within gibi durumlarda kalmaya zorlayabilirsiniz.

  1. Fareyle aşağıdaki Sinekler Efendisi'nin üzerine gelin. Arka plan rengi turuncu olur.

    • Sineklerin Efendisi
    • Suç ve Ceza
    • Moby Dick

  2. Yukarıdaki Sinekler Efendisi'ni sağ tıklayıp İncele'yi seçin.

  3. <li class="demo--hover">The Lord of the Flies</li> simgesini sağ tıklayın ve Durum > :hover'ı seçin. Bu seçeneği görmüyorsanız Ek: Eksik seçenekler bölümüne bakın. Fareyle düğümün üzerine gelmeseniz bile arka plan rengi turuncu kalır.

Düğümleri gizleme

Bir düğümü gizlemek için H tuşuna basın.

  1. Aşağıdaki The Stars My Destination (Yıldızlar Hedefim) albümünü sağ tıklayın ve İncele'yi seçin.

    • Monte Cristo Kontu
    • The Stars My Destination

  2. H tuşuna basın. Düğüm gizlidir. Düğümü sağ tıklayıp Öğeyi gizle seçeneğini de kullanabilirsiniz.

    Gizlenen düğümün DOM ağacındaki görünümü

  3. H tuşuna tekrar basın. Düğüm tekrar gösterilir.

Düğüm silme

Bir düğümü silmek için Sil'e basın.

  1. Aşağıdaki Temel'i sağ tıklayın ve İncele'yi seçin.

    • Resimli Adam
    • Aynanın İçinden
    • Vakıf

  2. Sil tuşuna basın. Düğüm silinir. Düğümü sağ tıklayıp Öğeyi sil seçeneğini de kullanabilirsiniz.

  3. Ctrl+Z veya Komut+Z (Mac) tuşlarına basın. Son işlem geri alınır ve düğüm yeniden görünür.

Console'da düğümlere erişme

DevTools, konsoldan DOM düğümlerine erişmek veya bunlara ait JavaScript referansları almak için birkaç kısayol sağlar.

Şu anda seçili olan düğüme 0 değeriyle referans verme

Bir düğümü incelediğinizde, düğümün yanındaki == $0 metni, Console'da bu düğüme $0 değişkeniyle referans verebileceğiniz anlamına gelir.

  1. Aşağıdaki The Left Hand of Darkness (Karanlığın Sol Eli) kitabını sağ tıklayın ve İncele'yi seçin.

    • Karanlığın Sol Eli
    • Dune

  2. Console çekmecesini açmak için Escape tuşuna basın.

  3. $0 yazıp Enter tuşuna basın. İfadenin sonucu, $0 değerinin <li>The Left Hand of Darkness</li> olduğunu gösterir.

    Console&#39;daki ilk $0 ifadesinin sonucu

  4. Fareyle sonucun üzerine gelin. Düğüm, görüntü alanında vurgulanır.

  5. DOM ağacında <li>Dune</li> simgesini tıklayın, Console'a tekrar $0 yazın ve ardından tekrar Enter tuşuna basın. Artık $0, <li>Dune</li> değerini döndürüyor.

    Console&#39;daki ikinci $0 ifadesinin sonucu

Genel değişken olarak sakla

Bir düğüme tekrar tekrar başvurmanız gerekiyorsa düğümü genel değişken olarak saklayın.

  1. Aşağıdaki The Big Sleep (Büyük Uyku) filmini sağ tıklayın ve İncele'yi seçin.

    • The Big Sleep
    • The Long Goodbye

  2. DOM ağacında <li>The Big Sleep</li> öğesini sağ tıklayın ve Küresel değişken olarak sakla'yı seçin. Bu seçeneği görmüyorsanız Ek: Eksik seçenekler bölümüne bakın.

  3. Konsola temp1 yazıp Enter tuşuna basın. İfadenin sonucu, değişkenin düğüm olarak değerlendirildiğini gösterir.

    temp1 ifadesinin sonucu

JS yolunu kopyala

Otomatik bir testte referans olarak kullanmanız gerektiğinde bir düğümün JavaScript yolunu kopyalayın.

  1. Aşağıdaki Karamazov Kardeşler'i sağ tıklayın ve İncele'yi seçin.

    • Karamazov Kardeşler
    • Suç ve Ceza

  2. DOM ağacında <li>The Brothers Karamazov</li> öğesini sağ tıklayın ve Kopyala > JS yolunu kopyala'yı seçin. Nod'a çözümlenen bir document.querySelector() ifadesi panonuza kopyalandı.

  3. İfadeyi Konsola yapıştırmak için Ctrl+V veya Command+V (Mac) tuşlarına basın.

  4. İfadeyi değerlendirmek için Enter tuşuna basın.

    JS Yolunu Kopyala ifadesinin sonucu

DOM değişikliklerinde ara verme

DevTools, JavaScript DOM'u değiştirdiğinde sayfanın JavaScript'ini duraklatmanıza olanak tanır. DOM değişiklik durma noktaları başlıklı makaleyi inceleyin.

Sonraki adımlar

Bu, DevTools'taki DOM ile ilgili özelliklerin çoğunu kapsar. DOM ağacındaki düğümleri sağ tıklayıp bu eğitimde ele alınmayan diğer seçenekleri deneyerek bunların geri kalanını keşfedebilirsiniz. Öğeler paneli klavye kısayolları başlıklı makaleyi de inceleyin.

DevTools ile yapabileceğiniz diğer her şeyi keşfetmek için Chrome Geliştirici Araçları ana sayfasına göz atın.

Geliştirici Araçları Ekibi ile iletişime geçmek veya Geliştirici Araçları topluluğundan yardım almak istiyorsanız Topluluk bölümüne bakın.

Ek: HTML ve DOM karşılaştırması

Bu bölümde, HTML ile DOM arasındaki fark kısaca açıklanmaktadır.

https://example.com gibi bir sayfayı istemek için web tarayıcısı kullandığınızda sunucu aşağıdaki gibi bir HTML döndürür:

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

Tarayıcı, HTML'yi ayrıştırır ve aşağıdaki gibi bir nesne ağacı oluşturur:

html
  head
    title
  body
    h1
    p
    script

Sayfanın içeriğini temsil eden bu nesne ağacına veya düğümlerine DOM denir. Şu anda HTML ile aynı görünüyor ancak HTML'nin alt kısmında referans verilen komut dosyasının şu kodu çalıştırdığını varsayalım:

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

Bu kod, h1 düğümünü kaldırır ve DOM'a başka bir p düğümü ekler. DOM'un tamamı şu şekilde görünür:

html
  head
    title
  body
    p
    script
    p

Sayfanın HTML'si artık DOM'undan farklıdır. Diğer bir deyişle, HTML ilk sayfa içeriğini, DOM ise mevcut sayfa içeriğini temsil eder. JavaScript, düğüm eklediğinde, kaldırdığında veya düzenlediğinde DOM, HTML'den farklı hale gelir.

Daha fazla bilgi için DOM'a giriş başlıklı makaleyi inceleyin.

Ek: Görünüme kaydır

Bu bölüm, Kaydırarak görüntüleme bölümünün devamıdır. Bu bölümü tamamlamak için aşağıdaki talimatları uygulayın.

  1. DOM ağacınızda <li>Magritte</li> düğümü seçili kalmalıdır. Görünmüyorsa Kaydırarak görüntüleme bölümüne geri dönüp baştan başlayın.

  2. <li>Magritte</li> düğümünü sağ tıklayın ve Görüntüye kaydır'ı seçin. Görüntüleme alanınız Magritte düğümünü görebilmeniz için yukarı kaydırılır. Kaydırarak görüntüle seçeneğini görmüyorsanız Ek: Eksik seçenekler bölümüne bakın.

    Görünüme kaydır

Ek: Eksik seçenekler

Bu eğitimdeki talimatların çoğu, DOM ağacındaki bir düğümü sağ tıklayıp açılan bağlam menüsünden bir seçenek belirlemenizi ister. Bağlam menüsünde belirtilen seçeneği görmüyorsanız düğüm metninden uzak bir yerde sağ tıklamayı deneyin.

Tüm seçenekleri görmüyorsanız tıklamanız gereken yer