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 hakkında temel bilgileri öğ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ı, DevTools'da DOM ile ilgili tüm etkinlikleri gerçekleştirdiğiniz yerdir.

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.

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ımdaki talimatları içeren <li> düğümüdür.

  5. <ul> Az önce daralttığınız listeyi 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 görüntü alanında olmayan bir DOM düğümüyle ilgilenirsiniz. Ö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 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 kısmına gidin.

İşlemi tamamladıktan sonra 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:

  • Komut menüsünü açmak için Control+Üst Karakter+P veya Command+Üst Karakter+P (macOS) tuşlarına bası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. Control+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 arama yap onay kutusunun işaretini kaldırın.

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.

    • Fry
    • 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. Silme Michelle, 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çim yapıldığını 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önüşür.

    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ü girin.

  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 adlı temsilciyi silmek için 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

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, 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 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. DevTools, kapanış </li> etiketini imlecin sonrasına 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 kopyalanmış.

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.

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

Daha fazla bilgiyi Geliştirici Araçları ile ekran görüntüsü almanın 4 yolu başlıklı makalede bulabilirsiniz.

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. Listenin son öğesi 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.

Durumu zorunlu kıl

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

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

    • Sineklerin Efendisi
    • 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 ek bilgileri okuyun.

    Aslında düğümün ü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 listede The Stars My Destination'ı sağ tıklayın ve İncele'yi seçin.

    • The Count of Monte Cristo
    • 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.

Konsoldaki erişim düğümleri

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

Ş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'da tekrar $0 yazın ve Enter tuşuna tekrar basın. Şimdi $0, <li>Dune</li> olarak değerlendirilir.

    Konsoldaki ikinci 0 TL&#39;lik 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 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> simgesini 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 ile ilgili eki okuyun.

  3. Konsol'a 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 kopyala

Bir düğüme ait JavaScript yolunu kopyalayarak otomatik bir testte referans olarak kullanı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> simgesini sağ tıklayın ve Kopyala > JS Yolunu Kopyala'yı seçin. Düğümle sonuçlanan 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 DOM ağacındaki düğümleri sağ tıklayıp bu eğitimde ele alınmayan seçenekleri deneyerek keşfedebilirsiniz.

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 dokümanı 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üyor:

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 bölüm, 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 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. Görünüm alanına 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ında bir düğümü sağ tıklayıp açılan bağlam menüsünden bir seçenek belirlemeniz istenir. Belirtilen seçeneği bağlam menüsünde görmüyorsanız düğüm metninden uzağa sağ tıklamayı deneyin.

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