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 karşılaştırması 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.
    • Mikelanj
    • Raphael Düğümleri inceleme Geliştirici Araçları'nın Öğeler 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ün incelenmesi, aynı zamanda bir düğümün stillerini görüntülemenin 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.

DOM Ağacında klavyeyle 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ıp İ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ünüme kaydırma, düğümü görebilmeniz için görüntü alanını hızlı bir şekilde 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: Ekranı 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önmelisiniz.

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 > Fareyle ü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 odaklayın.
  2. Ctrl+F veya Command+F (Mac) tuşlarına basın. DOM Ağacının en altında arama çubuğu açılır.

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

    Arama çubuğunda sorguyu vurgulama

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

Öğeler paneli, DOM ağacında ilk eşleşen sonucu seçer ve bunu görüntü alanında görünüme yuvarlar. Varsayılan olarak bu, 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 yapmasını sağlayabilirsiniz.

Düğümler arasında gereksiz atlamalardan kaçınmak için Ayarlar > Tercihler > Genel > Yazarken ara onay kutusunu temizleyin.

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

DOM'u düzenleme

DOM'yi hemen 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 maviyle 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ıp İncele'yi seçin.

    • Haluk
    • Vedat

  2. <li> öğesini ç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, boşluk ekleyin, style="background-color:gold" yazın ve ardından Enter tuşuna basın. Düğümün arka plan rengi altın rengine dönüşür.

    Düğüme bir 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.

    • Dekan
    • Espri
    • Tahsin
    • Bora

  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üzenleme

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.

    • Bir kuruş
    • Haluk
    • Rasim
    • Levent

  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 Control / Command + Enter tuşlarına basın.

    Değişiklikleri uygulama.

Düğümleri kopyalama

Öğeyi çoğalt sağ tıklama seçeneğini kullanarak bir öğeyi çoğaltabilirsiniz.

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

    • Makyaj Masası Şenlik Ateşi
    • Nalan
    • 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 menüde &quot;Öğeyi kopyala&quot; seçeneği vurgulanıyor.

  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ıp İ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ü yakala'yı seçin.

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

  3. Ekran görüntüsü, indirilenler bölümüne kaydedilir.

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

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

DOM düğümlerini yeniden sıralama

Düğümleri yeniden sıralamak için sürükleyin.

  1. Aşağıda Elvis Presley'i sağ tıklayıp İ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. Aşağıdaki Sineklerin Efendisi'nin üzerine gelin. Arka plan rengi turuncu olur.

    • Sineklerin Efendisi
    • Suç ve Ceza
    • Moby Dick

  2. Yukarıdaki Sineklerin 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) sayfası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, DOM Ağacı&#39;nda nasıl görünür?

  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ıp İ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 Command+Z (Mac) tuşlarına basın. Son işlem geri alınır ve düğüm yeniden görünür.

Konsoldaki düğümlere erişim

Geliştirici Araçları, DOM düğümlerine Console'dan erişmek veya JavaScript referanslarını almak için birkaç kısayol sağlar.

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

Bir düğümü incelerken, düğümün yanındaki == $0 metni, konsolda bu düğüme $0 değişkeniyle başvuruda bulunabileceğ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. İmleci sonucun üzerine getirin. 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ıp İncele'yi seçin.

    • The Big Sleep
    • Uzun Veda

  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 Karamazov
    • 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 Console'a yapıştırmak için Control+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 sayfa istemek için web tarayıcısı kullandığınızda sunucu aşağıdaki gibi 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 şuna benzer 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ında başvurulan 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 git

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ünüme git'i 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 nereyi tıklayacaksınız?