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: - -`` = `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 `