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.
- Aşağıda Michelangelo'yu sağ tıklayıp İncele'yi seçin.
- Mikelanj
- Raphael
Geliştirici Araçları'nın Öğeler paneli açılır.
DOM Ağacında
<li>Michelangelo</li>
vurgulanmıştır.
- Geliştirici Araçları'nın sol üst köşesindeki İncele simgesini tıklayın.
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.
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
Yukarı ok tuşuna 2 kez basın.
<ul>
seçildi.Sol ok tuşuna basın.
<ul>
listesi daraltılır.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.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>
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.
Aşağıda Magritte'ı sağ tıklayıp İncele'yi seçin.
- Magritte
- Gün batımı
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.
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 > Tercihler > Öğeler > Fareyle üzerine gelindiğinde cetvelleri göster'i işaretleyin.
Cetvellerin boyutlandırma birimi pikseldir.
Düğüm arayın
DOM Ağacında dize, CSS veya XPath seçici ile arama yapabilirsiniz.
- İmlecinizi Öğeler paneline odaklayın.
- 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.
The Moon is a Harsh Mistress
yazın. DOM Ağacında son cümle vurgulanır.
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 > Tercihler > Genel > Yazarken ara onay kutusunu temizleyin.
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.
Aşağıda Michelle'i sağ tıklayıp İncele'yi seçin.
- Kızartma
- Merve
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.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.
Aşağıda Howard'ı sağ tıklayıp İncele'yi seçin.
- filmler
- Vahit
<li>
öğesini çift tıklayın. Metin, düğümün seçildiğini belirtmek için vurgulanır.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.
Özelliği düzenle sağ tıklama seçeneğini de kullanabilirsiniz.
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.
Aşağıda Hank'i sağ tıklayın ve İncele'yi seçin.
- Dekan
- Espri
- Taddeus
- Bro
<li>
öğesini çift tıklayın.li
metni vurgulanıyor.li
öğesini silin,button
yazın ve ardından Enter tuşuna basın.<li>
düğümü,<button>
düğümü olarak değişir.
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.
Aşağıda Leonard'ı sağ tıklayıp İncele'yi seçin.
- Bir kuruş
- filmler
- Raşit
- daha fazla içerik
Öğeler panelinde geçerli düğümü sağ tıklayın ve açılır menüden HTML olarak düzenle'yi seçin.
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.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.Etiketin içine
Sheldon
yazın ve değişiklikleri uygulamak için Control / Command + Enter tuşlarına basın.
Düğümü kopyala
Öğeyi çoğalt sağ tıklama seçeneğini kullanarak bir öğeyi çoğaltabilirsiniz.
Aşağıda Nana'yı sağ tıklayıp İncele'yi seçin.
- Makyaj Masası Şenlik Ateşi
- Nalan
- Orlando
- Beyaz Gürültü
Öğeler panelinde
<li>Nana</li>
simgesini sağ tıklayın ve açılır menüden Öğeyi kopyala'yı seçin.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.
Bu sayfadaki herhangi bir resmi sağ tıklayıp İncele'yi seçin.
Öğ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.
Ekran görüntüsü, indirilenler bölümüne kaydedilir.
DOM düğümlerini yeniden sıralama
Düğümleri yeniden sıralamak için sürükleyin.
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
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.
Aşağıdaki Sineklerin Efendisi'nin üzerine gelin. Arka plan rengi turuncu olur.
- Sineklerin Efendisi
- Suç ve Ceza
- Moby Dick
Yukarıdaki Sineklerin Efendisi'ni sağ tıklayıp İncele'yi seçin.
<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.
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
H tuşuna basın. Düğüm gizli. Düğümü sağ tıklayıp Öğeyi gizle seçeneğini de kullanabilirsiniz.
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.
Aşağıda Temel'i sağ tıklayıp İncele'yi seçin.
- Resimli Adam
- Bakır camdan
- Vakıf
Delete tuşuna basın. Düğüm silindi. Düğümü sağ tıklayıp Öğeyi sil seçeneğini de kullanabilirsiniz.
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.
Aşağıda Karanlığın Sol Eli'ni sağ tıklayıp İncele'yi seçin.
- Karanlığın Sol Eli
- Dune
Konsol Çekmecesi'ni açmak için Escape tuşuna basın.
$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.Fareyle sonucun üzerine gelin. Düğüm, görüntü alanında vurgulanır.
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.
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.
Aşağıdaki Büyük Uyku'yu sağ tıklayıp İncele'yi seçin.
- Büyük Uyku
- Uzun Veda
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.Konsola
temp1
yazıp Enter tuşuna basın. İfadenin sonucu, değişkenin düğüme değerlendirdiğini gösterir.
JS yolunu kopyala
Otomatik testte referans almanız gerektiğinde JavaScript yolunu bir düğüme kopyalayın.
Aşağıdaki The Brothers Karamazov'u sağ tıklayıp İncele'yi seçin.
- Karamazov Karamazov
- Suç ve Ceza
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 birdocument.querySelector()
ifadesi panonuza kopyalandı.İfadeyi Console'a yapıştırmak için Control+V veya Command+V (Mac) tuşlarına basın.
İfadeyi değerlendirmek için Enter tuşuna basın.
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.
- 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. <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.
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.