Skip to content

Commit bb4abd7

Browse files
Iiqbal2000Iiqbal2000
authored
dom-nodes
Fix dom-nodes
1 parent b24a7d2 commit bb4abd7

File tree

1 file changed

+281
-0
lines changed

1 file changed

+281
-0
lines changed

‎2-ui/1-document/02-dom-nodes/article.md‎

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
libs:
2+
- d3
3+
- domtree
4+
5+
---
6+
7+
# DOM tree
8+
9+
Tulang punggung dari dokumen HTML adalah tag.
10+
11+
Berdasarkan Document Object Model (DOM), setiap tag HTML merupakan sebuah objek. Tag berlapis adalah "anak" dari tag yang melampirkan. Teks di dalam sebuah tag merupakan sebuah objek juga.
12+
13+
Semua objek ini dapat diakses menggunakan JavaScript, dan kita bisa menggunakannya untuk memodifikasi halaman.
14+
15+
Misalnya, `document.body` merupakan objek yang merepresentasikan tag `<body>`.
16+
17+
Menjalankan kode ini akan membuat `<body>` menjadi merah selama 3 detik.
18+
19+
```js run
20+
document.body.style.background = 'red'; // buat background menjadi merah
21+
22+
setTimeout(() => document.body.style.background = '', 3000); // kembalikan seperti semula
23+
```
24+
25+
Disini kita menggunakan `style.background` untuk mengubah warna background `document.body`, tetapi ada banyak properti lain, seperti:
26+
27+
- `innerHTML` -- Konten-konten HTML dari node.
28+
- `offsetWidth` -- lebar node (dalam piksel)
29+
- ...dan seterusnya.
30+
31+
Kita akan segera mempelajari lebih banyak cara untuk memanipulasi DOM, tetapi pertama-tama kita perlu mengetahui tentang strukturnya.
32+
33+
## Contoh dari DOM
34+
35+
Mari kita mulai dengan dokumen sederhana berikut:
36+
37+
```html run no-beautify
38+
<!DOCTYPE HTML>
39+
<html>
40+
<head>
41+
<title>About elk</title>
42+
</head>
43+
<body>
44+
The truth about elk.
45+
</body>
46+
</html>
47+
```
48+
49+
DOM menggambarkan HTML seperti struktur pohon pada tag. Begini tampilannya:
50+
51+
<div class="domtree"></div>
52+
53+
<script>
54+
let node1 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n "},{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elk"}]},{"name":"#text","nodeType":3,"content":"\n "}]},{"name":"#text","nodeType":3,"content":"\n "},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n The truth about elk."}]}]}
55+
56+
drawHtmlTree(node1, 'div.domtree', 690, 320);
57+
</script>
58+
59+
```online
60+
Pada gambar di atas, Anda dapat mengklik node elemen dan anaknya akan membuka/menutup.
61+
```
62+
63+
Setiap node pohon merupakan sebuah objek.
64+
65+
Tag-tag merupakan *node elemen* (atau hanya elemen) dan membentuk struktur pohon: `<html>` merupakan root, kemudian `<head>` dan `<body>` adalah anak-anaknya, dll.
66+
67+
Teks di dalam elemen-elemen membentuk *node teks*, dilabeli sebagai `#text`. Sebuah node teks hanya berisi string. Ia mungkin tidak memiliki anak dan selalu menjadi daun pohon.
68+
69+
Misalnya, tag `<title>` memiliki teks `"About elk"`
70+
71+
Harap perhatikan karakter khusus dalam node teks:
72+
73+
- baris baru: `↵` (di dalam JavaScript seperti `\n`)
74+
- spasi: `␣`
75+
76+
Spasi dan baris baru adalah karakter yang benar-benar valid, seperti huruf-huruf dan angka-angka. Mereka membentuk node teks dan menjadi bagian dari DOM. Jadi, misalnya, pada contoh di atas, tag `<head>` berisi beberapa spasi sebelum `<title>`, dan teks tersebut menjadi node `#teks` (ini berisi baris baru dan beberapa spasi).
77+
78+
Hanya ada dua pengecualian top-level:
79+
1. Spasi dan baris baru sebelum `<head>` diabaikan karena alasan historis.
80+
2. Jika kita meletakkan sesuatu setelah `</body>`, maka secara otomatis dipindahkan ke dalam `body`, di bagian bawah, karena spesifikasi HTML mengharuskan semua konten harus berada di dalam `<body>`. Jadi tidak boleh ada spasi setelah `</body>`.
81+
82+
Dalam kasus lain semuanya mudah -- Jika ada spasi-spasi (seperti karakter lainnya) di dalam dokumen, maka mereka menjadi node teks di DOM tersebut, dan jika kita menghapusnya, maka akan hilang.
83+
84+
Berikut tidak ada node teks khusus spasi:
85+
86+
```html no-beautify
87+
<!DOCTYPE HTML>
88+
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>
89+
```
90+
91+
<div class="domtree"></div>
92+
93+
<script>
94+
let node2 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elk"}]}]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"The truth about elk."}]}]}
95+
96+
drawHtmlTree(node2, 'div.domtree', 690, 210);
97+
</script>
98+
99+
```smart header="Spasi di awal/akhir string dan node teks khusus spasi biasanya disembunyikan di alat"
100+
Alat browser (akan segera dibahas) yang bekerja dengan DOM biasanya tidak menampilkan spasi di awal/akhir teks dan node teks kosong (jeda baris) di antara tag.
101+
102+
Alat pengembang menghemat ruang layar dengan cara ini.
103+
104+
Pada gambar DOM lebih lanjut, kita terkadang mengabaikannya saat mereka tidak relevan. Spasi seperti itu biasanya tidak mempengaruhi bagaimana dokumen ditampilkan.
105+
```
106+
107+
## Autocorrection
108+
109+
Jika browser menemukan HTML yang salah format, browser akan memperbaikinya secara otomatis saat membuat DOM.
110+
111+
Misalnya, tag yang paling atas selalu `<html>`. Bahkan jika itu tidak ada di dalam dokumen, ia akan ada ada sendiri di dalam DOM, karena browser tersebut akan membuatnya. Hal yang sama berlaku untuk `<body>`.
112+
113+
Contoh, jika file HTML kata tunggal `"Hello"`, browser akan membungkusnya ke dalam `<html>` dan `<body>`, dan menambahkan `<head>` yang diperlukan, dan DOM akan menjadi seperti ini:
114+
115+
<div class="domtree"></div>
116+
117+
<script>
118+
let node3 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Hello"}]}]}
119+
120+
drawHtmlTree(node3, 'div.domtree', 690, 150);
121+
</script>
122+
123+
Selagi sedang menghasilkan DOM, browser secara otomatis memproses kesalahan-kesalahan di dalam dokumen, tag penutup, dan sebagainya.
124+
125+
dokumen dengan tag yang tidak ditutup:
126+
127+
```html no-beautify
128+
<p>Hello
129+
<li>Mom
130+
<li>and
131+
<li>Dad
132+
```
133+
134+
...Akan menjadi DOM normal saat browser membaca tag dan memulihkan bagian yang hilang:
135+
136+
<div class="domtree"></div>
137+
138+
<script>
139+
let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"P","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Hello"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Mom"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"and"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Dad"}]}]}]}
140+
141+
drawHtmlTree(node4, 'div.domtree', 690, 360);
142+
</script>
143+
144+
````warn header="Tabel selalu memiliki `<tbody>`"
145+
“Kasus khusus” yang menarik adalah tabel. Berdasarkan spesifikasi DOM, mereka harus memiliki tag <tbody>, tetapi teks HTML dapat menghilangkannya. Kemudian browser membuat <tbody> di DOM secara otomatis.
146+
147+
Untuk HTML:
148+
149+
```html no-beautify
150+
<table id="table"><tr><td>1</td></tr></table>
151+
```
152+
153+
Struktur DOM akan seperti ini:
154+
<div class="domtree"></div>
155+
156+
<script>
157+
let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType":1,"children":[{"name":"TR","nodeType":1,"children":[{"name":"TD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"1"}]}]}]}]};
158+
159+
drawHtmlTree(node5, 'div.domtree', 600, 200);
160+
</script>
161+
162+
Anda lihat? `<tbody>` muncul entah dari mana. Kita harus mengingat ini saat bekerja dengan tabel untuk menghindari kejutan.
163+
164+
165+
## Jenis-jenis node lain
166+
167+
Ada beberapa jenis-jenis node lain selain node elemen dan teks.
168+
169+
Contoh, komentar:
170+
171+
```html
172+
<!DOCTYPE HTML>
173+
<html>
174+
<body>
175+
The truth about elk.
176+
<ol>
177+
<li>An elk is a smart</li>
178+
*!*
179+
<!-- comment -->
180+
*/!*
181+
<li>...and cunning animal!</li>
182+
</ol>
183+
</body>
184+
</html>
185+
```
186+
187+
<div class="domtree"></div>
188+
189+
<script>
190+
let node6 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n The truth about elk.\n "},{"name":"OL","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"An elk is a smart"}]},{"name":"#text","nodeType":3,"content":"\n "},{"name":"#comment","nodeType":8,"content":"comment"},{"name":"#text","nodeType":3,"content":"\n "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"...and cunning animal!"}]},{"name":"#text","nodeType":3,"content":"\n "}]},{"name":"#text","nodeType":3,"content":"\n \n"}]}]};
191+
192+
drawHtmlTree(node6, 'div.domtree', 690, 500);
193+
</script>
194+
195+
Kita bisa lihat disini sebuah jenis node pohon baru -- *comment node*, yang dilabeli sebagai `#comment`, diantar dua node teks.
196+
197+
Kita mungkin berpikir -- kenapa komentar ditambahkan ke DOM? komentar tersebut tidak mempengaruhi representasi visual dengan cara apa pun. Tapi ada sebuah aturan -- jika sesuatu ada di dalam HTML, maka ia juga harus di dalam pohon DOM.
198+
199+
**Semuanya di dalam HTML, bahkan komentar, akan menjadi bagian dari DOM.**
200+
201+
Bahkan direktif `<!DOCTYPE ...>` di awal HTML juga merupakan node DOM. Letaknya di pohon DOM tepat sebelum `<html>`. Kita tidak akan menyentuh node itu, Kita bahkan tidak menggambarnya pada diagram karena alasan itu, tetapi node itu ada.
202+
203+
Objek `document` yang mewakili seluruh dokumen, secara formal, juga merupakan node DOM.
204+
205+
Ada [12 jenis-jenis node](https://dom.spec.whatwg.org/#node). Dalam praktiknya kita biasanya bekerja dengan 4 di antaranya:
206+
207+
1. `document` -- "titik masuk" ke DOM.
208+
2. node elemen -- tag-tag HTML, blok bangunan pohon.
209+
3. node teks -- berisi teks.
210+
4. komentar -- terkadang kita meletakkan informasi disini, ia tidak akan ditampilkan, tetapi JS bisa membacanya dari DOM.
211+
212+
## Melihatnya untuk kita sendiri
213+
214+
Untuk melihat struktur DOM secara real-time, coba [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Cukup ketikkan dokumen, dan itu akan muncul sebagai DOM dalam sekejap.
215+
216+
Cara lain untuk menjelajahi DOM gunakan alat pengembang browser. Sebenarnya itulah yang kita gunakan saat mengembangkan.
217+
218+
Untuk melakukannya, buka halaman web [elk.html](elk.html), aktifkan alat pengembang browser dan beralih ke tab Elemen.
219+
220+
Seharusnya tampil seperti ini:
221+
222+
![](elk.svg)
223+
224+
Anda bisa melihat DOM tersebut, klik pada elemen-elemen, melihat detailnya, dan sebagainya.
225+
226+
Harap perhatikan bahwa struktur DOM di alat pengembang disederhanakan. Node teks ditampilkan hanya sebagai teks. Dan tidak ada samak sekali node teks "kosong" (hanya spasi). Tidak apa-apa, karena sebagian besar waktu kita berkepentingan pada node elemen.
227+
228+
Mengklik tombol <span class="devtools" style="background-position:-328px -124px"></span> di pojok kiri atas memungkinkan kita memilih node dari halaman web menggunakan mouse (atau perangkat penunjuk lain) dan "memeriksanya" (gulir ke sana di tab Elemen). Ini berfungsi dengan baik ketika kita memiliki halaman HTML besar (dan DOM besar yang sesuai) dan ingin melihat tempat elemen tertentu di dalamnya.
229+
230+
Cara lain untuk melakukannya adalah dengan mengklik kanan pada halaman web dan memilih "Inspect" di menu konteks.
231+
232+
![](inspect.svg)
233+
234+
Di bagian kanan alat ada subtabs berikut:
235+
- **Styles** -- kita bisa melihat CSS diterapkan ke elemen saat ini aturan demi aturan, termasuk aturan bawaan (abu-abu). Hampir semuanya dapat diedit di tempat, termasuk dimensi/margin/padding kotak di bawah ini.
236+
- **Computed** -- untuk melihat CSS diterapkan ke elemen berdasarkan properti: untuk setiap properti kita dapat melihat aturan yang memberikannya (termasuk pewarisan CSS dan semacamnya).
237+
- **Event Listeners** -- untuk melihat event listener yang dilampirkan ke elemen DOM (kita akan membahasnya di bagian selanjutnya dari tutorial).
238+
- ...dan seterusnya.
239+
240+
Cara terbaik untuk mempelajarinya adalah dengan mengklik. Sebagian besar nilai dapat diedit di tempat.
241+
242+
## Interaksi dengan konsol
243+
244+
Saat kami mengerjakan DOM, kita juga mungkin ingin menerapkan JavaScript padanya. Seperti: mendapatkan node dan jalankan beberapa kode untuk memodifikasinya, Berikut beberapa tip untuk berpindah antara tab Elemen dan konsol.
245+
246+
Sebagai permulaan:
247+
248+
1. Pilih `<li>` pertama di dalam tab Elements.
249+
2. Tekan `key:Esc` -- itu akan membuka konsol tepat di bawah tab Elements.
250+
251+
Sekarang elemen yang dipilih terakhir tersedia sebagai `$0`, yang dipilih sebelumnya adalah `$1` dll.
252+
253+
Kita bisa menjalankan perintah pada mereka. Misalnya , `$0.style.background = 'red'` membuat item list yang dipilih bewarna merah, seperti ini:
254+
255+
![](domconsole0.svg)
256+
257+
Begitulah cara mendapatkan node dari Elements di Console.
258+
259+
Ada juga jalan kembali. Jika ada variabel yang mereferensikan node DOM, maka kita dapat menggunakan perintah `inspect (node)` di Console untuk melihatnya di panel Elements.
260+
261+
Atau kita bisa mengeluarkan simpul DOM di konsol dan menjelajahi "di tempat", seperti `document.body` di bawah ini:
262+
263+
![](domconsole1.svg)
264+
265+
Itu tentu saja untuk tujuan debugging. Dari bab selanjutnya kita akan mengakses dan memodifikasi DOM menggunakan JavaScript.
266+
267+
Alat pengembang browser sangat membantu dalam pengembangan: kita dapat menjelajahi DOM, mencoba berbagai hal dan melihat apa yang salah.
268+
269+
## Summary
270+
271+
Dokumen HTML/XML direpresentasikan di dalam browser sebagai pohon DOM.
272+
273+
- Tag menjadi node elemen dan membentuk struktur.
274+
- Teks menjadi node teks.
275+
- ...dll, semuanya di dalam HTML mempunyai tempatnya di dalam DOM, bahkan komentar.
276+
277+
Kita dapat menggunakan alat pengembang untuk memeriksa DOM dan memodifikasinya secara manual.
278+
279+
Di sini kami membahas dasar-dasar, tindakan yang paling sering digunakan dan penting untuk memulai. Ada dokumentasi lengkap tentang Alat Pengembang Chrome di <https://developers.google.com/web/tools/chrome-devtools>. Cara terbaik untuk mempelajari alat ini adalah dengan mengklik di sana-sini, membaca menu: sebagian besar opsi sudah jelas. Nanti, jika Anda mengenal mereka secara umum, bacalah dokumennya dan pelajari sisanya.
280+
281+
Node DOM memiliki properti dan method yang memungkinkan kita untuk melakukan perjalanan di antara mereka, memodifikasinya, memindahkan halaman, dan banyak lagi. Kami akan membahasnya di bab berikutnya.

0 commit comments

Comments
 (0)