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:

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.

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.

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


    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

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

Ö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 = 

"merhaba dünya";

document.getElementById("myDIV").innerHTML = 

"javascript dersi";

Ö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ı";

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

8553

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.