Install Web App

BRIEF

MINA

XML

Belajar XML #33 Mengakses dan Menavigasi Node XML dengan DOM

profil-penulis

Jihan Ninov Intania Putri

20 Maret 2025

Apa Itu DOM dalam XML?

DOM (Document Object Model) adalah cara kita mengakses dan memanipulasi elemen-elemen dalam dokumen XML. Dengan DOM, kita bisa mengambil data dari XML, mengubahnya, atau menavigasi elemen-elemen yang ada.

Cara Mengakses Node dalam XML

Kita bisa mengakses elemen (node) dalam XML dengan tiga cara utama:

  1. Menggunakan metode getElementsByTagName()

 

  • Cara ini digunakan untuk mengambil semua elemen dengan tag tertentu.

  • Contoh:

 

x.getElementsByTagName("title");

Akan mengambil semua elemen <title> di dalam elemen x.

  • Jika ingin mengambil semua <title> dalam seluruh dokumen XML:

 

xmlDoc.getElementsByTagName("title");

Akan mengambil semua elemen <title> di seluruh dokumen.

Node List dalam DOM

  • Hasil dari getElementsByTagName() adalah Node List, yaitu daftar node (seperti array).

  • Untuk mengakses elemen di dalamnya, gunakan indeks:

 

var x = xmlDoc.getElementsByTagName("title");
var y = x[2]; // Mengakses elemen <title> ketiga

 

  • Catatan: Indeks dimulai dari 0, jadi elemen pertama adalah x[0].

  • Untuk menghitung jumlah elemen dalam Node List, gunakan properti .length:

 

var x = xmlDoc.getElementsByTagName("title");
console.log(x.length); // Menampilkan jumlah elemen <title>

Menelusuri Node (Traversing Nodes)

Kita bisa melihat dan membaca semua elemen dalam XML dengan menggunakan loop.

Contoh: Menampilkan Semua Elemen Anak dari Root (Akar)

var txt = "";
var x = xmlDoc.documentElement.childNodes;

for (var i = 0; i < x.length; i++) {
  if (x[i].nodeType == 1) { // nodeType 1 berarti elemen
    txt += x[i].nodeName + "<br>";
  }
}

Penjelasan:

  1. xmlDoc.documentElement.childNodes → Mengambil semua elemen anak dari root XML.

  2. Loop melalui semua elemen dalam dokumen.

  3. Cek jika nodeType == 1, karena hanya elemen yang kita perlukan.

  4. Menyimpan nama elemen ke dalam txt.

Menavigasi Node Berdasarkan Hubungan

Selain mengambil elemen langsung, kita juga bisa berpindah dari satu elemen ke elemen lain menggunakan hubungan antar-node.

Contoh: Menelusuri Elemen dalam <book>

var x = xmlDoc.getElementsByTagName("book")[0]; // Ambil elemen <book> pertama
var xlen = x.childNodes.length; // Hitung jumlah elemen dalam <book>
var y = x.firstChild; // Ambil elemen anak pertama

var txt = "";
for (var i = 0; i < xlen; i++) {
  if (y.nodeType == 1) { // Jika ini elemen (nodeType 1)
    txt += y.nodeName + "<br>"; // Tambahkan nama elemen ke txt
  }
  y = y.nextSibling; // Pindah ke elemen berikutnya
}

Penjelasan:

  1. Ambil elemen <book> pertama dalam XML.

  2. Hitung jumlah anak yang ada di dalam <book>.

  3. Gunakan firstChild untuk mengambil anak pertama.

  4. Gunakan loop untuk memeriksa setiap anak:

    • Jika nodeType == 1 berarti itu elemen, tambahkan ke teks.

    • Gunakan nextSibling untuk berpindah ke elemen berikutnya

 

Artikel Lainnya Dengan Kategori Terkait :

1. Belajar XML #01 Pengenalan Penjelasan Dasar XML

2. Belajar XML #02 Bagaimana XML Digunakan?

3. Belajar XML #03 Pohon XML dengan Penjelasan Sederhana

4. Belajar XML #04 Aturan Dasar Sintaks XML

5. Belajar XML #05 Memahami Elemen XML

6. Belajar XML #06 Memahami XML Attributes

7. Belajar XML #07 Mengenal XML Namespaces: Solusi Menghindari Konflik Nama Elemen

8. Belajar XML #08 Bagaimana XML Ditampilkan di Browser

9. Belajar XML #09 Cara Mengambil Data dari Server Tanpa Reload Halaman

10. Belajar XML #10 Mengenal XML Parser

11. Belajar XML #11 Memahami XML DOM

12. Belajar XML #12 Cara Menavigasi dan Memilih Data dalam XML

13. Belajar XML #13 Pengertian dan Penggunaan XPath dalam XML

14. Belajar XML #14 Mengubah XML Menjadi HTML dengan XSLT

15. Belajar XML #15 Bahasa Query untuk XML Seperti SQL untuk Database

16. Belajar XML #16 Membuat dan Menautkan Hyperlink dalam XML

17. Belajar XML #17 Memastikan XML Anda Bebas dari Kesalahan

18. Belajar XML #18 Struktur dan Validasi Dokumen XML

19. Belajar XML #19 Standar Struktur Dokumen XML

20. Belajar XML #20 Penyimpanan dan Generasi XML

21. Belajar XML #21 Teknologi untuk Website Lebih Interaktif

22. Belajar XML #22 Teknik Mengambil Data Tanpa Reload Halaman

23. Belajar XML #23 Kirim & Ambil Data Tanpa Reload

24. Belajar XML #24 Memahami AJAX dan Respon Server

25. Belajar XML #25 AJAX untuk Menampilkan Data XML

26. Belajar XML #26 Autocomplete Nama dengan AJAX dan PHP

27. Belajar XML #27 Autocomplete dengan AJAX dan ASP

28. Belajar XML #28 Menampilkan Data dari Database Secara Dinamis

29. Belajar XML #29 Menampilkan Data XML di Tabel HTML dengan JavaScript

30. Belajar XML #30 Contoh dan Aplikasi AJAX

31. Belajar XML #31 Pengertian dan Penggunaan XML DOM

32. Belajar XML #32 Memahami XML DOM Nodes

33. Belajar XML #33 Mengakses dan Menavigasi Node XML dengan DOM

34. Belajar XML #34 Properti Node dalam XML DOM

35. Belajar XML #35 Node List dan Atribut di XML DOM

36. Belajar XML #36 Node Tree & Data Handling

37. Belajar XML #37 Parent, Child, & Sibling

38. Belajar XML #38 Mengambil Data XML dengan JavaScript DOM

39. Belajar XML #39 Mengubah Nilai XML dengan JavaScript

40. Belajar XML #40 Menghapus Node dan Atribut XML dengan JavaScript

41. Belajar XML #41 Mengganti Node dan Teks di XML DOM dengan JavaScript

42. Belajar XML #42 Cara Menambahkan Node Baru di XML DOM dengan JavaScript

43. Belajar XML #43 Cara Menambahkan Node dan Atribut di XML DOM

44. Belajar XML #44 Cara Menambahkan Node dan Atribut di XML DOM dengan JavaScript

45. Belajar XML #45 Cara Menyalin Elemen XML dengan cloneNode() di JavaScript

46. Belajar XML #46 Contoh Lengkap XML DOM JavaScript

47. Belajar XML #47 Cara Menelusuri Data di XML

48. Belajar XML #48 Pengenalan Simpul dan Hubungan Node dalam XPath

49. Belajar XML #49 Cara Menyeleksi Node dalam XML

50. Belajar XML #50 Arah dan Hubungan Antar Node XML

51. Belajar XML #51 Cara Mudah Filter Data di XML

52. Belajar XML #52 Contoh Dasar XPath dalam XML

53. Belajar XML #53 Cara Mengubah Data XML Menjadi HTML

54. Belajar XML #54 Bahasa Penting untuk Mengelola XML

55. Belajar XML #55 Transformasi XML ke XHTML dengan XSLT

56. Belajar XML #56 Mengenal Elemen <xsl:template> dalam XSLT

57. Belajar XML #57 Apa itu <xsl:value-of> dalam XSLT?

58. Belajar XML #58 Apa Itu <xsl:for-each>?

59. Belajar XML #59 Apa Itu <xsl:sort>

60. Belajar XML #60 Apa Itu <xsl:if>

61. Belajar XML #61 Apa Itu <xsl:choose>

62. Belajar XML #62 Apa Itu <xsl:apply-templates>

63. Belajar XML #63 Transformasi XSLT di Sisi Klien

64. Belajar XML #64 Apa Itu XSLT di Server

65. Belajar XML #65 menampilkan data dari file XML dalam bentuk formulir

66. Belajar XML #66 Mengenal Elemen Penting dalam XSLT

67. Belajar XML #67 Apa Itu XQuery

68. Belajar XML #68 Pengenalan Dasar XQuery

69. Belajar XML #69 Apa Itu FLWOR

70. Belajar XML #70 Menampilkan Judul Buku dalam Format HTML

71. Belajar XML #71 Memahami Istilah dalam XQuery

72. Belajar XML #72 Memahami Sintaksis XQuery

73. Belajar XML #73 Menggunakan XQuery untuk Menambahkan Elemen

74. Belajar XML #74 Memilih dan Memfilter dengan XQuery

75. Belajar XML #75 Memahami Fungsi dalam XQuery

76. Belajar XML #76 Memahami DTD

77. Belajar XML #77 DTD - Struktur Dasar XML

78. Belajar XML #78 DTD - Elemen

79. Belajar XML #79 DTD - Atribut

80. Belajar XML #80 Elemen vs. Atribut dalam XML

81. Belajar XML #81 DTD - Entitas

82. Belajar XML #82 Penjelasan Mudah DTD

83. Belajar XML #83 Pengertian XML Schema

84. Belajar XML #84 Memahami XSD dan DTD 

85. Belajar XML #85 Penjelasan tentang Elemen <schema>

86. Belajar XML #86 Penjelasan tentang Elemen Sederhana

87. Belajar XML #87 Cara Validasi Data di XML dengan Tepat

88. Belajar XML #88 Memahami XSD Complex Elements

89. Belajar XML #89 Apa itu XSD Empty Element

90. Belajar XML #90 Apa Itu "Elements-Only" dalam XSD

91. Belajar XML #91 Apa Itu XSD Text-Only Element

92. Belajar XML #92 Apa itu Mixed Content

93. Belajar XML #93 Apa itu XSD Indicators

94. Belajar XML #94 Apa itu Elemen <any> dalam XSD

95. Belajar XML #95 Apa itu <anyAttribute> dalam XSD

96. Belajar XML #96 Element Substitution dalam XSD

97. Belajar XML #97 Memahami XML Schema (XSD)

98. Belajar XML #98 Mengenal XSD String Data Types

99. Belajar XML #99 Tipe Data Tanggal & Waktu di XSD

100. Belajar XML. #100 Jenis Tipe Data Angka di XML Schema (XSD)

101. Belajar XML. #101 Tipe Data Tambahan di XML Schema (XSD) dan Fungsinya

102. Belajar XML. #102 Elemen & Batasan Nilai di XML Schema (XSD)

103. Belajar XML. #103 Pengenalan Singkat XML Web Services

104. Belajar XML. #104 Apa itu WSDL

105. Belajar XML. #105 Apa itu SOAP

106. Belajar XML. #106 Apa itu RDF

107. Belajar XML. #107 Apa itu RSS

108. Belajar XML. #108 Contoh XML dan Cara Menampilkannya

109. Belajar XML. #109 Kuis XML

110. Belajar XML. #110 Apa Itu Syllabus XML

111. Belajar XML. #111 Apa Itu Sertifikat XML

112. Belajar XML. #112 Apa itu XML DOM Node Types

113. Belajar XML. #113 Apa itu Node dalam XML DOM

114. Belajar XML. #114 Penjelasan Singkat NodeList di XML DOM

115. Belajar XML. #115 Apa itu NamedNodeMap

116. Belajar XML. #116 Apa itu Document Object

117. Belajar XML. #117 Apa itu Element Object

118. Belajar XML. #118 Apa itu Attr Object

119. Belajar XML. #119 Penjelasan Mudah Objek Teks dalam XML DOM

120. Belajar XML. #120 Apa itu Objek CDATASection

121. Belajar XML. #121 Apa itu Comment Object dalam XML DOM

122. Belajar XML. #122 Apa itu XMLHttpRequest Object

123. Belajar XML. #123 Apa itu XML Parser Error

124. Belajar XML. #124 Penjelasan Mudah XSLT

125. Belajar XML. #125 Fungsi String dalam XPath, XQuery, dan XSLT

Masuk Terlebih dahulu untuk berkomentar

Paling baru
Lihat Lainnya