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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

Bu eğitimde, DOM ile HTML arasındaki farkı bildiğiniz varsayılır. Ek: HTML ve DOM karşılaştırması bölümünde bu konuyu tekrar gözden geçirebilirsiniz.

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

Öğeler panelinin DOM ağacı, DevTools'da DOM ile ilgili tüm etkinlikleri yaptığınız yerdir.

Bir düğümü inceleme

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

  1. Aşağıdaki listede Michelangelo'yu sağ tıklayın. Menüden İncele'yi seçin.

    • Michelangelo
    • Raphael

    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. Öğe seçin'i tıklayın.

  3. Aşağıdaki listeden Tokyo'yu seçin.

    • Tokyo
    • Beyrut

    <li>Tokyo</li>, DOM ağacında vurgulanır.

Düğüm inceleme, bir düğümün stillerini ve CSS'sini görüntüleme ve değiştirme yolundaki ilk adımdır.

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 listeden Ringo'yu sağ tıklayın ve İncele'yi seçin. DOM ağacında <li>Ringo</li> seçildi.

    • George
    • Ringo
    • Paul

    • Jehan

      Ringo düğümünü inceleme

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

    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 üst öğesi seçildi. Bu örnekte, 1. adımın talimatlarını içeren <li> düğümüdür.

  5. Aşağı ok tuşuna 3 kez basarak az önce daralttığınız <ul> listesini yeniden seçin. Ş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 görüntü alanında olmayan bir DOM düğümünde olduğunuzu fark edersiniz. Örneğin, sayfanın en altına kaydırdığınızı ve sayfanın üst kısmındaki <h1> düğümüyle ilgilendiğinizi varsayalım. Görünüme kaydır, görünüm alanını hızlıca yeniden konumlandırarak düğümü görmenizi sağlar.

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

    • Magritte
    • Soutine

  2. Ek talimatlar için ek bölümündeki Görünür hale getirmek için kaydırın bölümüne gidin.

İşlemi tamamladıktan sonra bu bölüme geri dönmeniz gerekir.

Cetvelleri göster

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

Cetvelleri iki şekilde etkinleştirebilirsiniz:

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

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 (macOS) tuşlarına basın. Arama çubuğu, DOM ağacının alt kısmında açılır.

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

    Arama çubuğunda sorgu vurgulanıyor.

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ü alanında görünür hale getirir. Bu işlem, varsayılan olarak siz yazarken gerçekleşir. Her zaman uzun arama sorgularıyla çalışıyorsanız Geliştirici Araçları'nın aramayı yalnızca Enter tuşuna bastığınızda çalıştırmasını sağlayabilirsiniz.

Düğümler arasında gereksiz geçişleri önlemek için Ayarlar > Tercihler > Genel > Yazarken ara onay kutusunun işaretini kaldırın.

Ayarlar'da &quot;Yazarken ara&quot; onay kutusunun temizlenmesi

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

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ğıdaki listede 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> ve </li> arasındaki metni çift tıklayın. Metin, seçildiğini belirtmek için mavi renkle vurgulanır.

    Metni düzenleme

  3. Michelle simgesini silin, Leela yazın ve Enter tuşuna basarak değişikliği onaylayın. Metin, Michelle'den Leela'ya değişiyor.

Ö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 bu talimatları uygulayın.

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

    • Howard
    • Vince

  2. <ul> öğesini genişletin, ardından düzenlemek için <li> öğesini çift tıklayın. Düğümün seçildiğini belirtmek için metin vurgulanır.

    Tıklandığında düğüm, seçildiğini belirtmek için vurgulanır.

  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öner.

    Düğüme stil özelliği ekleme

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 yeni türü yazın.

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

    • Dean
    • Espri
    • Thaddeus
    • Brock

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

  3. li değerini silin, button yazın ve Enter tuşuna basın. <li> düğümü <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 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
    • Rajesh
    • Leonard

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

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

  3. Yeni bir satır başlatmak için Enter tuşuna basın ve <l yazmaya başlayın. DevTool, HTML söz dizimini vurgular ve otomatik tamamlama için etiketler önerir.

    HTML etiketlerinin otomatik tamamlanması.

  4. Otomatik tamamlama menüsünden li öğesini seçin ve > yazın. Geliştirici Araçları, imleçten sonra otomatik olarak kapanış </li> etiketini ekler.

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

  5. Etiketin içine Sheldon yazın ve değişiklikleri uygulamak için Ctrl veya Command + Enter tuşlarına basın.

Düğüm kopyalama

Sağ tıklama menüsündeki Öğeyi kopyala seçeneğini kullanarak bir öğeyi kopyalayabilirsiniz.

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

    • Bonfire of the Vanities
    • Nana
    • Orlando
    • Beyaz Gürültü

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

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

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

Ayrıca ş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ü alma

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ü 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 (Windows ve macOS).

Geliştirici Araçları ile ekran görüntüsü almanın 4 yolu başlıklı makaleden daha fazla bilgi edinin.

DOM düğümlerini yeniden sıralama

Düğümleri sürükleyerek yeniden sıralayın.

  1. Aşağıdaki listede Elvis Presley'i sağ tıklayın ve İncele'yi seçin. Bu, listedeki son öğedir.

    • 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.

Durumu zorla

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

  1. Fareyle Sineklerin Tanrısı liste öğesinin üzerine gelin. Arka plan rengi turuncu olur.

    • Sineklerin Tanrısı
    • Suç ve Ceza
    • Moby Dick

  2. Sineklerin Tanrısı liste öğesini 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 Durumu Zorla > :hover'ı seçin. Bu seçeneği görmüyorsanız eksik seçenekler ile ilgili eki okuyun.

    Fareyle düğmenin üzerine gelmeseniz bile arka plan rengi turuncu kalır.

Düğüm gizleme

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

  1. Aşağıdaki listeden The Stars My Destination'ı sağ tıklayın ve İncele'yi seçin.

    • Monte Kristo 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.

    Gizlendikten sonra DOM ağacında düğümün 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 Delete tuşuna basın.

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

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

  2. Delete 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 (macOS) tuşlarına basın. Son işlem geri alınır ve düğüm yeniden görünür.

Konsol'daki erişim düğümleri

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

Şu anda seçili olan düğüme $0 ile referans verme

Bir düğümü (::before veya ::after gibi sözde öğeler dahil) denetlediğinizde, düğümün yanındaki == $0 metni, bu düğüme $0 değişkeniyle Konsol'da referans verebileceğiniz anlamına gelir.

  1. Karanlığın Sol Eli liste öğesini sağ tıklayın ve İncele'yi seçin.

    • Karanlığın Sol Eli
    • Dune

  2. Konsol çekmecesini açmak için Escape tuşuna basın. Açmak için Konsol'u seçmeniz gerekebilir.

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

    Konsoldaki ilk $0 ifadesinin sonucu.

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

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

    Konsol'daki ikinci $0 ifadesinin sonucu.

Genel değişken olarak sakla

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

  1. Aşağıdaki listede The Big Sleep'i 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 Global değişken olarak depola'yı seçin. Bu seçeneği bulamıyorsanız eksik seçenekler hakkında bilgi edinin.

  3. Konsola temp1 yazıp Enter tuşuna basın. İfadenin sonucu, değişkenin düğüm olarak değerlendirildiğini gösterir. Liste öğesini genişletmek için düğümü tıklayın.

    temp1 ifadesinin sonucu.

JS yolunu kopyalama

Otomatik testte referans vermek için bir düğümün JavaScript yolunu kopyalayın.

  1. Aşağıdaki listede Karamazov Kardeşler'i sağ tıklayıp İ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üğümü çözümleyen bir document.querySelector() ifadesi panonuza kopyalandı.

  3. İfadeyi konsola yapıştırmak için Control+V veya Command+V (macOS) tuşlarına basın.

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

    Copy JS Path ifadesinin sonucu

DOM değişikliklerinde duraklatma

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 kesme noktaları hakkında bilgi edinin.

Sonraki adımlar

Bu, Geliştirici Araçları'ndaki DOM ile ilgili özelliklerin çoğunu kapsar. Diğerlerini keşfetmek için DOM ağacındaki düğümleri sağ tıklayabilir ve bu eğitimde ele alınmayan seçenekleri deneyebilirsiniz.

Okumaya devam edin:

Geliştirici Araçları ekibiyle iletişime geçmek veya diğer geliştiricilerden yardım almak için Geliştirici Araçları topluluğuna katılın.

Ek

Belirli konular hakkında daha fazla bilgi edinin.

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 bir HTML belgesi 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 bir nesne ağacı oluşturur:

html
  head
    title
  body
    h1
    p
    script

Bu nesne veya düğüm ağacı, sayfanın içeriğini temsil eder. Buna belge nesne modeli veya kısaca DOM denir. Şu anda nesneler hem DOM'da hem de HTML'de aynıdır.

HTML'nin alt kısmındaki script.js dosyasının aşağıdaki işlevleri içerdiğini varsayalım:

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

Bu komut dosyası, h1 düğümünü kaldırır ve DOM'a başka bir p düğümü ekler. DOM artık şu şekilde görünür:

html
  head
    title
  body
    p
    script
    p

Sayfanın HTML'si artık DOM'undan farklıdır.

HTML, ilk sayfa içeriğini, DOM ise etkin ve 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.

MDN'nin DOM'a Giriş bölümünden daha fazla bilgi edinebilirsiniz.

Görünüme kaydır

Bu bölüm, Görünür hale getirme bölümünün devamıdır. Bölümü tamamlamak için talimatları uygulayın.

  1. DOM ağacınızda <li>Magritte</li> düğümü seçili olmaya devam etmelidir. Görünmüyorsa Görünümde kaydır'a geri dönüp baştan başlayın.

  2. <li>Magritte</li> düğümünü sağ tıklayın ve Görünümde kaydır'ı seçin. Görüntü alanınız, Magritte düğümünü görebilmeniz için yukarı kaydırılır. Görünüm için kaydır seçeneği yoksa eksik seçenekler hakkında bilgi edinin.

Eksik seçenekler

Bu eğitimdeki birçok talimatta, DOM ağacındaki bir düğümü sağ tıklayıp açılan bağlam menüsünden bir seçenek belirlemeniz istenir. Bağlam menüsünde belirtilen seçeneği görmüyorsanız düğüm metninden uzağa sağ tıklamayı deneyin.

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