DOM nedir? Selenium WebDriver? Yapısı ve Açılımı
Krishna Rungta
⚡ Akıllı Özet
Belge Nesne Modeli, bir HTML sayfasını şu şekilde sunar: JavaKomut dosyası, komut dosyalarının ve nesnelerin bir ağacı olarak düşünülebileceği bir yapıdadır. Selenium WebDriver, tarayıcı çalışırken sayfadaki herhangi bir öğeyi okuyabilir, bulabilir ve değiştirebilir.
DOM nedir? Selenium Web Sürücüsü?
KARAR in Selenium Web Sürücüsü: web geliştirmenin temel bir bileşeni HTML5 kullanarak ve JavaKomut dosyası. DOM'un tam biçimi Belge Nesne Modeli'dir. DOM bir bilgisayar bilimi kavramı değildir. HTML veya XML'deki belgelere erişmek ve bunları düzenlemek için web geliştiricileri arasında standartlaştırılmış basit bir arayüz kümesidir. JavaSenaryo.
Bu standartlar, geliştiricilerin uygulama ayrıntıları hakkında endişelenmeden bir web sayfası oluşturmasına yardımcı olur. Bu arayüzleri standartlaştırmaya dahil olan kuruluşlardan bazıları Mozilla, Apple, Microsoft, GoogleAdobe vb. Ancak, bir standardı resmileştirip yayınlayan W3C'dir – buraya bakın (https://dom.spec.whatwg.org/).
Aşağıdaki bölümler belge yapısını, DOM'un sunduğu nesneleri ve bunların nasıl inceleneceğini ele almaktadır. Mozilla, güncel API referansını şu adreste tutmaktadır: MDN Belge Nesne Modeli sayfaları.
Her Selenium Bulucu bu aynı ağaca göre çözümlenir, bu nedenle aşağıdaki yapı şudur: findElement() arar.
DOM Yapısını Anlamak
Komut dosyası oluşturmayı içeren herhangi bir web sitesi oluşturuyorsanız, DOM yapısını anlamanız gerekecektir. JavaKomut dosyası. Web sitenizde aşağıdaki karmaşık görevlerden herhangi birini veya hepsini yapıyorsanız DOM'u anlamak daha da kritiktir –
- Developing Sayfanın tamamını yenilemeden sürekli olarak kendini güncelleyen içerik – örneğin, kullanıcının portföyündeki tüm hisse senetlerinin güncel fiyatı gibi.
- Developing Dinamik olarak içerik ekleme veya değiştirme gibi gelişmiş kullanıcı etkileşimleri – örneğin portföyünüze daha fazla hisse senedi ekleme yeteneği.
- Developing Kullanıcı tarafından özelleştirilebilir içerik – örneğin, yatırım fonları portföyünün hisse senedi portföyünden önce görünmesi için düzeni değiştirme özelliği gibi.
- Developing Web sitenizde duyarlı içerik oluşturarak, web sitenizin iPhone, masaüstü, tablet vb. farklı medya ekranlarına otomatik olarak uyum sağlamasını sağlayın.
Temel bir HTML sayfası
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article>
<p>
my first article
</p>
</article>
<aside>side bar content</aside>
</body>
</html>
Bir tarayıcının DOM PARSER'ına nasıl görünüyor?
html > head > title
> body > aside
> article > p
Body elementine nasıl erişilir?
<script>
var body = window.document.body;
</script>
“Merhaba Dünya” nasıl denir?
<script>
var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
</script>
Sonunda HTML dosyasının tamamı şöyle görünecek
Açılış Windows Not defterine gidin ve aşağıdaki içeriği içine yapıştırın. Sonra dosyayı “MyFileNewFile.html” olarak kaydedin (dosya adınızın .html ile bittiğinden emin olun).
<!DOCTYPE html> <meta charset="UTF-8"> <html> <head> <title>my page title</title> </head> <body> <article><p>my first article</p></article> <aside>side bar content</aside> <script> var body = document.querySelector("body > article > p").innerHTML = "Hello World!"; </script> </body> </html>
Son olarak dosyayı tercih ettiğiniz tarayıcılardan herhangi birini kullanarak açın; “Merhaba Dünya!” göreceksiniz.
DOM'un bileşenleri Selenium
Aşağıda DOM'un ana bileşenleri verilmiştir: Selenium Web Sürücüsü:
- Pencere
- belge
- Eleman
Her bir bileşen, en dıştaki seviyeden başlayarak ağacın farklı bir seviyesinde yer alır.
Pencere
Pencere, DOM'daki belge nesnesini içeren nesnedir. Her şeyin üstünde duruyor.
Belirli bir belgeden bir pencere nesnesine ulaşmak için
<script>
var window = document.defaultView;
</script>
Sekmeli bir ortamda her sekmenin kendi pencere nesnesi vardır. Ancak, window.resizeTo ve window.resizeBy gibi olayları yakalamak ve uygulamak istiyorsanız, bunlar yalnızca sekmeye değil tüm pencereye uygulanır.
DOM'daki Pencere Nesnesinin Özellikleri
window.localStorage – tarayıcının yerel depolama alanına erişim sağlar. Yerel depolama, bir oturumdan veri depolamak ve almak için kullanılabilir.
<script>
window.localStorage.setItem('name','xyz');
var name = window.localStorage.getItem('name');
</script>
pencere açıcı - bu pencereyi açan pencere nesnesinin referansını alır (ya bir bağlantıya tıklayarak ya da window.open yöntemini kullanarak)
Pencere Nesnesinin Faydalı Yöntemleri
window.alert() – bir mesaj içeren bir uyarı iletişim kutusu görüntüler.
<script>
window.alert('say hello');
</script>
Pencere nesnesinin ortaya çıkardığı birçok yararlı olay vardır. Bunları İleri Konular başlığı altında “Etkinlikler” bölümünde tartışacağız.
belge
Document, DOM ağacının başlangıcını işaret eder. Document, DOM'daki ilk düğümdür. Kapsamı tüm belgeyi kapsayan çeşitli yöntemlere ve özelliklere sahiptir, örneğin: URLgetElementById, querySelector vb.
DOM'daki Belge Nesnesinin Özellikleri
Document.documentURI hem de Belge.URL – Her ikisi de belgenin mevcut konumunu döndürür. Ancak, belge HTML Belgesi türünde değilse.URL çalışmayacak.
Document.activeElement – Bu yöntem, DOM'da odaklanmış olan öğeyi döndürür. Bu, bir kullanıcının odaklanmış olması durumunda şu anlama gelir:ping Bir metin kutusunda, Document.activeElement o metin kutusuna bir referans döndürür.
Belge başlığı – Bu, belirli bir belgenin başlığını okumak veya ayarlamak için kullanılır.
Belge Nesnesinin Yararlı Yöntemleri
Document.getElementById(Dize kimliği) – Bu, DOM manipülasyonunda açık ara en alakalı ve kullanışlı yöntemdir. DOM ağacında bir öğeyi aramak için kullanılır. benzersiz tanımlayıcısını kullanarakArama işlemi büyük/küçük harf duyarlıdır, yani aşağıdaki örnekte " "IntroDiv", "introdiv" veya "iNtrodiv" gibi kelimeler kullanılarak öğe aranamaz.
<!DOCTYPE html> <meta charset="UTF-8"> <html> <head></head> <body> <div id='introDiv'></div> <script> var label = Document.getElementById('introDiv'); label.setInnerHTML('say hello again'); </script> </body> </html>
Document.querySelectorAll(Dize seçici) – Bu, bir veya daha fazla öğeyi seçmek için yaygın olarak kullanılan başka bir yöntemdir. CSS seçici kuralları (jQuery'nin $ gösterimini biliyorsanız, o da bu yöntemi kullanır). CSS seçicilerine çok fazla girmeyeceğiz. CSS seçici, benzer öğelerin bir listesini (seçici kuralına göre) elde edebileceğiniz bir dizi kuraldır. Bu yöntemi daha önce "Merhaba Dünya" bölümünde kullanmıştık.
Eleman
Aşağıdaki diyagram, bir Element nesnesinin DOM ağacında, belge düğümünün altında nasıl yer aldığını göstermektedir.
DOM'daki Öğe Nesnesi
Element, bir belgenin DOM ağacındaki bir düğüm tarafından temsil edilen herhangi bir nesnedir. Her zaman olduğu gibi, Element nesnesinin kendisi sadece bir bağlantıdır.tracTarayıcı ile HTML belgesi arasında özellikler, yöntemler ve olaylar açısından bir iletişim söz konusudur. HTMLElement, SVGElement, XULElement gibi özel Element türleri vardır. Bu eğitimde yalnızca HTMLElement'e odaklanacağız.
DOM'daki Öğe Nesnesinin Özellikleri
Öğe.kimliği – Bu özellik, bir HTML öğesinin “ID”sini (benzersiz bir tanımlayıcı) ayarlamak veya okumak için kullanılabilir. Kimlik, DOM ağacındaki öğeler arasında benzersiz olmalıdır. Daha önce de belirtildiği gibi ID, Document.getElementById yöntemi tarafından DOM ağacındaki belirli bir Element nesnesini seçmek için de kullanılır.
HTMLElement.contentDüzenlenebilir – Bir öğenin contentEditable özelliği, o öğenin içeriğinin düzenlenebilir/değiştirilebilir olup olmadığını belirler. Bu özellik aşağıdaki betikte gösterildiği gibi ayarlanabilir. Bu özellik ayrıca belirli bir öğenin düzenlenebilir olup olmadığını belirlemek için de kullanılabilir. Aşağıdaki betiği herhangi bir HTML gövdesinin içinde deneyin ve gövdenin herhangi bir içeriğini düzenleyebileceğinizi fark edeceksiniz.
<script>
document.body.contentEditable = true;
</script>
Element.innerHTML – innerHTML, bir öğenin içindeki HTML içeriğine erişmek için kullandığımız bir diğer önemli özelliktir. Ayrıca öğenin yeni HTML içeriğini ayarlamak için de kullanılır. Veri alanlarının içeriğini ayarlamak/değiştirmek için yaygın olarak kullanılır. Örneğin web sayfanızın Mumbai Şehri sıcaklığını her saat güncellemesini istiyorsanız, aşağıdaki örnekteki betiği her saat çalıştırabilirsiniz.
<!DOCTYPE html> <meta charset="UTF-8"> <html> <head> <title>my page title</title> </head> <body> <section> <h1>Mumbai</h1> <h2>Temperature</h2> <span id='tempValue'></span><sup>o</sup>C </section> <script> document.getElementById('tempValue').innerHTML = '26'; </script> </body> </html>
Element Nesnesinin Faydalı Yöntemleri
HTMLElement.blur() & HTMLElement.focus() – blur ve focus yöntemleri sırasıyla bir HTML öğesinden odağı kaldırmak veya ona odak vermek için kullanılır. Bu yöntemler en yaygın olarak bir veri girişi web sayfasındaki metin kutuları arasında bir imlecin odağını hareket ettirmek için kullanılır.
Element.querySelectorAll – Bu yöntem, belge nesnesi için daha önce tartışılan querySelector yöntemine benzer. Ancak bu yöntem, aramayı öğenin kendisinin soyundan gelenler içinde sınırlayacaktır.
Doğruluk notu: Yukarıdaki kod bloğu yayınlandığı gibi yeniden üretilmiştir. Çalışan kod şu şekildedir: belge küçük harf d ile ve innerHTML özellik, setInnerHTML() değil.
DOM'da hata ayıklama
Geliştirici araçları Google Chrome, Mozilla Firefox, Internet Explorer (10 veya üstü) veya Safari, doğrudan tarayıcının içinde kolayca hata ayıklamaya olanak tanır. Bazen farklı tarayıcılar aynı HTML işaretlemesini farklı yorumlar ve bu, hata ayıklamanın, DOM'u söz konusu tarayıcının DOM motoru tarafından yorumlandığı şekliyle incelemenize yardımcı olduğu zamandır.
Tarayıcı notu: Internet Explorer 2022'de kullanımdan kaldırıldı, bu nedenle Geliştirici Araçları artık başka bir yerde bulunuyor. Microsoft EdgeAşağıdaki adımlar değişmeden kalır; Geliştirici Araçları F12 tuşuyla açılır.
Şimdi sıcaklık değerini 26'dan değiştirmek istediğinizi varsayalım.oC'den 32'aoSon örneğinizde C. Bunu yapmak için birkaç basit adım atacağız. Burada gösterilen ekran görüntüleri Mozilla'nın Firefox– ancak adımlar diğer tüm tarayıcılarda aynıdır.
- Tarayıcınızı kullanarak MyFileNewFile.html'yi (veya yukarıdaki eğitimlerde HTML dosyanıza verdiğiniz adı) açın.
-
Farenizi kullanın ve sıcaklık değeri 26'ya sağ tıklayınoC'ye gidin ve “Elementi İncele”ye tıklayın
-
Tarayıcınızda "Öğeyi Denetle" seçeneğini seçtiğiniz öğenin vurgulanmış olarak gösterildiğine dikkat edin (hata ayıklayıcı penceresi genellikle ekranın altında görünür)
-
Yanındaki eğik üçgeni tıklayarak öğeyi açın
-
Düzenlemek istediğinizi seçin ve üzerine çift tıklayın. Metni değiştirme seçeneği elde edeceksiniz. Aşağıdaki animasyonlu resimde belirtildiği gibi yapın.
-
HTML sayfanızın içeriğindeki değişikliğe dikkat edin. Artık hata ayıklama penceresini kapatabilirsiniz.
Değişikliklerinizin yalnızca bu oturum için kalıcı olacağını unutmayın. Sayfayı yeniden yüklediğinizde veya yenilediğinizde (F5 tuşuna bastığınızda) değişiklikler geri alınacaktır. Bu, gerçek HTML kaynağını değil, yalnızca tarayıcınızın yerel yorumunu değiştirdiğinizi gösterir.
Eğlenceli bir egzersiz olarak aşağıdakileri yapmayı deneyin. Açık www.facebook.com tarayıcınızda hata ayıklama aracını kullanın ve aşağıdaki sonucu alın – “Facebook'u hackledim” demesine dikkat edin.
Bu işlemin sonucu aşağıdaki ekran görüntüsüne benziyor.
Okuma ve düzenleme düğmeleri statik sayfaları kapsar. Etkileşimli sayfalar ise kullanıcının yaptıklarına tepki verir.
DOM Olayları
DOM'daki Olaylar Nelerdir?
Olaylar, kullanıcı tarafından tetiklenen (veya tarayıcı sayfasının yaşam döngüsü tarafından tetiklenen) olayların mesaj olarak yayınlandığı bir programlama modelidir. Örneğin, bir sayfanın yüklenmesi bittiğinde window.load olayını tetikler ve benzer şekilde kullanıcı bir düğmeye tıkladığında öğesinin tıklama olayı tetiklenir.
Bu mesajlar herhangi bir kişi tarafından ele geçirilebilir. JavaSenaryo kod ve sonra bir geliştirici tarafından tanımlanan eylem Örneğin, web sayfanızdaki sayıların yalnızca kullanıcı bir butona tıkladığında güncellenmesini istediğinizi varsayalım. Bunu aşağıdaki yöntemlerden herhangi biriyle gerçekleştirebilirsiniz:
- HTML öğesinin onclick olayına eylem atayın
- addEventListener yöntemini kullanarak click olayına eylem atayın
Yöntem 1
<!DOCTYPE html>
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai<h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
<br/>
<br/>
<button onclick='onRefreshClick()'>Refresh</button>
</section>
<script>
document.getElementById('tempValue').innerHTML = '26';
function onRefreshClick(e) {
document.getElementById('tempValue').innerHTML = '32';
}
</script>
</body>
</html>
Yöntem 2
<!DOCTYPE html>
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai<h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
<br/>
<br/>
<button id='btnRefresh'>Refresh</button>
</section>
<script>
document.getElementById('tempValue').innerHTML = '26';
document.getElementById('btnRefresh').addEventListener('click', function(event) {
document.getElementById('tempValue').innerHTML = '32' },false);
</script>
</body>
</html>
DOM'da sorun giderme
Eski API notu: Aşağıdaki iki yanıtta `document.write()` kullanılmış. Bu kod yine de çalışıyor, ancak sayfa yüklendikten sonra yapılan bir çağrı belgeyi siliyor. Bunun yerine `console.log()` veya `innerHTML` kullanılması daha uygun olur.
S. Bir öğenin var olup olmadığını nasıl bilebilirim?
A. Seçicilerden herhangi birini kullanarak öğeyi aramayı deneyin ve döndürülen öğenin boş olup olmadığını kontrol edin. Aşağıdaki örneğe bakın –
if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null) { //do something }
S. TypeError alıyorum: document.getElementByID bir işlev değil…
A. Yöntem adının API yöntemiyle tam olarak eşleştiğinden emin olun. Yukarıdaki soruda olduğu gibi - getElementById'dir ve getElementByID değildir.
S. Çocuklar ve childNode'lar arasındaki fark nedir?
A. children metodu bize çağıran öğenin içindeki tüm öğelerin koleksiyonunu getirir. Döndürülen koleksiyon HTMLCollection türündedir. Ancak, childNodes metodu bize çağıran öğenin içindeki tüm düğümlerin koleksiyonunu getirir. Örneğimize aşağıdaki betikleri ekleyin ve farkı görün –
ChildNodes yöntemi 14 öğe döndürür
document.write("Using childNodes method") document.write("<br>"); document.write("<br>"); for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++) { document.write((i+1)+"."); document.write(document.getElementsByTagName("section")[0].childNodes[i].toString()); document.write("<br>"); } document.write("<br>"); document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);
Çocuk yöntemi yalnızca 7 öğe döndürürken
document.write("Using children method") document.write("<br>"); document.write("<br>"); for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++) { document.write((i+1)+"."); document.write(document.getElementsByTagName("section")[0].children[i].toString()); document.write("<br>"); } document.write("<br>"); document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);
S. Yakalanmamış TypeError alıyorum: Tanımlanmamış öğenin 'innerHTML' özelliği okunamıyor…
A. innerHTML özelliğini çağırdığınız HTMLElement örneğinin ilk bildirimden sonra ayarlandığından emin olun. Bu hata genellikle aşağıdaki senaryoda gerçekleşir. Hatanın bir sonraki kod bloğunda nasıl önlenebileceğini görün…
var element; if(false) //say condition was false { element = document.getElementById('tempValue1'); } element.innerHTML = '32';
var element = null; if(false) //say condition was false { element = document.getElementById('tempValue1'); } if(element != null) { element.innerHTML = '32'; }
