Bir Web tarayıcısının içindeki bir HTML belgesinin temsili HTML DOM ağacı olarak değerlendirilir. Bir dizi nesne ve bir web sayfasının yapısını tanımlar.

JavaScript'te Dom nedir??

Genel Bakış

JavaScript programlama serisindeki başka bir heyecan verici blog yayınına hoş geldiniz. Bu makalede, çok temel ama temel bir web geliştirme kavramına değineceğiz. Evet, JavaScript’teki belge nesnesi modelini kapsayacağız. Geçmişte, JavaScript dilini kullanarak geliştirmeye başlamak için zorunlu JavaScript öğreticileri yayınladık. Bu nedenle, bu önemli konseptle ilgili hiçbir şeyi kaçırmamak için bu blog gönderisini iyice okumanızı öneririz. Bu kılavuza başlayalım ve JavaScript’teki DOM’un**, Dom Properties’i ve programla nasıl etkileşime girebileceğinizi öğrenelim. Bu JavaScript kılavuzunda aşağıdaki konuları ele alacağız:

Belge Nesne Modeli (DOM) nedir?

Dom anlamına geliyor? Belge Nesne Modeli (DOM) , bir web tarayıcısının içindeki bir web sayfasının temsilidir. Basitçe, bir HTML belgesinin öğelerinin bir tarayıcıda hiyerarşik gösterimi, belge nesne modeli olarak bilinir. Gerçekten web tarayıcısı tarafından oluşturulan bir ağaç şeklinde oluşur. Bir ağaç şekli oluşturan birbirine bağlı çeşitli düğümlerden oluşur. Buna ek olarak, DOM öğelerinin kendilerine eklenmiş özellikleri ve olayları vardır. Aslında DOM, bir web sayfasının mantıksal yapısını formüle eden ve sayfa öğelerine erişmenin yolunu belirleyen bir programlama arayüzüdür. Temel olarak, JavaScript başlık, H1 ve vb. Gibi HTML etiketlerini tanımaz. Bu nedenle, bir HTML belgesi bir web tarayıcısına yüklendikten sonra, JavaScript’in belge öğelerini anlamasını mümkün kılan DOM oluşturulur.

DOM seviyeleri

Bu bölüm çeşitli Dom seviyelerini gösterecektir. İlk olarak, bir tarayıcıda her zaman üstte olan bir pencere nesnesi vardır ve sonra bir belge düğümü vardır. Aşağıdaki resme bakalım:

DOM seviyeleri

Yukarıdaki resimdeki DOM öğelerini görebilirsiniz. Pencere ve belge üst düzey tarayıcı nesneleridir ve daha sonra kök olarak HTML öğesine sahibiz. Devam ederken, baş ve gövde düğümleri var, başlık düğümü kafa düğümüne aittir ve gövde düğümü, web tarayıcısında oluşturulan ve görünür olan tüm düğümleri içerir. Ayrıca, gövde öğeleri, “Href” özniteliği içeren çapa etiketi gibi görüntüde görebileceğimiz özellikler içerir. Benzer şekilde, diğer DOM düğümleri IMG, Meta ve daha fazlası gibi çeşitli özellikler içerir.

DOM özellikleri nedir ve bunlara nasıl erişilir?

Şimdiye kadar, JavaScript ve DOM seviyelerinde DOM’un ne olduğuna bir cevap bulduk ve DOM düğümlerinden de geçtik. Bu bölümde DOM özelliklerinden geçeceğiz ve onlarla nasıl etkileşim kurabileceğimizi göreceğiz. Her DOM öğesinin kendisine bağlı bir değeri vardır, “P” etiketi metin özelliği vardır, IMG etiketinin görüntü vardır vb. JavaScript yöntemleri düğümlerin değerlerine erişmek için kullanılır. Ayrıca, DOM öğelerine olay dinleyicilerini ekleyebilir/kaldırabilirsiniz. Aşağıdaki dom özelliklerini bulabilirsiniz : Innerhtml : Bu özellik, bir DOM düğümünün HTML içeriğini ayarlamak veya almak için kullanılır.

let htmlContent = document.getElementById("customID").innerHTML;

InnerText : Bir HTML öğesinin metinsel içeriğine erişmek veya ayarlamak için bu DOM özelliğini kullanın.

let textualContent = document.getElementById("customID").innerText;

ParentElement : Bu özelliği öğenin ana düğümüne erişmek için kullanabilirsiniz.

let parentNode = document.getElementById("customID").parentElement.nodeName;

Stil : Bir öğenin stil özelliğini güncelleyin.

let styleAttr = document.getElementById("customID").style.color = "red";

Başlık : Dom’un başlık öğesini güncellemek için bu özelliği kullanın.

document.getElementById("customID").title= "this is a web page";

JavaScript DOM ile etkileşim kurmak için kullanabileceğimiz bazı yöntemler aşağıdadır: addEventListener () : Bu DOM yöntemi, bir öğeye bir olay işleyicisi eklemek için kullanılır.

document.getElementById("customID").addEventListener("click", customFunction);

getAttribute () : Bu DOM yöntemi, bir öğeye bir olay işleyicisi eklemek için kullanılır.

document.getElementById("customID").addEventListener("click", customFunction);

getElementById () : verilen “kimlik” ile belirli bir öğe almanın yöntemi.

let element = document.getElementById("myID");

QuerySelector () : Bir CSS seçicisiyle eşleştirilen ilk alt öğeyi almak için bu yöntemi kullanın.

document.getElementById("myID").querySelector(".first").innerHTML = "change the value";

toString () : Bir öğeyi bir dizeye dönüştürmek için bu yöntemi kullanabilirsiniz. Aynı şekilde, keşfedebileceğiniz birçok yöntem ve özellik vardır.

Çözüm

Bu javasxcript öğreticisini burada JavaScript’te DOM ne olduğunu iyi anlayacağınız umuduyla bitiriyoruz. Ayrıca Dom, Dom seviyeleri, HTML DOM Tree ve Dom Özellikleri geçtik. Bu blog yazısı, Javascrit kavramlarını güçlü bir şekilde kavramak isteyen yeni başlayanlar için çok önemlidir. Ayrıca, “Ayrıca bkz.” Bölümünde bulabileceğiniz başka ilgili makaleler de vardır.

Bizimle iletişime geçin

Son olarak, Containerize.com çeşitli heyecan verici konularda devam eden JavaScript öğreticileri sunmaktadır. Facebook, LinkedIn ve Twitter dahil olmak üzere sosyal medya platformlarımızda bizi takip ederek döngüde kalabilirsiniz.

Bir soru sor

Forum ‘da sorularınızı veya sorgularınızı bize bildirebilirsiniz.

SSS

JavaScript’te DOM ne kullanılır? Bu soruya ayrıntılı bir cevap almak için bu link ziyaret edebilirsiniz.

Ayrıca bakınız