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ştirme işlemlerinin temellerini öğ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 bölümünde bilgilerinizi tazeleyin.

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

Öğeler panelinin DOM ağacı, Geliştirici Araçları'nda DOM ile ilgili tüm etkinlikleri gerçekleştirdiğiniz yerdir.

Düğüm inceleme

Belirli bir DOM düğümüyle ilgileniyorsanız İncele, Geliştirici Araçları'nı 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.

Bir düğümü incelemek, düğümün stillerini ve CSS'sini görüntüleme ve değiştirme yolunda da 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 listede Ringo'yu sağ tıklayın ve İncele'yi seçin. DOM ağacında <li>Ringo</li> seçilir.

    • George
    • Ringo
    • Paul

    • Jehan

      Ringo düğümünü inceleme

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

    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çilir. Bu durumda, 1. adımın talimatlarını içeren <li> düğümüdür.

  5. <ul> listesini yeniden seçmek için Aşağı ok tuşuna 3 kez basın. Şöyle 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 kendinizi görünüm alanında olmayan bir DOM düğümünde bulabilirsiniz. Ö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 ekler bölümündeki Görünüm alanına kaydırma bölümüne gidin.

İşlem tamamlandığında bu bölüme geri dönmeniz gerekir.

Cetvelleri göster

Görüntü alanınızdaki cetvellerle, Öğeler panelinde üzerine geldiğinizde bir öğ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 Nesneler paneline getirin.
  2. Ctrl+F veya Command+F (macOS) 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.

    Arama çubuğundaki sorguyu vurgulama

Arama çubuğu, CSS ve XPath seçicilerini de destekler.

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

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

Ayarlar&#39;da &quot;Yazarken arama&quot; onay kutusunun işareti kaldırıldı.

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'ı sağ tıklayın ve İncele'yi seçin.

    • Kızartma
    • Merve

  2. DOM ağacında Michelle simgesini çift tıklayın. Başka 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 simgesini silin, Leela yazın ve değişikliği onaylamak için Enter tuşuna basın. Metin Michelle'den Leela'ya 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 bu talimatları uygulayın.

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

    • Howard
    • Vince

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

    Tıklandığında, seçimi belirtmek için düğüm 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 simgesini silin, button simgesini 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

Söz dizimi vurgulama ve otomatik tamamlama ile düğümleri 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, 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ı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 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 veya Komut + Enter tuşlarına basın.

Düğüm kopyalama

Öğeyi kopyala sağ tıklama 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> simgesini sağ tıklayın ve açılır menüden Öğeyi kopyala'yı seçin.

    Açılır listede &quot;Öğeyi çoğalt&quot; seçeneği vurgulanır.

  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ü al'ı seçin.

    Bir düğümün 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ıralayabilirsiniz.

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

    • 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 zorunlu kıl

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

  1. Sineklerin Efendisi liste öğesinin üzerine gelin. Arka plan rengi turuncu olur.

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

  2. Sineklerin Efendisi liste öğesini sağ tıklayın ve İncele'yi seçin.

  3. <li class="demo--hover">The Lord of the Flies</li> simgesini sağ tıklayın ve Force State (Durumu Zorla) > :hover'ı seçin. Bu seçeneği görmüyorsanız eksik seçenekler ile ilgili eki okuyun.

    Aslında düğümün üzerine gelmediğiniz halde arka plan rengi turuncu kalır.

Düğümü gizleme

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

  1. Aşağıdaki listede 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. Ayrıca, düğümü sağ tıklayıp Öğeyi gizle seçeneğini de kullanabilirsiniz.

    Düğümün, gizlendikten sonra DOM ağacında nasıl göründüğü

  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 listede Foundation'ı sağ tıklayın ve İncele'yi seçin.

    • The Illustrated Man
    • 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. Control+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'da düğümlere erişme

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

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

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

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

    • The Left Hand of Darkness
    • 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 ifadesinin <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 ifadesinin sonucu <li>Dune</li> olur.

    Konsoldaki ikinci 0 ABD doları tutarındaki ifadenin sonucu.

Genel değişken olarak sakla

Bir düğüme birçok kez başvurmanız gerekiyorsa bunu 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 Store as global variable'ı (Genel değişken olarak sakla) 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

Otomatikleştirilmiş bir 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ın ve İncele'yi seçin.

    • Karamazov Kardeşler
    • Suç ve Ceza

  2. DOM ağacında <li>The Brothers Karamazov</li> simgesini sağ tıklayın ve Kopyala > JS Yolunu Kopyala'yı seçin. Düğümü çözümleyen bir document.querySelector() ifadesi panonuza kopyalandı.

  3. İfadeyi Konsol'a 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 ayrılma 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ıklayıp bu eğitimde ele alınmayan seçenekleri deneyebilirsiniz.

Okumaya devam edin:

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

Ek

Belirli konular hakkında daha fazla bilgi edinin.

HTML ve DOM

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

Nesneler veya düğümlerden oluşan bu ağaç, sayfanın içeriğini temsil eder. Bu ağaca belge nesne modeli veya kısaca DOM adı verilir. Ş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'dan farklı.

HTML, ilk sayfa içeriğini, DOM ise etkin ve mevcut sayfa içeriğini temsil eder. JavaScript düğümleri eklediğinde, kaldırdığında veya düzenlediğinde DOM, HTML'den farklı hale gelir.

MDN'nin Introduction to the DOM (DOM'a Giriş) başlıklı makalesinden daha fazla bilgi edinebilirsiniz.

Görünüme kaydır

Bu, Görünümde kaydırma 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. Değilse Görünüm alanına kaydırma bölümüne geri dönüp işlemi baştan başlatın.

  2. <li>Magritte</li> düğümünü sağ tıklayın ve Scroll into view'u (Görünüme kaydır) seçin. Görünüm alanınız, Magritte düğümünü görebilmeniz için tekrar yukarı kaydırılır. Scroll into view 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 içerik menüsünden bir seçenek belirlemeniz istenir. İçerik menüsünde belirtilen seçeneği görmüyorsanız düğüm metninden uzağı sağ tıklamayı deneyin.

Tüm seçenekleri görmüyorsanız nereyi tıklamanız gerekir?