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):
 
 ![](dom-links.svg)
 
-Let's discuss them in more detail.
-
-## On top: documentElement and body
-
-The topmost tree nodes are available directly as `document` properties:
-
-`<html>` = `document.documentElement`
-: The topmost document node is `document.documentElement`. That's the DOM node of the `<html>` tag.
-
-`<body>` = `document.body`
-: Another widely used DOM node is the `<body>` element -- `document.body`.
-
-`<head>` = `document.head`
-: The `<head>` 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 `<head>`, 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
-<html>
+Simpul paling atas dari struktur pohon tersedia langsung sebagai properti dari `document`:
 
-<head>
-  <script>
-*!*
-    alert( "From HEAD: " + document.body ); // null, there's no <body> yet
-*/!*
-  </script>
-</head>
+`<html>` = `document.documentElement` : Simpul dokumen paling atas adalah `document.documentElement`. Itu adalah simpul DOM dari tag `<html>`.
 
-<body>
+`<body>` = `document.body` : Simpul DOM lain yang sering digunakan adalah elemen `<body>` -- `document.body`.
 
-  <script>
-    alert( "From BODY: " + document.body ); // HTMLBodyElement, now it exists
-  </script>
+`<head>` = `document.head` : Tag `<head>` tersedia sebagai `document.head`.
 
-</body>
-</html>
-```
-````
+> **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 `<head>`, maka `document.body` tidak tersedia, karena browser (peramban) belum membacanya.
+>
+> Jadi, pada contoh di bawah ini, `alert` pertama akan menampilkan `null`:
+>
+> ```html run
+> <html>
+>   <head>
+>     <script>
+>       *!*
+>           alert( "Dari HEAD: " + document.body ); // null, belum ada <body>
+>       */!*
+>     </script>
+>   </head>
+>
+>   <body>
+>     <script>
+>       alert("Dari BODY: " + document.body); // HTMLBodyElement, sekarang sudah ada
+>     </script>
+>   </body>
+> </html>
+> ```
 
-```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, `<head>` and `<body>` are children of `<html>` 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, `<head>` dan `<body>` merupakan anak-anak dari elemen `<html>`.
+- **Keturunan (Descendants)** -- semua elemen yang bersarang di dalam elemen yang diberikan, termasuk anak-anak mereka, cucu-cucu mereka, dan seterusnya.
 
-For instance, here `<body>` has children `<div>` and `<ul>` (and few blank text nodes):
+Misalnya, di sini `<body>` memiliki anak-anak berupa `<div>` dan `<ul>` (dan beberapa simpul teks kosong):
 
 ```html run
 <html>
-<body>
-  <div>Begin</div>
-
-  <ul>
-    <li>
-      <b>Information</b>
-    </li>
-  </ul>
-</body>
+  <body>
+    <div>Mulai</div>
+
+    <ul>
+      <li>
+        <b>Informasi</b>
+      </li>
+    </ul>
+  </body>
 </html>
 ```
 
-...And descendants of `<body>` are not only direct children `<div>`, `<ul>` but also more deeply nested elements, such as `<li>` (a child of `<ul>`) and `<b>` (a child of `<li>`) -- the entire subtree.
+... Dan keturunan (descendants) dari `<body>` tidak hanya anak langsung `<div>`, `<ul>`, tetapi juga elemen-elemen yang bersarang lebih dalam, seperti `<li>` (anak dari `<ul>`) dan `<b>` (anak dari `<li>`) -- 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
 <html>
-<body>
-  <div>Begin</div>
-
-  <ul>
-    <li>Information</li>
-  </ul>
-
-  <div>End</div>
-
-  <script>
-*!*
-    for (let i = 0; i < document.body.childNodes.length; i++) {
-      alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ..., SCRIPT
-    }
-*/!*
-  </script>
-  ...more stuff...
-</body>
+  <body>
+    <div>Mulai</div>
+
+    <ul>
+      <li>Informasi</li>
+    </ul>
+
+    <div>Akhir</div>
+
+    <script>
+      *!*
+          for (let i = 0; i < document.body.childNodes.length; i++) {
+            alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ..., SCRIPT
+          }
+      */!*
+    </script>
+    ...lebih banyak hal...
+  </body>
 </html>
 ```
 
-Please note an interesting detail here. If we run the example above, the last element shown is `<script>`. In fact, the document has more stuff below, but at the moment of the script execution the browser did not read it yet, so the script doesn't see it.
+Harap perhatikan detail menarik di sini. Jika kita menjalankan contoh di atas, elemen terakhir yang ditampilkan adalah `<script>`. Sebenarnya, dokumen memiliki "lebih banyak hal" di bawahnya, tetapi pada saat eksekusi skrip, browser belum membacanya, sehingga skrip tidak melihatnya.
 
-**Properties `firstChild` and `lastChild` give fast access to the first and last children.**
+**Properti `firstChild` dan `lastChild` memberikan akses cepat ke anak pertama dan anak terakhir.**
+
+Mereka hanyalah cara atau jalan pintas. Jika ada simpul anak, maka pernyataan berikut selalu benar:
 
-They are just shorthands. If there exist child nodes, then the following is always true:
 ```js
-elem.childNodes[0] === elem.firstChild
-elem.childNodes[elem.childNodes.length - 1] === elem.lastChild
+elem.childNodes[0] === elem.firstChild; // true (benar)
+elem.childNodes[elem.childNodes.length - 1] === elem.lastChild; // true (benar)
 ```
 
-There's also a special function `elem.hasChildNodes()` to check whether there are any child nodes.
+Juga, ada fungsi khusus `elem.hasChildNodes()` untuk memeriksa apakah ada atau tidaknya simpul anak.
 
-### DOM collections
+### Koleksi DOM
 
-As we can see, `childNodes` looks like an array. But actually it's not an array, but rather a *collection* -- a special array-like iterable object.
+Seperti yang kita lihat, `childNodes` terlihat seperti sebuah array. Tetapi sebenarnya bukanlah sebuah array, melainkan sebuah _koleksi_ -- sebuah objek yang mirip array dengan sifat iterasi khusus.
 
-There are two important consequences:
+Ada dua konsekuensi penting:
 
-1. We can use `for..of` to iterate over it:
-  ```js
-  for (let node of document.body.childNodes) {
-    alert(node); // shows all nodes from the collection
-  }
-  ```
-  That's because it's iterable (provides the `Symbol.iterator` property, as required).
+1. Kita dapat menggunakan `for..of` untuk mengulanginya:
 
-2. Array methods won't work, because it's not an array:
-  ```js run
-  alert(document.body.childNodes.filter); // undefined (there's no filter method!)
-  ```
+   ```js
+   for (let node of document.body.childNodes) {
+     alert(node); // menampilkan semua simpul dari koleksi
+   }
+   ```
 
-The first thing is nice. The second is tolerable, because we can use `Array.from` to create a "real" array from the collection, if we want array methods:
+   Hal ini dikarenakan koleksi tersebut dapat diiterasi (menyediakan properti `Symbol.iterator`, seperti yang dibutuhkan).
 
-  ```js run
-  alert( Array.from(document.body.childNodes).filter ); // function
-  ```
+2. Method-method array tidak akan berfungsi, karena ini bukanlah sebuah array:
 
-```warn header="DOM collections are read-only"
-DOM collections, and even more -- *all* navigation properties listed in this chapter are read-only.
+   ```js run
+   alert(document.body.childNodes.filter); // undefined (tidak ada method filter!)
+   ```
 
-We can't replace a child by something else by assigning `childNodes[i] = ...`.
+   Hal pertama itu bagus. Yang kedua bisa ditoleransi, karena kita dapat menggunakan `Array.from` untuk membuat sebuah array "sejati" dari koleksi tersebut, jika kita membutuhkan method-method array:
 
-Changing DOM needs other methods. We will see them in the next chapter.
-```
+   ```js run
+   alert(Array.from(document.body.childNodes).filter); // fungsi
+   ```
 
-```warn header="DOM collections are live"
-Almost all DOM collections with minor exceptions are *live*. In other words, they reflect the current state of DOM.
+> **PERINGATAN: Koleksi-koleksi DOM bersifat hanya-baca (read-only).**
+>
+> Koleksi-koleksi DOM, bahkan lebih -- _semua_ properti navigasi yang tercantum dalam bab ini bersifat hanya-baca (read-only).
+>
+> Kita tidak dapat menggantikan suatu child (anak) dengan yang lain dengan cara menetapkan `childNodes[i] = ...`.
+>
+> Untuk mengubah DOM, diperlukan method-method lain. Kita akan melihatnya dalam bab selanjutnya.
 
-If we keep a reference to `elem.childNodes`, and add/remove nodes into DOM, then they appear in the collection automatically.
-```
+> **PERINGATAN: Koleksi-koleksi DOM bersifat dinamis (live).**
+>
+> Hampir semua koleksi DOM dengan beberapa pengecualian _bersifat dinamis (live)_. Dengan kata lain, mereka mencerminkan keadaan terkini dari DOM.
+>
+> Jika kita menyimpan referensi ke `elem.childNodes`, dan menambahkan/menghapus simpul pada DOM, maka simpul-simpul tersebut akan muncul secara otomatis dalam koleksi tersebut.
 
-````warn header="Don't use `for..in` to loop over collections"
-Collections are iterable using `for..of`. Sometimes people try to use `for..in` for that.
+> **PERINGATAN: Jangan menggunakan `for..in` untuk mengulangi koleksi.**
+>
+> Koleksi dapat diulangi menggunakan `for..of`. Terkadang orang lain mencoba menggunakan `for..in` untuk itu.
+>
+> Tolong, jangan melakukannya. Perulangan `for..in` mengulangi seluruh properti yang dapat dihitung (enumerable). Dan koleksi memiliki beberapa properti "tambahan" yang jarang digunakan yang biasanya tidak ingin kita dapatkan:
+>
+> ```html run
+> <body>
+>   <script>
+>     // menampilkan 0, 1, panjang (length), item, nilai (values), dan lain-lain.
+>     for (let prop in document.body.childNodes) alert(prop);
+>   </script>
+> </body>
+> ```
 
-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
-<body>
-<script>
-  // shows 0, 1, length, item, values and more.
-  for (let prop in document.body.childNodes) alert(prop);
-</script>
-</body>
-````
-
-## 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 `<head>` and `<body>` are siblings:
+Misalnya, di sini `<head>` dan `<body>` adalah saudara kandung:
 
 ```html
 <html>
-  <head>...</head><body>...</body>
+  <head>
+    ...
+  </head>
+  <body>
+    ...
+  </body>
 </html>
 ```
 
-- `<body>` is said to be the "next" or "right" sibling of `<head>`,
-- `<head>` is said to be the "previous" or "left" sibling of `<body>`.
+- `<body>` disebut sebagai saudara "berikutnya" atau "kanan" dari `<head>`,
+- `<head>` disebut sebagai saudara "sebelumnya" atau "kiri" dari `<body>`.
 
-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 <body> is <html>
-alert( document.body.parentNode === document.documentElement ); // true
+// Orang tua dari <body> adalah <html>
+alert(document.body.parentNode === document.documentElement); // true (benar)
 
-// after <head> goes <body>
-alert( document.head.nextSibling ); // HTMLBodyElement
+// Setelah <head> ada <body>
+alert(document.head.nextSibling); // HTMLBodyElement
 
-// before <body> goes <head>
-alert( document.body.previousSibling ); // HTMLHeadElement
+// Sebelum <body> ada <head>
+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_:
 
 ![](dom-links-elements.svg)
 
-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` (`<html>`) 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 `<html>`, tapi tidak ingin sampai pada `document`:
+>
+> ```js
+> while ((elem = elem.parentElement)) {
+>   // bergerak naik hingga mencapai <html>
+>   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
+<html>
+  <body>
+    <div>Mulai</div>
+
+    <ul>
+      <li>Informasi</li>
+    </ul>
+
+    <div>Akhir</div>
+
+    <script>
+      *!*
+          for (let elem of document.body.children) {
+            alert(elem); // DIV, UL, DIV, SCRIPT
+          }
+      */!*
+    </script>
+    ...
+  </body>
+</html>
 ```
 
-The reason is that the root node `document.documentElement` (`<html>`) 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 `<html>`, but not to the `document`:
-```js
-while(elem = elem.parentElement) { // go up till <html>
-  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
-<html>
-<body>
-  <div>Begin</div>
-
-  <ul>
-    <li>Information</li>
-  </ul>
-
-  <div>End</div>
-
-  <script>
-*!*
-    for (let elem of document.body.children) {
-      alert(elem); // DIV, UL, DIV, SCRIPT
-    }
-*/!*
-  </script>
-  ...
-</body>
-</html>
-```
+Tabel adalah contoh yang bagus untuk hal ini, dan merupakan kasus yang cukup penting:
 
-## More links: tables [#dom-navigation-tables]
+**Elemen `<table>`** mendukung (selain dari yang dijelaskan di atas) properti-properti berikut:
 
-Till now we described the basic navigation properties.
+- `table.rows` -- koleksi elemen-elemen `<tr>` dari tabel.
+- `table.caption/tHead/tFoot` -- referensi ke elemen `<caption>`, `<thead>`, `<tfoot>`.
+- `table.tBodies` -- koleksi elemen-elemen `<tbody>` (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 `<thead>`, `<tfoot>`, `<tbody>`** menyediakan properti `rows`:
 
-Tables are a great example of that, and represent a particularly important case:
+- `tbody.rows` -- koleksi elemen-elemen `<tr>` di dalamnya.
 
-**The `<table>`** element supports (in addition to the given above) these properties:
-- `table.rows` -- the collection of `<tr>` elements of the table.
-- `table.caption/tHead/tFoot` -- references to elements `<caption>`, `<thead>`, `<tfoot>`.
-- `table.tBodies` -- the collection of `<tbody>` 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 `<tr>`:**
 
-**`<thead>`, `<tfoot>`, `<tbody>`** elements provide the `rows` property:
-- `tbody.rows` -- the collection of `<tr>` inside.
+- `tr.cells` -- koleksi sel-sel dari `<td>` dan `<th>` di dalam `<tr>` yang diberikan.
+- `tr.sectionRowIndex` -- posisi (indexs) dari elemen `<tr>` tertentu di dalam elemen `<thead>/<tbody>/<tfoot>` yang melingkupinya.
+- `tr.rowIndex` -- nomor dari elemen `<tr>` di dalam tabel secara keseluruhan (termasuk semua baris tabel).
 
-**`<tr>`:**
-- `tr.cells` -- the collection of `<td>` and `<th>` cells inside the given `<tr>`.
-- `tr.sectionRowIndex` -- the position (index) of the given `<tr>` inside the enclosing `<thead>/<tbody>/<tfoot>`.
-- `tr.rowIndex` -- the number of the `<tr>` in the table as a whole (including all table rows).
+**Elemen `<td>` dan `<th>`:**
 
-**`<td>` and `<th>`:**
-- `td.cellIndex` -- the number of the cell inside the enclosing `<tr>`.
+- `td.cellIndex` -- nomor sel di dalam elemen `<tr>`.
 
-An example of usage:
+Contoh penggunaannya:
 
 ```html run height=100
 <table id="table">
   <tr>
-    <td>one</td><td>two</td>
+    <td>one</td>
+    <td>two</td>
   </tr>
   <tr>
-    <td>three</td><td>four</td>
+    <td>three</td>
+    <td>four</td>
   </tr>
 </table>
 
 <script>
-  // get td with "two" (first row, second column)
+  // mendapatkan td dengan "dua" (baris pertama, kolom kedua)
   let td = table.*!*rows[0].cells[1]*/!*;
-  td.style.backgroundColor = "red"; // highlight it
+  td.style.backgroundColor = "red"; // sorotlah itu
 </script>
 ```
 
-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.
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/article.md b/2-ui/1-document/06-dom-attributes-and-properties/article.md
index e39a54256..53825bbb2 100644
--- a/2-ui/1-document/06-dom-attributes-and-properties/article.md
+++ b/2-ui/1-document/06-dom-attributes-and-properties/article.md
@@ -1,42 +1,42 @@
-# Attributes and properties
+# Atribut dan Properti
 
-When the browser loads the page, it "reads" (another word: "parses") the HTML and generates DOM objects from it. For element nodes, most standard HTML attributes automatically become properties of DOM objects.
+Ketika peramban (browser) memuat halaman, peramban "membaca" (atau istilah lainnya: "menganalisis") HTML dan menghasilkan objek-objek DOM dari HTML tersebut. Untuk elemen-elemen, sebagian besar atribut HTML standar secara otomatis menjadi properti dari objek-objek DOM.
 
-For instance, if the tag is `<body id="page">`, then the DOM object has `body.id="page"`.
+Misalnya, jika tag adalah `<body id="page">`, maka objek DOM akan memiliki `body.id="page"`.
 
-But the attribute-property mapping is not one-to-one! In this chapter we'll pay attention to separate these two notions, to see how to work with them, when they are the same, and when they are different.
+Namun, pemetaan atribut-atribut ini tidaklah satu-satu! Di bab ini, kita akan memahami perbedaan antara kedua hal tersebut, untuk melihat bagaimana cara bekerja dengan mereka, ketika mereka sama, dan ketika mereka berbeda.
 
-## DOM properties
+## Properti DOM
 
-We've already seen built-in DOM properties. There are a lot. But technically no one limits us, and if there aren't enough, we can add our own.
+Kita telah melihat beberapa properti DOM bawaan sebelumnya. Ada banyak properti lainnya. Tetapi secara teknis, tidak ada batasan, dan jika tidak cukup, kita dapat menambahkan properti sendiri.
 
-DOM nodes are regular JavaScript objects. We can alter them.
+Simpul DOM adalah objek JavaScript biasa. Kita dapat memodifikasinya.
 
-For instance, let's create a new property in `document.body`:
+Misalnya, mari bat sebuah properti baru pada `document.body`:
 
 ```js run
 document.body.myData = {
-  name: 'Caesar',
-  title: 'Imperator'
+  name: "Caesar",
+  title: "Imperator",
 };
 
 alert(document.body.myData.title); // Imperator
 ```
 
-We can add a method as well:
+Kita juga dapat menambahkan sebuah method:
 
 ```js run
-document.body.sayTagName = function() {
+document.body.sayTagName = function () {
   alert(this.tagName);
 };
 
-document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
+document.body.sayTagName(); // BODY (nilai dari "this" dalam method adalah document.body)
 ```
 
-We can also modify built-in prototypes like `Element.prototype` and add new methods to all elements:
+Kita juga dapat memodifikasi prototipe bawaan seperti `Element.prototype` dan menambahkan method baru ke semua elemen:
 
 ```js run
-Element.prototype.sayHi = function() {
+Element.prototype.sayHi = function () {
   alert(`Hello, I'm ${this.tagName}`);
 };
 
@@ -44,234 +44,237 @@ document.documentElement.sayHi(); // Hello, I'm HTML
 document.body.sayHi(); // Hello, I'm BODY
 ```
 
-So, DOM properties and methods behave just like those of regular JavaScript objects:
+Jadi, properti dan method DOM berperilaku sama seperti objek JavaScript biasa:
 
-- They can have any value.
-- They are case-sensitive (write `elem.nodeType`, not `elem.NoDeTyPe`).
+- Mereka dapat memiliki nilai apa pun.
+- Mereka bersifat case-sensitive (tulis `elem.nodeType`, bukan `elem.NoDeTyPe`).
 
-## HTML attributes
+## Atribut HTML
 
-In HTML, tags may have attributes. When the browser parses the HTML to create DOM objects for tags, it recognizes *standard* attributes and creates DOM properties from them.
+Dalam HTML, tag-tag dapat memiliki atribut. Ketika peramban mengurai HTML untuk membuat objek-objek DOM untuk tag-tag tersebut, peramban mengenali atribut-atribut _standar_ dan membuat properti DOM dari atribut-atribut tersebut.
 
-So when an element has `id` or another *standard* attribute, the corresponding property gets created. But that doesn't happen if the attribute is non-standard.
+Jadi, ketika sebuah elemen memiliki atribut `id` atau atribut _standar_ lainnya, properti yang sesuai akan dibuat. Namun, hal ini tidak terjadi jika atribut tersebut adalah non-standar.
+
+Misalnya:
 
-For instance:
 ```html run
 <body id="test" something="non-standard">
   <script>
-    alert(document.body.id); // test
-*!*
-    // non-standard attribute does not yield a property
-    alert(document.body.something); // undefined
-*/!*
+        alert(document.body.id); // test
+    *!*
+        // atribut non-standar tidak menghasilkan properti
+        alert(document.body.something); // undefined
+    */!*
   </script>
 </body>
 ```
 
-Please note that a standard attribute for one element can be unknown for another one. For instance, `"type"` is standard for `<input>` ([HTMLInputElement](https://html.spec.whatwg.org/#htmlinputelement)), but not for `<body>` ([HTMLBodyElement](https://html.spec.whatwg.org/#htmlbodyelement)). Standard attributes are described in the specification for the corresponding element class.
+Harap dicatat bahwa atribut standar untuk satu elemen dapat tidak dikenali oleh elemen lain. Misalnya, `"type"` adalah atribut standar untuk `<input>` ([HTMLInputElement](https://html.spec.whatwg.org/#htmlinputelement)), tetapi bukan untuk `<body>` ([HTMLBodyElement](https://html.spec.whatwg.org/#htmlbodyelement)). Atribut-atribut standar dijelaskan dalam spesifikasi untuk kelas elemen yang sesuai.
+
+Di sini kita dapat melihatnya:
 
-Here we can see it:
 ```html run
 <body id="body" type="...">
-  <input id="input" type="text">
+  <input id="input" type="text" />
   <script>
-    alert(input.type); // text
-*!*
-    alert(body.type); // undefined: DOM property not created, because it's non-standard
-*/!*
+        alert(input.type); // text
+    *!*
+        alert(body.type); // undefined: properti DOM tidak dibuat, karena itu adalah non-standar
+    */!*
   </script>
 </body>
 ```
 
-So, if an attribute is non-standard, there won't be a DOM-property for it. Is there a way to access such attributes?
+Jadi, jika sebuah atribut non-standar, maka tidak akan ada properti DOM untuknya. Apakah ada cara untuk mengakses atribut-atribut tersebut?
 
-Sure. All attributes are accessible by using the following methods:
+Tentu saja. Semua atribut dapat diakses dengan menggunakan method-method berikut:
 
-- `elem.hasAttribute(name)` -- checks for existence.
-- `elem.getAttribute(name)` -- gets the value.
-- `elem.setAttribute(name, value)` -- sets the value.
-- `elem.removeAttribute(name)` -- removes the attribute.
+- `elem.hasAttribute(name)` -- memeriksa keberadaan atribut.
+- `elem.getAttribute(name)` -- mendapatkan nilainya.
+- `elem.setAttribute(name, value)` -- mengatur nilainya.
+- `elem.removeAttribute(name)` -- menghapus atribut.
 
-These methods operate exactly with what's written in HTML.
+Method-method ini beroperasi sesuai dengan apa yang tertulis dalam HTML.
 
-Also one can read all attributes using `elem.attributes`: a collection of objects that belong to a built-in [Attr](https://dom.spec.whatwg.org/#attr) class, with `name` and `value` properties.
+Selain itu, kita dapat membaca semua atribut menggunakan `elem.attributes`: sebuah koleksi objek yang termasuk ke dalam kelas bawaan [Attr](https://dom.spec.whatwg.org/#attr), dengan properti `name` dan `value`.
 
-Here's a demo of reading a non-standard property:
+Berikut adalah contoh membaca atribut non-standar:
 
 ```html run
 <body something="non-standard">
   <script>
-*!*
-    alert(document.body.getAttribute('something')); // non-standard
-*/!*
+    *!*
+        alert(document.body.getAttribute('something')); // non-standar
+    */!*
   </script>
 </body>
 ```
 
-HTML attributes have the following features:
+Atribut HTML memiliki fitur-fitur berikut:
 
-- Their name is case-insensitive (`id` is same as `ID`).
-- Their values are always strings.
+- Nama mereka bersifat case-insensitive (`id` sama dengan `ID`).
+- Nilai-nilai mereka selalu berupa string.
 
-Here's an extended demo of working with attributes:
+Berikut adalah contoh lebih lanjut tentang cara bekerja dengan atribut-atribut:
 
 ```html run
 <body>
   <div id="elem" about="Elephant"></div>
 
   <script>
-    alert( elem.getAttribute('About') ); // (1) 'Elephant', reading
+    alert(elem.getAttribute("About")); // (1) 'Elephant', membaca
 
-    elem.setAttribute('Test', 123); // (2), writing
+    elem.setAttribute("Test", 123); // (2), menulis
 
-    alert( elem.outerHTML ); // (3), see if the attribute is in HTML (yes)
+    alert(elem.outerHTML); // (3), lihat apakah atributnya ada di HTML (ya)
 
-    for (let attr of elem.attributes) { // (4) list all
-      alert( `${attr.name} = ${attr.value}` );
+    for (let attr of elem.attributes) {
+      // (4) daftar semua
+      alert(`${attr.name} = ${attr.value}`);
     }
   </script>
 </body>
 ```
 
-Please note:
+Harap dicatat:
 
-1. `getAttribute('About')` -- the first letter is uppercase here, and in HTML it's all lowercase. But that doesn't matter: attribute names are case-insensitive.
-2. We can assign anything to an attribute, but it becomes a string. So here we have `"123"` as the value.
-3. All attributes including ones that we set are visible in `outerHTML`.
-4. The `attributes` collection is iterable and has all the attributes of the element (standard and non-standard) as objects with `name` and `value` properties.
+1. `getAttribute('About')` -- huruf pertama di sini adalah huruf kapital, dan dalam HTML semuanya huruf kecil. Tetapi hal ini tidak masalah: nama atribut bersifat case-insensitive.
+2. Kita dapat menetapkan apa pun sebagai atribut, tetapi nilainya akan menjadi sebuah string. Jadi disini kita memiliki `"123"` sebagai nilai atribut.
+3. Semua atribut, termasuk yang kita set, terlihat dalam `outerHTML`.
+4. Koleksi `attributes` dapat diulangi (iterable) dan berisi semua atribut dari elemen tersebut (standar dan non-standar) sebagai objek dengan properti `name` dan `value`.
 
-## Property-attribute synchronization
+## Sinkronisasi Properti-atribut
 
-When a standard attribute changes, the corresponding property is auto-updated, and (with some exceptions) vice versa.
+Ketika atribut standar berubah, properti yang sesuai akan diperbarui secara otomatis, dan (dengan beberapa pengecualian) sebaliknya.
 
-In the example below `id` is modified as an attribute, and we can see the property changed too. And then the same backwards:
+Pada contoh dibawah ini, `id` diubah sebagai atribut, dan kita dapat melihat bahwa properti juga berubah. Kemudian, hal yang sama terjadi sebaliknya:
 
 ```html run
-<input>
+<input />
 
 <script>
-  let input = document.querySelector('input');
+  let input = document.querySelector("input");
 
-  // attribute => property
-  input.setAttribute('id', 'id');
-  alert(input.id); // id (updated)
+  // atribut => properti
+  input.setAttribute("id", "id");
+  alert(input.id); // id (diperbarui)
 
-  // property => attribute
-  input.id = 'newId';
-  alert(input.getAttribute('id')); // newId (updated)
+  // properti => atribut
+  input.id = "newId";
+  alert(input.getAttribute("id")); // newId (diperbarui)
 </script>
 ```
 
-But there are exclusions, for instance `input.value` synchronizes only from attribute -> to property, but not back:
+Tetapi ada pengecualian, misalnya `input.value` disinkronkan hanya dari atribut -> ke properti, tapi tidak sebaliknya:
 
 ```html run
-<input>
+<input />
 
 <script>
-  let input = document.querySelector('input');
+    let input = document.querySelector('input');
 
-  // attribute => property
-  input.setAttribute('value', 'text');
-  alert(input.value); // text
+    // atribut => properti
+    input.setAttribute('value', 'text');
+    alert(input.value); // text
 
-*!*
-  // NOT property => attribute
-  input.value = 'newValue';
-  alert(input.getAttribute('value')); // text (not updated!)
-*/!*
+  *!*
+    // BUKAN properti => atribut
+    input.value = 'newValue';
+    alert(input.getAttribute('value')); // teks (tidak diperbarui!)
+  */!*
 </script>
 ```
 
-In the example above:
-- Changing the attribute `value` updates the property.
-- But the property change does not affect the attribute.
+Pada contoh di atas:
+
+- Mengubah atribut `value` akan memperbarui propertinya.
+- Tetapi perubahan properti tidak mempengarui atributnya.
 
-That "feature" may actually come in handy, because the user actions may lead to `value` changes, and then after them, if we want to recover the "original" value from HTML, it's in the attribute.
+"Fitur" tersebut sebenarnya bisa sangat berguna, karena tindakan pengguna dapat menyebabkan perubahan nilai `value`, dan kemudian, jika kita ingin mengembalikan nilai "asli" dari HTML, nilainya terdapat dalam atribut.
 
-## DOM properties are typed
+## Properti DOM bertipe
 
-DOM properties are not always strings. For instance, the `input.checked` property (for checkboxes) is a boolean:
+Properti DOM tidak selalu berupa string. Misalnya, properti `input.checked` (untuk kotak centang / checkbox) adalah boolean:
 
 ```html run
-<input id="input" type="checkbox" checked> checkbox
+<input id="input" type="checkbox" checked /> checkbox
 
 <script>
-  alert(input.getAttribute('checked')); // the attribute value is: empty string
-  alert(input.checked); // the property value is: true
+  alert(input.getAttribute("checked")); // nilai atributnya adalah: string kosong
+  alert(input.checked); // nilai propertinya adalah: benar (true)
 </script>
 ```
 
-There are other examples. The `style` attribute is a string, but the `style` property is an object:
+Ada contoh lain. Atribut `style` adalah string, tetapi properti `style` adalah objek:
 
 ```html run
 <div id="div" style="color:red;font-size:120%">Hello</div>
 
 <script>
   // string
-  alert(div.getAttribute('style')); // color:red;font-size:120%
+  alert(div.getAttribute("style")); // color:red;font-size:120%
 
-  // object
+  // objek
   alert(div.style); // [object CSSStyleDeclaration]
   alert(div.style.color); // red
 </script>
 ```
 
-Most properties are strings though.
+Sebagian besar properti adalah string.
 
-Quite rarely, even if a DOM property type is a string, it may differ from the attribute. For instance, the `href` DOM property is always a *full* URL, even if the attribute contains a relative URL or just a `#hash`.
+Jarang sekali, meskipun tipe properti DOM adalah string, itu dapat berbeda dari atribut. Misalnya, properti DOM `href` selalu berupa URL _penuh_, meskipun atributnya berisi URL relatif atau hanya `#hash`.
 
-Here's an example:
+Berikut adalah contoh:
 
 ```html height=30 run
 <a id="a" href="#hello">link</a>
 <script>
-  // attribute
-  alert(a.getAttribute('href')); // #hello
+  // atribut
+  alert(a.getAttribute("href")); // #hello
 
-  // property
-  alert(a.href ); // full URL in the form http://site.com/page#hello
+  // properti
+  alert(a.href); // URL penuh dalam formulir http://site.com/page#hello
 </script>
 ```
 
-If we need the value of `href` or any other attribute exactly as written in the HTML, we can use `getAttribute`.
+Jika kita membutuhkan nilai `href` atau atribut lainnya secara tepat seperti yang tertulis dalam HTML, kita dapat menggunakan `getAttribute`.
 
+## Atribut non-standar, dataset
 
-## Non-standard attributes, dataset
+Ketika menulis HTML, kita sering menggunakan atribut-atribut standar. Tetapi bagaimana dengan atribut non-standar, khusus? Pertama, mari lihat apakah mereka bermanfaat atau tidak? Untuk apa?
 
-When writing HTML, we use a lot of standard attributes. But what about non-standard, custom ones? First, let's see whether they are useful or not? What for?
+Terkadang atribut non-standar digunakan untuk menyampaikan data kustom dari HTML ke JavaScript, atau untuk "menandai" elemen-elemen HTML untuk JavaScript.
 
-Sometimes non-standard attributes are used to pass custom data from HTML to JavaScript, or to "mark" HTML-elements for JavaScript.
-
-Like this:
+Contohnya seperti ini:
 
 ```html run
-<!-- mark the div to show "name" here -->
+<!-- berikan tanda pada `div` untuk menampilkan "name" di sini -->
 <div *!*show-info="name"*/!*></div>
-<!-- and age here -->
+<!-- dan "umur" di sini -->
 <div *!*show-info="age"*/!*></div>
 
 <script>
-  // the code finds an element with the mark and shows what's requested
+  // kode tersebut menemukan elemen dengan tanda dan menampilkan apa yang di minta
   let user = {
     name: "Pete",
     age: 25
   };
 
   for(let div of document.querySelectorAll('[show-info]')) {
-    // insert the corresponding info into the field
+    // sisipkan info yang sesuai ke dalam elemen
     let field = div.getAttribute('show-info');
-    div.innerHTML = user[field]; // first Pete into "name", then 25 into "age"
+    div.innerHTML = user[field]; // pertama Pete ke dalam "name", kemudian 25 ke dalam "age"
   }
 </script>
 ```
 
-Also they can be used to style an element.
+Selain itu, atribut non-standar juga dapat digunakan untuk memberikan gaya (style) pada elemen.
 
-For instance, here for the order state the attribute `order-state` is used:
+Misalnya, di sini untuk keadaan pesanan (order state), digunakan atribut `order-state`:
 
 ```html run
 <style>
-  /* styles rely on the custom attribute "order-state" */
+  /* gaya-gaya (styles) mengandalkan atribut "order-state" */
   .order[order-state="new"] {
     color: green;
   }
@@ -285,48 +288,43 @@ For instance, here for the order state the attribute `order-state` is used:
   }
 </style>
 
-<div class="order" order-state="new">
-  A new order.
-</div>
+<div class="order" order-state="new">A new order.</div>
 
-<div class="order" order-state="pending">
-  A pending order.
-</div>
+<div class="order" order-state="pending">A pending order.</div>
 
-<div class="order" order-state="canceled">
-  A canceled order.
-</div>
+<div class="order" order-state="canceled">A canceled order.</div>
 ```
 
-Why would using an attribute be preferable to having classes like `.order-state-new`, `.order-state-pending`, `.order-state-canceled`?
+Mengapa menggunakan atribut lebih disukai daripada menggunakan kelas seperti `.order-state-new`, `.order-state-pending`, `.order-state-canceled`?
 
-Because an attribute is more convenient to manage. The state can be changed as easy as:
+Karena atribut lebih mudah dikelola. Keadaan dapat diubah dengan mudah seperti ini:
 
 ```js
-// a bit simpler than removing old/adding a new class
-div.setAttribute('order-state', 'canceled');
+// sedikit lebih sederhana daripada menghapus kelas lama/menambahkan kelas baru
+div.setAttribute("order-state", "canceled");
 ```
 
-But there may be a possible problem with custom attributes. What if we use a non-standard attribute for our purposes and later the standard introduces it and makes it do something? The HTML language is alive, it grows, and more attributes appear to suit the needs of developers. There may be unexpected effects in such case.
+Namun, ada masalah yang mungkin muncul dengan atribut kustom. Bagaimana jika kita menggunakan atribut non-standar untuk tujuan kita dan kemudian standar memperkenalkannya dan memberikan fungsionalitas tertentu padanya? Bahasa HTML adalah dinamis, berkembang, dan atribut-atribut baru muncul untuk memenuhi kebutuhan para pengembang. Dalam kasus tersebut, dapat terjadi efek yang tidak terduga.
 
-To avoid conflicts, there exist [data-*](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes) attributes.
+Untuk menghindari konflik, ada [data-\*](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes) atribut.
 
-**All attributes starting with "data-" are reserved for programmers' use. They are available in the `dataset` property.**
+**Semua atribut yang dimulai dengan "data-" disediakan untuk penggunaan programmer. Mereka dapat di akses melalui properti `dataset`.**
 
-For instance, if an `elem` has an attribute named `"data-about"`, it's available as `elem.dataset.about`.
+Misalnya, jika sebuah `elem` memiliki atribut bernama `"data-about"`, maka dapat diakses menggunakan `elem.dataset.about`.
 
-Like this:
+Contohnya seperti ini:
 
 ```html run
 <body data-about="Elephants">
-<script>
-  alert(document.body.dataset.about); // Elephants
-</script>
+  <script>
+    alert(document.body.dataset.about); // Elephants
+  </script>
+</body>
 ```
 
-Multiword attributes like `data-order-state` become camel-cased: `dataset.orderState`.
+Atribut dengan beberapa kata seperti `data-order-state` akan menjadi camel-cased: `dataset.orderState`.
 
-Here's a rewritten "order state" example:
+Berikut adalah contoh yang telah diperbaiki untuk "order state":
 
 ```html run
 <style>
@@ -343,44 +341,42 @@ Here's a rewritten "order state" example:
   }
 </style>
 
-<div id="order" class="order" data-order-state="new">
-  A new order.
-</div>
+<div id="order" class="order" data-order-state="new">A new order.</div>
 
 <script>
-  // read
-  alert(order.dataset.orderState); // new
+  // membaca
+  alert(order.dataset.orderState); // baru
 
-  // modify
+  // memodifikasi
   order.dataset.orderState = "pending"; // (*)
 </script>
 ```
 
-Using `data-*` attributes is a valid, safe way to pass custom data.
+Menggunakan atribut `data-*` adalah cara yang valid dan aman untuk menyampaikan data kustom.
 
-Please note that we can not only read, but also modify data-attributes. Then CSS updates the view accordingly: in the example above the last line `(*)` changes the color to blue.
+Harap dicatat bahwa kita tidak hanya bisa membaca, tetapi juga mengubah atribut data. Selanjutnya, CSS akan memperbarui tampilan sesuai dengan perubahan tersebut: pada contoh di atas, baris terakhir `(*)` mengubah warna menjadi biru.
 
-## Summary
+## Ringkasan
 
-- Attributes -- is what's written in HTML.
-- Properties -- is what's in DOM objects.
+- Atribut -- adalah apa yang tertulis dalam HTML.
+- Properti -- adalah apa yang ada dalam objek DOM.
 
-A small comparison:
+Sebuah perbandingan kecil:
 
-|            | Properties | Attributes |
-|------------|------------|------------|
-|Type|Any value, standard properties have types described in the spec|A string|
-|Name|Name is case-sensitive|Name is not case-sensitive|
+|      | Properti                                                                                     | Atribut                            |
+| ---- | -------------------------------------------------------------------------------------------- | ---------------------------------- |
+| Tipe | Bisa memiliki nilai apapun, properti standar memiliki tipe yang dijelaskan dalam spesifikasi | Sebuah string                      |
+| Nama | Nama bersifat case-sensitive                                                                 | Nama tidak bersifat case-sensitive |
 
-Methods to work with attributes are:
+Method-method untuk bekerja dengan atribut adalah:
 
-- `elem.hasAttribute(name)` -- to check for existence.
-- `elem.getAttribute(name)` -- to get the value.
-- `elem.setAttribute(name, value)` -- to set the value.
-- `elem.removeAttribute(name)` -- to remove the attribute.
-- `elem.attributes` is a collection of all attributes.
+- `elem.hasAttribute(name)` -- untuk memeriksa keberadaan atribut.
+- `elem.getAttribute(name)` -- untuk mendapatkan nilai atribut.
+- `elem.setAttribute(name, value)` -- untuk mengatur nilai atribut.
+- `elem.removeAttribute(name)` -- untuk menghapus atribut.
+- `elem.attributes` adalah koleksi dari semua atribut.
 
-For most situations using DOM properties is preferable. We should refer to attributes only when DOM properties do not suit us, when we need exactly attributes, for instance:
+Untuk sebagian besar situasi, menggunakan properti DOM lebih disukai. Kita harus merujuk pada atribut hanya ketika properti DOM tidak sesuai dengan kebutuhan kita, ketika kita memerlukan atribut secara khusus, misalnya:
 
-- We need a non-standard attribute. But if it starts with `data-`, then we should use `dataset`.
-- We want to read the value "as written" in HTML. The value of the DOM property may be different, for instance the `href` property is always a full URL, and we may want to get the "original" value.
+- Kita membutuhkan atribut non-standar. Tetapi jika atribut tersebut dimulai dengan `data-`, maka kita harus menggunakan `dataset`.
+- Kita ingin membaca nilai "sebagaimana tertulis" dalam HTML. Nilai properti DOM mungkin berbeda, misalnya properti `href` selalu berupa URL lengkap, dan kita mungkin ingin mendapatkan nilai "asli" tersebut.

` dan `	` di dalam `
` and `	` cells inside the given `
` dan `	`: -`	` and `	`:** -- `td.cellIndex` -- the number of the cell inside the enclosing `