Cara menggunakan dom to string javascript

Question

Examples

Convert different values to strings:

Table of Contents Show

Definition and Usage
Return Value
Browser Support
More Examples
Apa itu DOM di JavaScript?
Apa itu DOM JavaScript dan bagaimana model implementasinya?
Apa fungsi dari DOM?
Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?

String(new Date());
String("12345");
String(12345);

Try it Yourself »

Definition and Usage

The String() method converts a value to a string.

Note

The String() method returns the same as the toString() method for any value.

Syntax

Parameters

ParameterDescriptionvalueRequired.
A JavaScript value.

Return Value

TypeDescriptionA string.The value converted to a string.

Browser Support

String() is an ECMAScript1 (ES1) feature.

ES1 (JavaScript 1997) is fully supported in all browsers:

ChromeEdgeFirefoxSafariOperaIEYesYesYesYesYesYes

More Examples

Examples

Convert different values to strings:

String(Boolean(0));
String(Boolean(1));
String([1,2,3,4]);

Try it Yourself »

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.

Semua objek ini dapat diakses menggunakan JavaScript, dan kita bisa menggunakannya untuk memodifikasi halaman.

Misalnya, document.body merupakan objek yang merepresentasikan tag <body>.

Menjalankan kode ini akan membuat <body> menjadi merah selama 3 detik.

document.body.style.background = 'red'; // buat background menjadi merah

setTimeout(() => document.body.style.background = '', 3000); // kembalikan seperti semula

Disini kita menggunakan style.background untuk mengubah warna background document.body, tetapi ada banyak properti lain, seperti:

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

1 – Konten-konten HTML dari node.

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

2 – lebar node (dalam piksel)

…dan seterusnya.

Kita akan segera mempelajari lebih banyak cara untuk memanipulasi DOM, tetapi pertama-tama kita perlu mengetahui tentang strukturnya.

Mari kita mulai dengan dokumen sederhana berikut:

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

DOM menggambarkan HTML seperti struktur pohon pada tag. Begini tampilannya:

Pada gambar di atas, Anda dapat mengklik node elemen dan anaknya akan membuka/menutup.

Setiap node pohon merupakan sebuah objek.

Tag-tag merupakan node elemen (atau hanya elemen) dan membentuk struktur pohon:

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

3 merupakan root, kemudian

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

4 dan <body> adalah anak-anaknya, dll.

Teks di dalam elemen-elemen membentuk node teks, dilabeli sebagai

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

6. Sebuah node teks hanya berisi string. Ia mungkin tidak memiliki anak dan selalu menjadi daun pohon.

Misalnya, tag

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

7 memiliki teks

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

8

Harap perhatikan karakter khusus dalam node teks:

baris baru:

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

9 (di dalam JavaScript seperti

<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>

0)

spasi:

<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>

1

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

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

4 berisi beberapa spasi sebelum

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

7, dan teks tersebut menjadi node

<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>

4 (ini berisi baris baru dan beberapa spasi).

Hanya ada dua pengecualian top-level:

Spasi dan baris baru sebelum

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

4 diabaikan karena alasan historis.

Jika kita meletakkan sesuatu setelah

<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>

6, maka secara otomatis dipindahkan ke dalam

<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>

7, di bagian bawah, karena spesifikasi HTML mengharuskan semua konten harus berada di dalam <body>. Jadi tidak boleh ada spasi setelah

<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>

6.

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.

Berikut tidak ada node teks khusus spasi:

<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>

Spasi di awal/akhir string dan node teks khusus spasi biasanya disembunyikan di alat

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.

Alat pengembang menghemat ruang layar dengan cara ini.

Pada gambar DOM lebih lanjut, kita terkadang mengabaikannya saat mereka tidak relevan. Spasi seperti itu biasanya tidak mempengaruhi bagaimana dokumen ditampilkan.

Jika browser menemukan HTML yang salah format, browser akan memperbaikinya secara otomatis saat membuat DOM.

Misalnya, tag yang paling atas selalu

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

3. 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>.

Contoh, jika file HTML kata tunggal

<p>Hello
<li>Mom
<li>and
<li>Dad

2, browser akan membungkusnya ke dalam

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

3 dan <body>, dan menambahkan

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

4 yang diperlukan, dan DOM akan menjadi seperti ini:

Selagi sedang menghasilkan DOM, browser secara otomatis memproses kesalahan-kesalahan di dalam dokumen, tag penutup, dan sebagainya.

dokumen dengan tag yang tidak ditutup:

<p>Hello
<li>Mom
<li>and
<li>Dad

…Akan menjadi DOM normal saat browser membaca tag dan memulihkan bagian yang hilang:

Tabel selalu memiliki

<p>Hello
<li>Mom
<li>and
<li>Dad

6

“Kasus khusus” yang menarik adalah tabel. Berdasarkan spesifikasi DOM, mereka harus memiliki tag , tetapi teks HTML dapat menghilangkannya. Kemudian browser membuat di DOM secara otomatis.

Untuk HTML:

<table id="table"><tr><td>1</td></tr></table>

Struktur DOM akan seperti ini:

Anda lihat?

<p>Hello
<li>Mom
<li>and
<li>Dad

6 muncul entah dari mana. Kita harus mengingat ini saat bekerja dengan tabel untuk menghindari kejutan.

Ada beberapa jenis-jenis node lain selain node elemen dan teks.

Contoh, komentar:

<!DOCTYPE HTML>
<html>
<body>
  The truth about elk.
  <ol>
    <li>An elk is a smart</li>
    <!-- comment -->
    <li>...and cunning animal!</li>
  </ol>
</body>
</html>

Kita bisa lihat disini sebuah jenis node pohon baru – comment node, yang dilabeli sebagai

<p>Hello
<li>Mom
<li>and
<li>Dad

8, diantar dua node teks.

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.

Semuanya di dalam HTML, bahkan komentar, akan menjadi bagian dari DOM.

Bahkan direktif

<p>Hello
<li>Mom
<li>and
<li>Dad

9 di awal HTML juga merupakan node DOM. Letaknya di pohon DOM tepat sebelum

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

3. Kita tidak akan menyentuh node itu, Kita bahkan tidak menggambarnya pada diagram karena alasan itu, tetapi node itu ada.

Objek

<table id="table"><tr><td>1</td></tr></table>

1 yang mewakili seluruh dokumen, secara formal, juga merupakan node DOM.

Ada . Dalam praktiknya kita biasanya bekerja dengan 4 di antaranya:

<table id="table"><tr><td>1</td></tr></table>

1 – “titik masuk” ke DOM.

node elemen – tag-tag HTML, blok bangunan pohon.
node teks – berisi teks.
komentar – terkadang kita meletakkan informasi disini, ia tidak akan ditampilkan, tetapi JS bisa membacanya dari DOM.

Untuk melihat struktur DOM secara real-time, coba Live DOM Viewer. Cukup ketikkan dokumen, dan itu akan muncul sebagai DOM dalam sekejap.

Cara lain untuk menjelajahi DOM gunakan alat pengembang browser. Sebenarnya itulah yang kita gunakan saat mengembangkan.

Untuk melakukannya, buka halaman web elk.html, aktifkan alat pengembang browser dan beralih ke tab Elemen.

Seharusnya tampil seperti ini:

Anda bisa melihat DOM tersebut, klik pada elemen-elemen, melihat detailnya, dan sebagainya.

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.

Mengklik tombol 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.

Cara lain untuk melakukannya adalah dengan mengklik kanan pada halaman web dan memilih “Inspect” di menu konteks.

Di bagian kanan alat ada subtabs berikut:

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.
Computed – untuk melihat CSS diterapkan ke elemen berdasarkan properti: untuk setiap properti kita dapat melihat aturan yang memberikannya (termasuk pewarisan CSS dan semacamnya).
Event Listeners – untuk melihat event listener yang dilampirkan ke elemen DOM (kita akan membahasnya di bagian selanjutnya dari tutorial).
…dan seterusnya.

Cara terbaik untuk mempelajarinya adalah dengan mengklik. Sebagian besar nilai dapat diedit di tempat.

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.

Sebagai permulaan:

Pilih

<table id="table"><tr><td>1</td></tr></table>

3 pertama di dalam tab Elements.

Tekan Esc – itu akan membuka konsol tepat di bawah tab Elements.

Sekarang elemen yang dipilih terakhir tersedia sebagai

<table id="table"><tr><td>1</td></tr></table>

4, yang dipilih sebelumnya adalah

<table id="table"><tr><td>1</td></tr></table>

5 dll.

Kita bisa menjalankan perintah pada mereka. Misalnya ,

<table id="table"><tr><td>1</td></tr></table>

6 membuat item list yang dipilih bewarna merah, seperti ini:

Begitulah cara mendapatkan node dari Elements di Console.

Ada juga jalan kembali. Jika ada variabel yang mereferensikan node DOM, maka kita dapat menggunakan perintah

<table id="table"><tr><td>1</td></tr></table>

7 di Console untuk melihatnya di panel Elements.

Atau kita bisa mengeluarkan simpul DOM di konsol dan menjelajahi “di tempat”, seperti document.body di bawah ini:

Itu tentu saja untuk tujuan debugging. Dari bab selanjutnya kita akan mengakses dan memodifikasi DOM menggunakan JavaScript.

Alat pengembang browser sangat membantu dalam pengembangan: kita dapat menjelajahi DOM, mencoba berbagai hal dan melihat apa yang salah.

Dokumen HTML/XML direpresentasikan di dalam browser sebagai pohon DOM.

Tag menjadi node elemen dan membentuk struktur.
Teks menjadi node teks.
…dll, semuanya di dalam HTML mempunyai tempatnya di dalam DOM, bahkan komentar.

Kita dapat menggunakan alat pengembang untuk memeriksa DOM dan memodifikasinya secara manual.

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.

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.

Apa itu DOM di JavaScript?

“DOM atau Document Object Model merupakan objek JavaScript spesial yang hanya ada di environment Browser. Objek ini digunakan untuk mendapatkan struktur dokumen website, bahkan memanipulasinya.”

Apa itu DOM JavaScript dan bagaimana model implementasinya?

DOM JavaScript adalah interface yang memungkinkan developer memanipulasi halaman web dari segi struktur, tampilan, dan kontennya. Nah, DOM adalah singkatan dari Document Object Model. Awalnya, website tersusun dari HTML dan CSS style yang statis.

Apa fungsi dari DOM?

Fungsi DOM Setelah mengetahui pengertian DOM, untuk fungsinya sendiri adalah memungkinkan untuk memanipulasi tampilan web menggunakan JavaScript. Pada saat proses dari render file HTML sedang berlangsung, browser membuat model objek dokumen atau DOM.

Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?

Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head> di antara <body>

kode javascript