HTML DOM ile, düğüm ilişkileri kullanarak düğüm ağacı gezinebilirsiniz.
DOM Düğümler
W3C HTML DOM standardına göre, bir HTML belgesindeki her şeyin bir düğümdür:
- bütün belgeyi belge düğüm
- Tüm HTML öğesi bir eleman düğümdür
- HTML öğelerinin içindeki metin metin düğümleri vardır
- Her HTML özelliği bir öznitelik düğümü
- Tüm yorumlar açıklama düğümleri vardır
HTML DOM ile düğüm ağacında bütün düğümler JavaScript tarafından erişilebilir.
Yeni düğümler oluşturulabilir ve tüm düğümler değiştirilebilir veya silinebilir.
Düğüm İlişkiler
Düğüm ağacındaki düğümleri birbirine hiyerarşik bir ilişki var.
terimleri ebeveyn, çocuk ve kardeş ilişkilerini tanımlamak için kullanılır.
- Bir düğüm ağacında, üst düğüm kök denir (or root node)
- Her düğüm kök hariç tam olarak bir ebeveyni, (üst öğesi olan) sahiptir
- Bir düğüm çocuk sayı olabilir
- Kardeş (brothers or sisters) aynı ana ile düğümleri
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
HTML itibaren okuyabilir yukarıda:
- <html> kök düğüm
- <html> Hiç anne
- <html> üstüdür <head> ve <body>
- <head> olan ilk çocuk <html>
- <body> olan son çocuk <html>
ve:
- <head> bir çocuk: <title>
- <title> bir çocuk (a text node) : "DOM Tutorial"
- <body> iki çocuğu var: <h1> ve <p>
- <h1> olan bir çocuk: "DOM Lesson one"
- <p> bir çocuk: "Hello world!"
- <h1> ve <p> olan kardeşler
Düğümler Arası Gezinme
Sen JavaScript ile düğümler arasında gezinmek için aşağıdaki düğüm özelliklerini kullanabilirsiniz:
- parentNode
- childNodes[ nodenumber ]
- firstChild
- lastChild
- nextSibling
- previousSibling
Uyarı!
DOM işleme ortak bir hata metni içeren bir eleman düğümü beklemek etmektir.
Bu örnekte: <title> DOM Tutorial </title> öğe düğümü <title> metin içermiyor. Bu bir içeren text node değeri ile "DOM Tutorial" .
Metin düğümünün değeri düğümün ulaşılabilir innerHTML özelliği veya nodeValue .
Child Düğümler ve Düğüm Değerler
Ek olarak innerHTML özelliği, ayrıca kullanabilirsiniz childNodes ve nodeValue Bir elemanın içeriği almak için özelliklerini.
Aşağıdaki örnek, bir düğüm değeri toplar <h1> elemanı ve bir içine kopyalar <p> elemanının:
Örnek
<html>
<body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello!</p>
<script>
var myText =
document.getElementById("intro").childNodes[0].nodeValue;
document.getElementById("demo").innerHTML =
myText;
</script>
</body>
</html> Kendin dene " Yukarıdaki örnekte, getElementById ise bir yöntemdir, childNodes ve nodeValue özelliklerdir.
Bu eğitimde kullandığımız innerHTML özelliği. Ancak, yukarıda yöntemi öğrenme ağaç yapısını ve DOM navigasyon anlamak için yararlıdır.
Kullanma firstChild özelliğini kullanarak aynıdır childNodes[0] :
Örnek
<html>
<body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello World!</p>
<script>
myText = document.getElementById("intro").firstChild.nodeValue;
document.getElementById("demo").innerHTML = myText;
</script>
</body>
</html> Kendin dene " DOM Kök Düğümler
Tam belgeye erişim sağlayan iki özel özellikler vardır:
- document.body - Belgenin gövdesi
- document.documentElement - Tam belge
Örnek
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html> Kendin dene " Örnek
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.documentElement</b> property.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html> Kendin dene " nodeName Mülkiyet
nodeName tesiste düğümün adını belirtir.
- nodeName salt okunur
- nodeName bir eleman düğümünün etiket adı ile aynıdır
- nodeName bir öznitelik düğümün özellik adı
- nodeName bir metin düğümü daima #text
- nodeName belge düğümün her zaman #document
Note: nodeName hep bir HTML elemanının büyük etiket adını içerir.
nodeValue Mülkiyet
nodeValue tesiste düğümün değerini belirtir.
- nodeValue elemanı düğümlerini tanımsız
- nodeValue metin düğümleri için metin kendisidir
- nodeValue özelliği düğümleri için özellik değeri
nodeType Mülkiyet
nodeType özelliği düğümünden tipini verir. nodeType salt okunur.
En önemli düğüm türleri şunlardır:
| eleman tipi | NodeType |
|---|---|
| Element | 1 |
| Attribute | 2 |
| Text | 3 |
| Comment | 8 |
| Document | 9 |