JAVASCRİPT DOM (BELGE NESNE MODELİ) - DOM DÜĞÜMLERİ

HTML Belge Nesnesi Modeli (DOM) karşılaşacağınız JavaScript'in en önemli özelliklerinden biridir. DOM W3C (World Wide Web Consortium) standartlarına bağlıdır. DOM, HTML ve XML belgeleri erişmek için bir standart tanımlar. W3C Belge Nesnesi Modeli (DOM), programların ve komut dosyalarının bir belgenin içeriğini, yapısını ve stilini dinamik olarak erişmesini ve güncellemesini sağlayan bir platform ve dil bağımsız bir arabirimdir.

W3C DOM standart üç ayrı bölüme ayrılmıştır:

• Çekirdek DOM - herhangi bir yapısal belge için standart model
• XML DOM - XML belgeleri için standart model
• HTML DOM - HTML belgeleri için standart modeli

DOM (Document Object Model) HTML ve XML belgeler için bir API (Uygulama Programlama Arayüzü) 'dir. Bir web belgesini veya bir web sayfasını temsil eder; bu da, geliştiricilere her şeyi bir web belgesinde temsil etmenin bir yolunu sunar, böylece ortak bir özellikler ve yöntem seti aracılığıyla erişilebilir olur. DOM, platformdan bağımsız olarak tarayıcıdan bağımsızdır ve web dokümanının içeriğini jenerik bir ağaç yapısı olarak temsil ederek bu bağımsızlığa kavuşmaktadır.

HTML DOM (Belge Nesnesi Modeli)

---

Bir web sayfası yüklendiğinde , tarayıcı sayfanın bir Document Object Modelini oluşturur.

HTML DOM modeli bir ağaç olarak inşa edilmiş Nesnelerdir :

JavaScript, Nesne Modelini kullanarak HTML belgesini düzenlemek için gerekli tüm yetkilere sahiptir. Aşağıdaki gibi belge üzerinde tüm işlemleri gerçekleştirebiliriz.

• JavaScript sayfadaki tüm HTML öğelerini değiştirebilir.
• JavaScript sayfadaki tüm HTML niteliklerini değiştirebilir.
• JavaScript sayfadaki tüm CSS stillerini değiştirebilir.
• JavaScript mevcut HTML öğelerini ve niteliklerini kaldırabilir.
• JavaScript, yeni HTML öğeleri ve nitelikleri ekleyebilir.
• JavaScript sayfadaki tüm mevcut HTML olaylarına tepki gösterebilir.
• JavaScript, sayfada yeni HTML olayları oluşturabilir.

DOM NODE(DÜĞÜM)

---

DOM (Belge Nesnesi Modeli) bir belgeyi hiyerarşik bir ağaç yapısı olarak temsil eder ve belge ağacındaki her öğeye DOM'daki Düğüm adı verilir. HTML DOM'da (Document Object Model) her şey bir düğümdür.

• Belgenin kendisi bir belge düğümüdür.
• Tüm HTML öğeleri, öğe düğümleridir.
• Tüm HTML nitelikleri, öznitelik düğümleridir.
• HTML öğeleri içindeki metinler, metin düğümleridir.
• Yorumlar, yorum düğümleridir.

Bir HTML belgesi bir web tarayıcısına yüklendiğinde, bir belge nesnesi haline gelir .

Belge nesnesi, HTML belgesinin kök düğümüdür ve diğer tüm düğümlerin (öğe düğümleri, metin düğümleri, öznitelik düğümleri ve yorum düğümleri) içinde barındırır.

Ağaç yapısındaki ana nesne, diğer birçok alt öğe içeren Doküman Nesnesi'dir.

Örneğin, document.title , HTML belgesinin başlık Elemanını döndürür.

document.title;

Yukarıdaki kod, HTML sayfasının <title> elemanın içeriğini verir. DOM ayrıca, geliştiricilerin ortak bir özellikler kümesi, yöntem aracılığıyla belgeye erişmesine ve JavaScript sayfalarını kullanarak web sayfasının içeriğini dinamik olarak değiştirmesine izin verir. Aynı zamanda, tuşa basma, fare hareketi gibi HTML belgesiyle kullanıcı etkileşimlerini yakalamak için bir olay modeli de sunar.

TEMEL DÜĞÜM ÖZELLİKLERİ

---

Belge Nesnesi Modeli, bir belgeyi hiyerarşik bir ağaç yapısı olarak temsil eder ve belge ağacındaki her öğeye bir Düğüm adı verilir. Dahası, her düğümde değerler alabileceğiniz veya ayarlayabileceğiniz bir dizi temel özellik vardır. Aşağıda, bir DOM düğümünün sıkça kullanılan özellikleri verilmektedir.

NodeName: Geçerli düğümün adını bir dize olarak döndürür. (etiketin adı (örneğin, P, DIV, SPAN, ...) veya "#text")

NodeType: Bu, düğümün türünü temsil eden bir tam sayı döndürür.

NodeValue:Geçerli düğümün değerini döndürür (Yoksa null) veya verilen metni yazar.

InnerHTML: Düğümün içeriği dize olarak değeri okuyabilir veya düğümün içeriğini değiştirmek için verilen değeri ekler.

nodeName özelliği

---

NodeName özelliği, bir düğümün adını belirtir.

name = node.nodeName

• Eleman düğümlerinin adını büyük harfle döndürür.
• Özellik düğümleri için özniteliğin adını döndürür.
• Metin düğümleri için "#text" döndürür.
• Yorum düğümleri için "#comment" döndürür.
• Belge düğümleri için "#document" döndürür.

var x = document.body.nodeName;
  
alert(x);//ÇIKTI:BODY

ÖRNEK :

var x = document.nodeName ;

alert(x); // ÇIKTI:#document

// ilk paragraf

document.getElementsByTagName("p")[0].nodeName //ÇIKTI:"P"

// İlk paragrafın içeriği

document.getElementsByTagName("p")[0].childNodes[0].nodeName 

// ÇIKTI:"#text"

ÖRNEK :

HTML sayfasındaki ilk paragrafın düğüm örneği

var xx = document.getElementsByTagName("p")[0];

xx.nodeType     //ÇIKTI: 1

xx.nodeName   // ÇIKTI:"P"

xx.nodeValue   //ÇIKTI:null

HTML sayfada bir metin düğüm örneği

var Node = document.getElementsByTagName("p")[0].firstChild;

Node.nodeType      // ÇIKTI:3

Node.nodeName    // ÇIKTI:"#text"

Node.nodeValue    //ÇIKTI:javascript dünyası

ÖRNEK :

<p id="test"> javascript dünyası</p>

JavaScript

var x = document.getElementById("test").firstChild

if (x.nodeName=="#text"){

document.getElementById("test").firstChild.nodeValue="yeni yazı"

}

nodeType özelliği

---

NodeType özelliği, belirtilen düğümün düğüm türünü bir sayı olarak döndürür.

sayi = node.nodeType

• Düğüm bir öğe düğümüyse, nodeType özelliği 1 döndürür
• Düğüm bir öznitelik düğümü ise, nodeType özelliği 2'yi döndürür.
• Düğüm bir metin düğümüyse, nodeType özelliği 3 döndürür.
• Düğüm bir açıklama düğümüyse, nodeType özelliği 8 döndürür.
• Düğüm bir belgeyse, nodeType özelliği 9 döndürür.

NodeTypes - Adlandırılmış Sabitler

--NodeType--	Named Constant
1	ELEMENT_NODE
2	ATTRIBUTE_NODE
3	TEXT_NODE
4	CDATA_SECTION_NODE
5	ENTITY_REFERENCE_NODE
6	ENTITY_NODE
7	PROCESSING_INSTRUCTION_NODE
8	COMMENT_NODE
9	DOCUMENT_NODE
10	DOCUMENT_TYPE_NODE
11	DOCUMENT_FRAGMENT_NODE
12	NOTATION_NODE

ÖRNEK:

var x = document.body.nodeType;

alert (x); //ÇIKTI:1

ÖRNEK:

document.querySelector('a').nodeType==1  //ÇIKTI:true

document.querySelector('a').nodeType==Node.ELEMENT_NODE

// true

ÖRNEK:

HTML:

<a class="test" href="#">javascript</a>

JavaScript:

var x= document.querySelector('.test');

if(x.nodeType==1){
  
  x.setAttribute("href", "https://www.google.com.tr");

}

nodeValue Özelliği

---

NodeValue özelliği, belirtilen düğümün düğüm değerini ayarlar veya döndürür.

Düğüm bir öğe düğümüyse, nodeValue özelliği null döndürür.

İpucu: nodeValue özelliğine alternatif olarak textContent özelliği kullanın.

value = node.nodeValue

• Öğe düğümleri ve belge düğümleri için null döndürür.
• Özellik düğümleri için öznitelik değerini döndürür.
• Metin düğümlerinin içeriğini döndürür.
• Yorum düğümlerinin içeriğini döndürür.

Örnek :

İlk paragrafın ilk çocuğun değeri

document.getElementsByTagName("p")[0].

childNodes[0].nodeValue

// paragraf içindeki veriyi döndürür

innerHTML Özelliği

---

innerHTML özelliği, bir öğenin HTML içeriğini (iç HTML) verilen metin yazılır veya yazılı metni döndürür. innerHTML'yi kullandığınızda, sayfanın içeriğini, sayfayı yenilemeden değiştirebilirsiniz. Bu, web sitenizi kullanıcı girdileri daha hızlı ve daha duyarlı izlenimi verir. innerHTML özelliği, bir HTML öğesine atıfta bulunmak ve içeriğini değiştirmek için JavaScript kodunuzda getElementById() ile birlikte kullanılabilir.

SÖZDİZİMİ :

InnerHTML özelliğini döndür:

Element.innerHTML

InnerHTML özelliğini ayarlayın:

Element.innerHTML = text

// text :Bir elemanın "<b>HTML</b>" içeriği belirtir.

Örnek :

ID = "test" olan bir <p> öğesinin HTML içeriğini alın:

var x = document.getElementById("test").innerHTML;

Örnek :

Id = "liste" olan bir <ul> öğesinin HTML içeriğini alın:

var x = document.getElementById("liste").innerHTML;

Örnek :

İki öğenin HTML içeriğini değiştirin:

document.getElementById("myP").innerHTML = 

"<i>merhaba dünya</i>";

document.getElementById("myDIV").innerHTML = 

"<b>javascript dersi</b>";

Örnek :

ID = "test" olan bir <p> öğesinin HTML içeriğini silin:

document.getElementById("test").innerHTML = "";

TextContent ile Kullanıcı Girişi : Önceki örnekte ki gibi bir durumda muhtemelen kullanıcının herhangi bir HTML etiketi girmesini istemiyoruz. Sadece düz metin olarak girmelerini istiyoruz. HTML etiketleri olmadan düz metin çıktılarken genellikle innerHTML yerine textContent kullanmak daha uygundur. Yani innerHTML'yi textContent ile değiştirirsek şu şekilde olacaktır :

Örnek :

document.getElementById("test").textContent = 

"javascript dünyası";

222

Gönder