diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md
index b5f03098c..b5a7f2fc0 100644
--- a/2-ui/1-document/03-dom-navigation/article.md
+++ b/2-ui/1-document/03-dom-navigation/article.md
@@ -1,333 +1,344 @@
libs:
- - d3
- - domtree
----
+- d3
+- domtree
+---
-# Walking the DOM
+# Menelusuri DOM
-The DOM allows us to do anything with elements and their contents, but first we need to reach the corresponding DOM object.
+DOM memungkinkan kita untuk melakukan apapun dengan elemen-elemen dan isinya, tetapi pertama-tama kita perlu mencapai objek DOM yang sesuai.
-All operations on the DOM start with the `document` object. That's the main "entry point" to DOM. From it we can access any node.
+Semua operasi pada DOM dimulai dengan objek `document`. Itulah "titik masuk" utama ke DOM. Dari objek tersebut, kita dapat mengakses setiap node (simpul).
-Here's a picture of links that allow for travel between DOM nodes:
+Berikut adalah gambar tautan yang memungkinkan untuk berpindah antara simpul-simpul DOM):

-Let's discuss them in more detail.
-
-## On top: documentElement and body
-
-The topmost tree nodes are available directly as `document` properties:
-
-`` = `document.documentElement`
-: The topmost document node is `document.documentElement`. That's the DOM node of the `` tag.
-
-`
` = `document.body`
-: Another widely used DOM node is the `` element -- `document.body`.
-
-`` = `document.head`
-: The `` tag is available as `document.head`.
-
-````warn header="There's a catch: `document.body` can be `null`"
-A script cannot access an element that doesn't exist at the moment of running.
-
-In particular, if a script is inside ``, then `document.body` is unavailable, because the browser did not read it yet.
+Mari kita bahas lebih detail.
-So, in the example below the first `alert` shows `null`:
+## Di Puncak: documentElement dan body
-```html run
-
+Simpul paling atas dari struktur pohon tersedia langsung sebagai properti dari `document`:
-
-
-
+`` = `document.documentElement` : Simpul dokumen paling atas adalah `document.documentElement`. Itu adalah simpul DOM dari tag ``.
-
+`` = `document.body` : Simpul DOM lain yang sering digunakan adalah elemen `` -- `document.body`.
-
+`` = `document.head` : Tag `` tersedia sebagai `document.head`.
-
-
-```
-````
+> **PERINGATAN: Tapi, ada pengecualian: `document.body` bisa saja `null`.**
+>
+> Sebuah skrip tidak dapat mengakses elemen yang belum ada pada saat dijalankan.
+>
+> Khususnya, jika sebuah skrip berada di dalam tag ``, maka `document.body` tidak tersedia, karena browser (peramban) belum membacanya.
+>
+> Jadi, pada contoh di bawah ini, `alert` pertama akan menampilkan `null`:
+>
+> ```html run
+>
+>
+>
+>
+>
+>
+>
+>
+>
+> ```
-```smart header="In the DOM world `null` means \"doesn't exist\""
-In the DOM, the `null` value means "doesn't exist" or "no such node".
-```
+> **Dalam dunia DOM, `null` berarti \"Tidak ada yang eksis.\"**
+> Dalam DOM, nilai `null` berarti "tidak ada" atau "tidak ada simpul tersebut".
-## Children: childNodes, firstChild, lastChild
+## Anak-anak (Children): childNodes, firstChild, lastChild
-There are two terms that we'll use from now on:
+Ada dua istilah yang akan kita gunakan mulai sekarang:
-- **Child nodes (or children)** -- elements that are direct children. In other words, they are nested exactly in the given one. For instance, `` and `` are children of `` element.
-- **Descendants** -- all elements that are nested in the given one, including children, their children and so on.
+- **Simpul anak (Child nodes) atau Anak-anak (Children)** -- elemen-elemen yang merupakan anak langsung. Dengan kata lain, mereka bersarang tepat di dalam elemen yang diberikan. Misalnya, `` dan `` merupakan anak-anak dari elemen ``.
+- **Keturunan (Descendants)** -- semua elemen yang bersarang di dalam elemen yang diberikan, termasuk anak-anak mereka, cucu-cucu mereka, dan seterusnya.
-For instance, here `` has children `` and `
` (and few blank text nodes):
+Misalnya, di sini `` memiliki anak-anak berupa `` dan `
` (dan beberapa simpul teks kosong):
```html run
-
- Begin
-
-
-
+
+ Mulai
+
+
+
```
-...And descendants of `` are not only direct children ``, `
` but also more deeply nested elements, such as `- ` (a child of `
`) and `` (a child of `- `) -- the entire subtree.
+... Dan keturunan (descendants) dari `` tidak hanya anak langsung `
`, `
`, tetapi juga elemen-elemen yang bersarang lebih dalam, seperti `- ` (anak dari `
`) dan `` (anak dari `- `) -- seluruh sub-pohon.
-**The `childNodes` collection lists all child nodes, including text nodes.**
+**Koleksi `childNodes` mencantumkan semua simpul anak, termasuk simpul teks.**
-The example below shows children of `document.body`:
+Contoh di bawah ini menampilkan anak-anak dari `document.body`:
```html run
-
-
Begin
-
-
-
- End
-
-
- ...more stuff...
-
+
+ Mulai
+
+
+
+ Akhir
+
+
+ ...lebih banyak hal...
+
```
-Please note an interesting detail here. If we run the example above, the last element shown is `
+>
+> ```
-Please, don't. The `for..in` loop iterates over all enumerable properties. And collections have some "extra" rarely used properties that we usually do not want to get:
+## Saudara kandung (siblings) dan orang tua (parent)
-```html run
-
-
-
-````
-
-## Siblings and the parent
+_Saudara kandung_ adalah simpul-simpul yang merupakan anak-anak dari orang tua yang sama.
-*Siblings* are nodes that are children of the same parent.
-
-For instance, here `` and `` are siblings:
+Misalnya, di sini `` dan `` adalah saudara kandung:
```html
- ......
+
+ ...
+
+
+ ...
+
```
-- `` is said to be the "next" or "right" sibling of ``,
-- `` is said to be the "previous" or "left" sibling of ``.
+- `` disebut sebagai saudara "berikutnya" atau "kanan" dari ``,
+- `` disebut sebagai saudara "sebelumnya" atau "kiri" dari ``.
-The next sibling is in `nextSibling` property, and the previous one - in `previousSibling`.
+Saudara berikutnya dapat diakses melalui properti `nextSibling`, dan saudara sebelumnya melalui properti `previousSibling`.
-The parent is available as `parentNode`.
+Orang tua dari suatu simpul dapat diakses menggunakan properti `parentNode`.
-For example:
+Contohnya:
```js run
-// parent of is
-alert( document.body.parentNode === document.documentElement ); // true
+// Orang tua dari adalah
+alert(document.body.parentNode === document.documentElement); // true (benar)
-// after goes
-alert( document.head.nextSibling ); // HTMLBodyElement
+// Setelah ada
+alert(document.head.nextSibling); // HTMLBodyElement
-// before goes
-alert( document.body.previousSibling ); // HTMLHeadElement
+// Sebelum ada
+alert(document.body.previousSibling); // HTMLHeadElement
```
-## Element-only navigation
+## Navigasi Hanya untuk Elemen
-Navigation properties listed above refer to *all* nodes. For instance, in `childNodes` we can see both text nodes, element nodes, and even comment nodes if they exist.
+Properti-navigasi yang telah disebutkan sebelumnya merujuk pada semua simpul. Misalnya, dalam `childNodes` kita bisa melihat baik simpul teks, simpul elemen, dan bahkan simpul komentar jika ada.
-But for many tasks we don't want text or comment nodes. We want to manipulate element nodes that represent tags and form the structure of the page.
+Namun, untuk banyak tugas, kita tidak tertarik pada simpul teks atau komentar. Kita ingin memanipulasi simpul elemen yang mewakili tag dan membentuk struktur halaman.
-So let's see more navigation links that only take *element nodes* into account:
+Oleh karena itu, mari kita lihat lebih banyak tautan navigasi yang hanya memperhatikan _simpul elemen_:

-The links are similar to those given above, just with `Element` word inside:
-
-- `children` -- only those children that are element nodes.
-- `firstElementChild`, `lastElementChild` -- first and last element children.
-- `previousElementSibling`, `nextElementSibling` -- neighbor elements.
-- `parentElement` -- parent element.
+Tautan-tautan tersebut mirip dengan yang telah disebutkan sebelumnya, hanya dengan tambahan kata `Element`:
+
+- `children` -- hanya mencakup anak-anak yang merupakan simpul elemen.
+- `firstElementChild`, `lastElementChild` -- anak-anak elemen pertama dan terakhir.
+- `previousElementSibling`, `nextElementSibling` -- elemen tetangga.
+- `parentElement` -- elemen orang tua.
+
+> **Mengapa `parentElement`? Apakah orang tua bisa _tidak_ berupa elemen?**
+>
+> Properti `parentElement` mengembalikan "elemen" orang tua, sedangkan `parentNode` mengembalikan "semua simpul" orang tua. Biasanya, kedua properti tersebut akan mengambil orang tua yang sama.
+>
+> Dengan satu pengecualian yaitu `document.documentElement`:
+>
+> ```js run
+> alert(document.documentElement.parentNode); // document
+> alert(document.documentElement.parentElement); // null
+> ```
+>
+> Alasannya adalah bahwa simpul akar (root) `document.documentElement` (``) memiliki `document` sebagai orang tua. Namun, `document` bukanlah sebuah simpul elemen, sehingga `parentNode` mengembalikan `document`, sementara `parentElement` tidak.
+>
+> Detail ini bisa berguna ketika kita ingin bergerak dari suatu elemen sembarang `elem` ke ``, tapi tidak ingin sampai pada `document`:
+>
+> ```js
+> while ((elem = elem.parentElement)) {
+> // bergerak naik hingga mencapai
+> alert(elem);
+> }
+> ```
+
+Mari kita modifikasi salah satu contoh di atas: gantikan `childNodes` dengan `children`. Sekarang hanya akan menampilkan elemen-elemen:
-````smart header="Why `parentElement`? Can the parent be *not* an element?"
-The `parentElement` property returns the "element" parent, while `parentNode` returns "any node" parent. These properties are usually the same: they both get the parent.
-
-With the one exception of `document.documentElement`:
-
-```js run
-alert( document.documentElement.parentNode ); // document
-alert( document.documentElement.parentElement ); // null
+```html run
+
+
+ Mulai
+
+
+
+ Akhir
+
+
+ ...
+
+
```
-The reason is that the root node `document.documentElement` (``) has `document` as its parent. But `document` is not an element node, so `parentNode` returns it and `parentElement` does not.
+## Tautan-tautan Tambahan: Tabel [#dom-navigation-tables]
-This detail may be useful when we want to travel up from an arbitrary element `elem` to ``, but not to the `document`:
-```js
-while(elem = elem.parentElement) { // go up till
- alert( elem );
-}
-```
-````
+Hingga saat ini, kita telah menjelaskan properti-properti navigasi dasar.
-Let's modify one of the examples above: replace `childNodes` with `children`. Now it shows only elements:
+Terdapat beberapa jenis elemen DOM yang mungkin menyediakan properti tambahan, khusus untuk jenisnya, untuk kemudahan.
-```html run
-
-
- Begin
-
-
-
- End
-
-
- ...
-
-
-```
+Tabel adalah contoh yang bagus untuk hal ini, dan merupakan kasus yang cukup penting:
-## More links: tables [#dom-navigation-tables]
+**Elemen ``** mendukung (selain dari yang dijelaskan di atas) properti-properti berikut:
-Till now we described the basic navigation properties.
+- `table.rows` -- koleksi elemen-elemen `` dari tabel.
+- `table.caption/tHead/tFoot` -- referensi ke elemen ``, ``, `
`.
+- `table.tBodies` -- koleksi elemen-elemen `` (bisa banyak sesuai standar, tetapi minimal akan ada satu -- bahkan jika tidak ada dalam sumber HTML, peramban akan menambahkannya dalam DOM).
-Certain types of DOM elements may provide additional properties, specific to their type, for convenience.
+**Elemen ``, ``, ``** menyediakan properti `rows`:
-Tables are a great example of that, and represent a particularly important case:
+- `tbody.rows` -- koleksi elemen-elemen `` di dalamnya.
-**The ``** element supports (in addition to the given above) these properties:
-- `table.rows` -- the collection of `` elements of the table.
-- `table.caption/tHead/tFoot` -- references to elements ``, ``, `
`.
-- `table.tBodies` -- the collection of `` elements (can be many according to the standard, but there will always be at least one -- even if it is not in the source HTML, the browser will put it in the DOM).
+**Elemen ``:**
-**``, `
`, ``** elements provide the `rows` property:
-- `tbody.rows` -- the collection of `` inside.
+- `tr.cells` -- koleksi sel-sel dari `` dan ` | ` di dalam ` |
` yang diberikan.
+- `tr.sectionRowIndex` -- posisi (indexs) dari elemen `
` tertentu di dalam elemen `/
/` yang melingkupinya.
+- `tr.rowIndex` -- nomor dari elemen `` di dalam tabel secara keseluruhan (termasuk semua baris tabel).
-**`
`:**
-- `tr.cells` -- the collection of `` and ` | ` cells inside the given ` |
`.
-- `tr.sectionRowIndex` -- the position (index) of the given `
` inside the enclosing `/
/`.
-- `tr.rowIndex` -- the number of the `` in the table as a whole (including all table rows).
+**Elemen `` dan ` | `:**
-**` | ` and ` | `:**
-- `td.cellIndex` -- the number of the cell inside the enclosing ` |
`.
+- `td.cellIndex` -- nomor sel di dalam elemen `
`.
-An example of usage:
+Contoh penggunaannya:
```html run height=100
- one | two |
+ one |
+ two |
- three | four |
+ three |
+ four |
```
-The specification: [tabular data](https://html.spec.whatwg.org/multipage/tables.html).
+Spesifikasi: [Data Tabel](https://html.spec.whatwg.org/multipage/tables.html).
-There are also additional navigation properties for HTML forms. We'll look at them later when we start working with forms.
+Terdapat juga properti-properti navigasi tambahan untuk formulir HTML. Kita akan melihatnya nanti ketika kita mulai bekerja dengan formulir.
-## Summary
+## Ringkasan
-Given a DOM node, we can go to its immediate neighbors using navigation properties.
+Diberikan sebuah simpul DOM, kita dapat menuju tetangganya yang langsung menggunakan properti-properti navigasi.
-There are two main sets of them:
+Ada dua set utama properti-properti tersebut:
-- For all nodes: `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, `nextSibling`.
-- For element nodes only: `parentElement`, `children`, `firstElementChild`, `lastElementChild`, `previousElementSibling`, `nextElementSibling`.
+- Untuk semua simpul: `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, `nextSibling`.
+- Hanya untuk elemen: `parentElement`, `children`, `firstElementChild`, `lastElementChild`, `previousElementSibling`, `nextElementSibling`.
-Some types of DOM elements, e.g. tables, provide additional properties and collections to access their content.
+Beberapa jenis elemen DOM, misalnya tabel, menyediakan properti dan koleksi tambahan untuk mengakses kontennya.