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

Kayce Baskler
Kayce Baskçalar
Sofya Emelianova
Sofya Emelianova

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

Bu eğitim, DOM ve HTML arasındaki farkı bildiğiniz varsayılmaktadır. Açıklama için Ek: HTML ve DOM bölümüne bakın.

DOM düğümlerini göster

Öğeler panelinin DOM Ağacı, Geliştirici Araçları'nda DOM ile ilgili tüm etkinlikleri yaptığınız yerdir.

Düğümü inceleyin

Belirli bir DOM düğümüyle ilgileniyorsanız, Denetle, Geliştirici Araçları'nı açmanın ve bu düğümü araştırmanın hızlı yoludur.

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

    • Tokyo
    • Beyrut

      <li>Tokyo</li> artık DOM Ağacı'nda vurgulanıyor.

Bir düğümün denetlenmesi aynı zamanda bir düğümün stillerini görüntülemeye ve değiştirmeye yönelik ilk adımdır. CSS'yi Görüntüleme ve Değiştirmeye Başlama bölümüne bakın.

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çilir.

    • Gökhan
    • Ringo
    • Paul
    • Jehan

      Ringo düğümünü inceleme

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

    U 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 üst öğesi seçilir. Bu durumda, bu öğe, 1. adıma yönelik talimatları içeren <li> düğümüdür.

  5. Daralttığınız <ul> listesini yeniden seçmek için Aşağı ok tuşuna 3 kez basın. Şöyle görünmesi gerekir: <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, görüntü alanında olmayan bir DOM düğümüyle ilgilendiğinizi fark edebilirsiniz. Örneğin, sayfanın en altına indiğinizi ve sayfanın üst kısmındaki <h1> düğümüyle ilgilendiğinizi varsayalım. Görünüme doğru 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ğıda Magritte'i sağ tıklayın ve İncele'yi seçin.

    • Magritte
    • Sutin
  2. Bu sayfanın alt kısmındaki Ek: Görünüme kaydır bölümüne gidin. Talimatlar orada da devam eder.

Sayfanın altındaki talimatları tamamladıktan sonra tekrar buraya dönmeniz gerekir.

Cetvelleri göster

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

Cetveller.

Cetvelleri aşağıdaki iki yöntemden birini kullanarak etkinleştirin:

  • Control+Üst Karakter+P veya Command+Üst Karakter+P (Mac) tuşlarına basarak Command menüsünü açın, Show rulers on hover yazın ve Enter tuşuna basın.
  • Ayarlar. 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 alt kısmı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 ayrıca CSS ve XPath seçicileri de destekler.

Öğeler paneli, DOM ağacındaki ilk eşleşen sonucu seçer ve bunu görüntü alanında görünüme getirir. Varsayılan olarak bu, siz yazarken gerçekleşir. Her zaman uzun arama sorgularıyla çalışıyorsanız Geliştirici Araçları'nın arama özelliğini yalnızca Enter tuşuna basarak çalıştırmasını sağlayabilirsiniz.

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

Ayarlar&#39;da Yazarken ara onay kutusu temizlendi.

DOM'u düzenle

DOM'yi 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ı'ndaki içeriği çift tıklayın.

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

    • Kızartma
    • Merve
  2. DOM Ağacı'nda Michelle öğesini çift tıklayın. Başka bir deyişle, <li> ile </li> arasındaki metni çift tıklayın. Metin, seçildiğini belirtmek üzere maviyle vurgulanır.

    Metni düzenleme

  3. Michelle öğesini silin, Leela yazın, ardından 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
    • Vince
  2. <li> simgesini çift tıklayın. Metin, düğümün seçildiğini belirtecek şekilde vurgulanır.

    Düğümü düzenleme

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

    Düğüme bir stil özelliği ekleme

Özelliği düzenle sağ tıklama seçeneğini de kullanabilirsiniz.

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

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

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

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

    • Dekan
    • Espri
    • Thaddeus
    • Brock
  2. <li> simgesini çift tıklayın. li metni vurgulanıyor.

  3. li komutunu silin, button yazın, ardından Enter tuşuna basın. <li> düğümü bir <button> düğümüne dönüşür.

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

HTML olarak düzenle

Düğümleri söz dizimi vurgulama ve otomatik tamamlama özellikleriyle 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ğıda Leonard'ı sağ tıklayın ve İncele'yi seçin.

    • Kuruş
    • Howard
    • Raşit
    • daha fazla içerik
  2. Öğeler panelinde geçerli 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ıra başlamak 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çip > yazın. Geliştirici Araçları, </li> kapanış etiketini imleçten sonra 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şiklikler uygulanıyor.

Düğümü kopyala

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

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

    • Makyaj Ş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 Öğeyi kopyala seçeneği vurgulanmış.

  3. Sayfaya geri dönün. Liste öğesi hemen kopyalandı.

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

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

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.

    Alınan düğüm ekran görüntüsü.

  3. Ekran görüntüsü, indirdiğiniz içeriklere kaydedilir.

    Düğüm ekran görüntüsü indirilenler bölümüne kaydedildi.

DOM düğümlerini yeniden sıralama

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

  1. Aşağıda Elvis Presley'yi sağ tıklayın ve İncele'yi seçin. Bunun listedeki son öğe olduğuna dikkat edin.

    • Selma
    • Tom Bekliyor
    • Cem Tatlı
    • Elvis Presley

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

    Düğümü listenin başına sürükleme

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 Dik

  2. Yukarıdaki Sineklerin Efendisi'ni sağ tıklayın ve İncele'yi seçin.

  3. <li class="demo--hover">The Lord of the Flies</li> öğesini sağ tıklayın ve Force State (Zorunlu 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üğümü gizleyin

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

  1. Aşağıdaki Yıldızları Hedefim'i sağ tıklayın ve Denetle'yi seçin.

    • Monte Kristo Sayısı
    • The Stars My Adresi
  2. H tuşuna basın. Düğüm gizli. Ayrıca, düğümü sağ tıklayıp Öğeyi gizle seçeneğini de kullanabilirsiniz.

    DOM, gizlendikten sonra 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 Delete tuşuna basın.

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

    • Çizimli Adam
    • Ayaklı Camdan
    • Vakıf
  2. Sil tuşuna basın. Düğüm silindi. Ayrıca, 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 erişim düğümleri

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

Seçili olan düğüme $0 ile referans verin

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

  1. Aşağıda Karanlığın Sol Eli'ni sağ tıklayın ve İncele'yi seçin.

    • Karanlığın Sol Eli
    • Kumul
  2. Konsol Ç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> olarak değerlendirildiğini gösterir.

    Konsoldaki ilk $0 ifadesinin sonucu

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

  5. DOM Ağacı'nda <li>Dune</li> simgesini tıklayın, Konsol'a tekrar $0 yazın ve tekrar Enter tuşuna basın. Şimdi $0 işlevinin sonucu <li>Dune</li>.

    Konsoldaki ikinci $0 ifadesinin sonucu

Genel değişken olarak sakla

Bir düğüme birçok kez referans vermeniz gerekiyorsa bunu genel değişken olarak depolayın.

  1. Aşağıdaki Büyük Uyku'yu sağ tıklayın ve İncele'yi seçin.

    • Büyük Uyku
    • Uzun Veda
  2. DOM Ağacı'nda <li>The Big Sleep</li> öğesini sağ tıklayın ve Genel değişken olarak depola'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 için değerlendirildiğini gösterir.

    temp1 ifadesinin sonucu

JS yolunu kopyala

Otomatik testte referans almanız gerektiğinde JavaScript yolunu düğüme kopyalayın.

  1. Aşağıda Kardamazov 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. Düğüme çö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şikliklerindeki ara

Geliştirici Araçları, JavaScript DOM'u değiştirdiğinde sayfanın JavaScript'ini duraklatmanıza olanak tanır. DOM değişikliği ayrılma noktaları bölümüne bakın.

Sonraki adımlar

Bu bölüm, Geliştirici Araçları'ndaki DOM ile ilgili özelliklerin çoğunu kapsar. DOM Ağacı'ndaki düğümleri sağ tıklayıp bu eğiticide ele alınmayan diğer seçenekleri deneyerek bunların geri kalanını keşfedebilirsiniz. Öğe paneli klavye kısayolları bölümünü de inceleyin.

Geliştirici Araçları 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ı ekibiyle iletişime geçmek veya Geliştirici Araçları topluluğundan yardım almak istiyorsanız Topluluk sayfasını ziyaret edin.

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

Bu bölümde, HTML ve DOM arasındaki fark hızlı bir şekilde açıklanmaktadır.

https://example.com gibi bir sayfa istemek için bir web tarayıcısı kullandığınızda sunucu şunun 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 aşağıdakine benzer bir nesne ağacı oluşturur:

html
  head
    title
  body
    h1
    p
    script

Sayfanın içeriğini temsil eden bu nesne veya düğümlerden oluşan bu ağaç DOM olarak adlandırılır. Ş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'ye başka bir p düğümü ekler. DOM'nin tamamı artık şöyle görünür:

html
  head
    title
  body
    p
    script
    p

Sayfanın HTML'si artık DOM'sinden farklı. Başka 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 edinmek için DOM'ye giriş bölümünü inceleyin.

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

Bu, Görünüme doğru kaydır bölümünün devamıdır. Bölümü tamamlamak için aşağıdaki talimatları uygulayın.

  1. DOM Ağacınızda <li>Magritte</li> düğümünün yine seçili olması gerekir. Görünmüyorsa Görünüme doğru kaydır'a geri dönün ve baştan başlayın.
  2. <li>Magritte</li> düğümünü sağ tıklayın ve Görünüme kaydır'ı seçin. Görüntü alanınız, Magritte düğümünü görebilmek için tekrar yukarı kaydırır. Görünüme doğru kaydır seçeneğini göremiyorsanı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ğunda, DOM Ağacı'ndaki bir düğümü sağ tıklamanız ve açılan içerik menüsünden bir seçenek belirlemeniz istenir. İçerik menüsünde belirtilen seçeneği görmüyorsanız düğüm metnini sağ tıklamayı deneyin.

Tüm seçenekler görünmüyorsa nereyi tıklayacaksınız?