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'sini 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ğiticide DOM ve HTML arasındaki farkı bildiğiniz varsayılmaktadır. 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

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

Düğümü inceleme

Belirli bir DOM düğümüyle ilgileniyorsanız İncele özelliği, Geliştirici Araçları'nı açıp söz konusu düğümü araştırmanın hızlı bir yoludur.

  1. Aşağıda Michelangelo'yu sağ tıklayıp İncele'yi seçin.
    • Mikelanj
    • Raphael Düğüm inceleme Geliştirici Araçları'nın Öğeler paneli açılır. DOM Ağacında <li>Michelangelo</li> vurgulanmıştır. Michelangelo< düğümünü vurgulama
  2. Geliştirici Araçları'nın 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> vurgulanıyor.

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ştirmeye Başlama bölümüne bakın.

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

    • 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 durumda bu, 1. adıma yönelik talimatları içeren <li> düğümüdür.

  5. Az önce daralttığınız <ul> listesini 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 git

DOM Ağacı'nı görüntülerken bazen şu anda görüntü alanında bulunmayan bir DOM düğümüyle ilgilendiğinizi fark edebilirsiniz. Ö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ı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'ı sağ tıklayıp İncele'yi seçin.

    • Magritte
    • Gün batımı

  2. Bu sayfanın altındaki Ek: Görünüme git bölümüne gidin. Talimatlar burada devam eder.

Sayfanın en altındaki talimatları tamamladıktan sonra buraya geri dönmelisiniz.

Cetvelleri göster

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

Cetveller.

Cetvelleri şu iki yöntemden birini kullanarak etkinleştirin:

  • Komut menüsünü açmak için Ctrl+Üst Karakter+P veya Command+Üst Karakter+P (Mac) tuşlarına basın, Show rulers on hover tuşuna basın ve Enter tuşuna basın.
  • Ayarlar. Ayarlar > Tercihler > Öğeler > Fareyle üzerine gelindiğinde cetvelleri göster'i işaretleyin.

Cetvellerin boyutlandırma birimi pikseldir.

DOM Ağacında dize, CSS veya XPath seçici ile 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. DOM Ağacında son cümle 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 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 atlamalardan kaçınmak için Ayarlar. Ayarlar > Tercihler > Genel > Yazarken ara onay kutusunu temizleyin.

Ayarlar&#39;daki Yazarken arama onay kutusu temizlendi.

DOM'yi düzenleme

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ında içeriği çift tıklayın.

  1. Aşağıda Michelle'i sağ tıklayıp İ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 için maviyle vurgulanır.

    Metni düzenleme

  3. Michelle öğesini silin, Leela yazın ve değişikliği onaylamak için Enter tuşuna basın. Yukarıdaki metin Melis iken 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ğıda Howard'ı sağ tıklayıp İncele'yi seçin.

    • filmler
    • Vahit

  2. <li> öğesini çift tıklayın. Metin, düğümün seçildiğini belirtmek için vurgulanır.

    Düğüm düzenleniyor

  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 stil özelliği ekleniyor

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

Düzenleme özelliği vurgulanmış halde sağ tıklama seçenekleri.

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

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

    • Dekan
    • Espri
    • Taddeus
    • Bro

  2. <li> öğesini çift tıklayın. li metni vurgulanıyor.

  3. li öğesini silin, button yazın ve ardından Enter tuşuna basın. <li> düğümü, <button> düğümü olarak değişir.

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

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

    • Bir kuruş
    • filmler
    • 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.

    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. Geliştirici Araçları, sizin için HTML söz dizimini vurgular ve etiketleri otomatik olarak tamamlar.

    HTML etiketlerinin otomatik tamamlanması.

  4. Otomatik tamamlama menüsünden li öğesini seçin ve > yazın. Geliştirici Araçları, imleçten sonra </li> kapanış 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şiklikler uygulanıyor.

Düğümü kopyala

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

  1. Aşağıda 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 hemen kopyalandı.

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ü yakala'yı 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.

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

  3. Ekran görüntüsü, indirilenler bölümüne 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'i sağ tıklayıp İncele'yi seçin. Bunun listedeki son öğe olduğuna dikkat edin.

    • Stevie Harika
    • Tom Waits
    • Chris Thile
    • 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 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ıp Force State > :hover'ı seçin. Bu seçeneği görmüyorsanız Ek: Eksik seçenekler bölümüne bakın. 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 Yıldızlarımdaki Hedefim'i sağ tıklayın ve İncele'yi seçin.

    • Monte Kristo Sayısı
    • Yıldızlar Benim Hedefim

  2. H tuşuna basın. Düğüm gizli. 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 Delete tuşuna basın.

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

    • Resimli Adam
    • Bakır camdan
    • Vakıf

  2. Delete tuşuna basın. Düğüm silindi. 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 ile referansta bulunun

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ğıda Karanlığın Sol Eli'ni sağ tıklayıp İncele'yi seçin.

    • Karanlığın Sol Eli
    • Dune

  2. Konsol Çekmecesi'ni açmak için Escape tuşuna basın.

  3. $0 yazın ve Enter tuşuna basın. Formülün sonucu, $0 işlevinin <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ır.

  5. DOM Ağacında <li>Dune</li> düğmesini tıklayın, Konsola tekrar $0 yazıp tekrar Enter tuşuna basın. Şimdi $0, <li>Dune</li> olarak değerlendiriliyor.

    Konsoldaki ikinci $0 ifadesinin sonucu

Genel değişken olarak sakla

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

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

    • Büyük Uyku
    • Uzun Veda

  2. DOM Ağacında <li>The Big Sleep</li> 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üğüme değerlendirdiğini gösterir.

    temp1 ifadesinin sonucu

JS yolunu kopyala

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

  1. Aşağıdaki The Brothers Karamazov'u sağ tıklayıp İncele'yi seçin.

    • Karamazov Karamazov
    • 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üğü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şikliklerine göre ara

Geliştirici Araçları, JavaScript DOM'yi 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, Geliştirici Araçları'ndaki DOM ile ilgili özelliklerin çoğunu kapsar. DOM Ağacındaki düğümleri sağ tıklayarak ve bu eğiticide ele alınmayan diğer seçeneklerle denemeler yaparak diğerlerini keşfedebilirsiniz. Ayrıca, Öğeler paneli klavye kısayolları bölümüne de bakın.

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 için Topluluk'a göz atın.

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 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 veya düğüm ağacına DOM adı verilir. Ş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 şu şekilde görünür:

html
  head
    title
  body
    p
    script
    p

Sayfanın HTML'si artık DOM'sinden farklıdır. Diğer bir deyişle, HTML ilk sayfa içeriğini, DOM ise geçerli 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üne bakın.

Ek: Görünüme git

Bu bölüm, Görünüme doğru kaydırma 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ünü seçmeye devam etmeniz gerekir. Görünmüyorsa Görünüme kaydırma bölümüne 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 git'i seçin. Görüntü alanınız, Magritte düğümünü görebileceğiniz şekilde tekrar yukarı kaydırılır. Görünüme kaydır seçeneğini göremiyorsanız Ek: Eksik seçenekler bölümüne bakın.

    Görünüme git

Ek: Eksik seçenekler

Bu eğitimdeki talimatların çoğunda, DOM Ağacı'ndaki bir düğümü sağ tıklamanız ve ardından görüntülenen içerik menüsünden bir seçenek belirlemeniz istenir. İçerik menüsünde belirtilen seçeneği görmüyorsanız düğüm metninin dışında sağ tıklamayı deneyin.

Tüm seçenekleri görmüyorsanız nereyi tıklayacaksınız?