tag:blogger.com,1999:blog-80302390465352193412024-03-05T14:56:10.594-08:00Digital Media Repository & CommunityTeknik Komputer Jaringan dan Media Digital Batch 7 ITBAgus Seputrahttp://www.blogger.com/profile/08518347246314534218noreply@blogger.comBlogger10125tag:blogger.com,1999:blog-8030239046535219341.post-18014056349726136352014-01-12T08:58:00.000-08:002014-01-12T09:00:57.563-08:00Gambaran Umum Yoopa Community<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoiD68OD3l9TkRqF_iOF6xyRN_8D-O59iyLj0qLTkNouXuWaETxePuOOd_4DLLsdIuQUFs1ZJ3aGP0TrwxVMkJgR0FdYSJ4MCNqnKBRAxjiEbmVufw0drLrevgca2_b6G9HElOgZG12Rh4/s1600/homepage.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoiD68OD3l9TkRqF_iOF6xyRN_8D-O59iyLj0qLTkNouXuWaETxePuOOd_4DLLsdIuQUFs1ZJ3aGP0TrwxVMkJgR0FdYSJ4MCNqnKBRAxjiEbmVufw0drLrevgca2_b6G9HElOgZG12Rh4/s1600/homepage.jpg" height="320" width="277" /></a></div>
<br />
<div class="MsoNormal">
Sebuah sistem memiliki konten tersendiri berdasarkan tujuan
dibangunya sistem tersebut. Pada kesempatan ini saya akan membahas konsep
sistem secara sederhana dengan gambaran umum, dimana terinspirasi oleh Google.<br />
<br /></div>
<div class="MsoNormal">
Google memiliki banyak produk yang bisa digunakan banyak pengguna
di seluruh dunia untuk kepentinganya masing-masing. Seperti misalnya, Gmail,
Google+, YouTube, Google Drive, Google Play, dan masih banyak lagi. <br />
<br /></div>
<div class="MsoNormal">
Beberapa produk Google mengharuskan user untuk log in / sign
in untuk dapat di-akses, dan ada pula yang tidak. Produk yang bisa diakses
tanpa harus log in seperti misalnya Google Search Engine, You Tube, Google
Play, dan lain sebagainya. <br />
<br /></div>
<div class="MsoNormal">
Namun user yang tidak melalui proses authentication (proses
login), maka history pencarian tidak tersimpan secara otomatis. Informasi history
setiap user digunakan oleh google untuk memudahkan user saat browsing disetiap
produknya.<br />
<br /></div>
<div class="MsoNormal">
Google memiliki masing-masing domain untuk setiap produknya.
Untuk proses authentication, Google mengarahkan ke <a href="https://accounts.google.com/ServiceLogin?hl=id&continue=https://www.google.com/webhp%3Fsource%3Dsearch_app">https://accounts.google.com/</a>
untuk setiap produk Google.<br />
<br /></div>
<div class="MsoNormal">
Jika pengguna meng-akses Gmail tanpa melakukan terlebih
dahulu, maka user akan mengarahkan pengguna ke url: <a href="https://accounts.google.com/ServiceLogin?service=mail&passive=true&rm=false&continue=https://mail.google.com/mail/ca/&ss=1&scc=1&ltmpl=default&ltmplcache=2&emr=1">https://accounts.google.com/ServiceLogin?service=mail&passive=true&rm=false&continue=https://mail.google.com/mail/ca/&ss=1&scc=1&ltmpl=default&ltmplcache=2&emr=1</a></div>
<div class="MsoNormal">
Dimama pada segmen url continue=https://domainprodukgoogle
adalah url redirect nya.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Untuk Yoopa Community yang kami bangun belum memiliki domain
khusus untuk proses authentication nya. Kedepannya kami ingin Yoopa Community
memiliki domain <a href="https://account.yoopa.org/">https://account.yoopa.org/</a>
untuk proses loginnya yang memiliki home page yang user friendly.<br />
<br /></div>
<div class="MsoNormal">
Berikut adalah penjelasan dari ilustrasi home page di atas:<br />
<br />
<ol style="text-align: left;">
<li><span style="font-size: 7pt; text-indent: -21.3pt;"> </span><span style="text-indent: -21.3pt;">Form login menerima dua input yaitu email dan
password untuk proses authentication nya.</span></li>
<li><span style="font-size: 7pt; text-indent: -21.3pt;"> </span><span style="text-indent: -21.3pt;">Jika pengguna belum mempunyai account, maka bisa
melakukan registrasi melalui tombol sign up atau melalui social media seperti
facebook ataupun google+.</span></li>
<li><span style="font-size: 7pt; text-indent: -21.3pt;"> </span><span style="text-indent: -21.3pt;">Pengguna yang sign in melalui social media untuk
pertama kali, maka akan dibuatkan account secara otomatis melalui informasi
yang didapat dari account social media tersebut.</span></li>
<li><span style="font-size: 7pt; text-indent: -21.3pt;"> </span><span style="text-indent: -21.3pt;">Pengguna yang sudah mempunyai account bisa
melakukan sign in melalui Yoopa Community, Facebook, ataupun Google+. Atau jika
pengguna sebelumnya telah log in facebook maka ketika meng-akses Yoopa
Community secara otomatis sistem telah meng-authenticate user tersebut.</span></li>
</ol>
</div>
<div class="MsoListParagraphCxSpLast" style="margin-left: 21.3pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -21.3pt;">
<br /></div>
<div class="MsoNormal">
Beberapa produk yang mengharuskan proses authentication dan
yang tidak:<br />
<br /></div>
<div class="MsoNormal">
<b>Yoopa Community</b> adalah produk yang menyimpan informasi
profil pengguna dan riwayat hidup pengguna, dimana produk ini membutuhkan
proses authentication untuk dapat diakses.<br />
<br /></div>
<div class="MsoNormal">
<b>Crayonpedia</b> adalah produk sejenis Wikipedia yang memiliki banyak
konten pendidikan. Produk ini bisa diakses tanpa harus login. Namun untuk
melakukan posting artikel pengguna yang telah terdaftar diwajibkan untuk log
in.<br />
<br /></div>
<div class="MsoNormal">
<b>Yoopa Produk</b> adalah produk yang menyimpan produk-produk
pengguna yang pernah dibuat. Produk ini bisa diakses tanpa harus login. Namun untuk
melakukan posting artikel pengguna yang telah terdaftar diwajibkan untuk log
in.<br />
<br /></div>
<div class="MsoNormal">
<b>Course LSKK</b> adalah produk yang dibuat menggunakan CMS Moodle
untuk memanajemen informasi perkuliahan. Produk ini mengharuskan pengguna untuk
login.</div>
<br />
<div class="MsoNormal">
<b>E-Learning LSKK</b> adalah produk yang memiliki konten
pembelajaran dimana produk ini membutuhkan proses login terlebih dahulu untuk
bisa diakses.</div>
</div>
Anonymoushttp://www.blogger.com/profile/12025727741139436350noreply@blogger.com1Dago, Coblong, Bandung, West Java, Indonesia-6.8792076999999994 107.61265400000002-6.9107366999999993 107.57231350000002 -6.8476786999999995 107.65299450000002tag:blogger.com,1999:blog-8030239046535219341.post-79449865435998221562014-01-07T10:36:00.001-08:002014-02-02T20:49:58.008-08:00Yoopa Profile<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Yoopa Profile merupakan salah satu bagian dari yoopa community atau digital repository dan community. Yoopa Profile adalah Sebuah Sistem Informasi berbasis web yang mampu menampung data-data alumni dan anggota komunitas ITB, baik itu data pribadi sampai pada karya pribadi yang pernah dibuat. Yoopa Community bias diakses di alamat http://community.yoopa.org/. Berikut akan ditampilkan beberapa screenshot dari Yoopa Profile.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ApxX1RUadSUDYOJ1aeyVOuhOsl2BhJCBm1fo9clM3oKd8LRFEyL1VwMRz_Cox93CRr31nnpgWzuyEh9DEY4fY_u-QC-hX5UDpJ37bAArxxl-UQ6PG2KZHDJ_g6gOnHk5aLycLOxcJT4/s1600/Agus+Seputra+Ketut.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ApxX1RUadSUDYOJ1aeyVOuhOsl2BhJCBm1fo9clM3oKd8LRFEyL1VwMRz_Cox93CRr31nnpgWzuyEh9DEY4fY_u-QC-hX5UDpJ37bAArxxl-UQ6PG2KZHDJ_g6gOnHk5aLycLOxcJT4/s1600/Agus+Seputra+Ketut.png" height="320" width="231" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
Halaman Beranda Profil</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNV-bIFqGaRMyA2HOsUqCrrVRyFf9H12k4JbwQEqZqs6Hg59VUaCGwSgx7woDUwKrWdnMiJyDqui1vz20k1-z18vHcR4yhMMKZPCHl6vh0p0VEiMUst_OQEiy2LtrqgFEm-ZvefeH3Sto/s1600/Yoopa+Profile+%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNV-bIFqGaRMyA2HOsUqCrrVRyFf9H12k4JbwQEqZqs6Hg59VUaCGwSgx7woDUwKrWdnMiJyDqui1vz20k1-z18vHcR4yhMMKZPCHl6vh0p0VEiMUst_OQEiy2LtrqgFEm-ZvefeH3Sto/s1600/Yoopa+Profile+%25281%2529.png" height="320" width="294" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Halaman Update Profil</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Demikian sekilas yang bisa dijelaskan mengenai yoopa profil yang sedang dikembangkan. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-family: 'Times New Roman', serif; font-size: 12pt; line-height: 24.545454025268555px; text-align: justify;"><br /></span></div>
Agus Seputrahttp://www.blogger.com/profile/08518347246314534218noreply@blogger.com0tag:blogger.com,1999:blog-8030239046535219341.post-29817619872416087792014-01-07T05:29:00.002-08:002014-01-07T05:29:41.191-08:00Konsep Codeigniter<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Codeigniter adalah sebuah web application framework yang bersifat open source yang digunakan untuk membangun aplikasi php yang dinamis. Tujuan utama dari pengembangan framework Codeigniter adalah untuk membantu developer untuk mengerjakan aplikasi lebih cepat daripada menulis semua code dari awal. Codeigniter dibangun menggunakan konsep Model, View, dan Controller (MVC). Codeigniter pertama kali dirilis pada 28 februari 2006. Versi stabil terakhir 2.0.1 yang dirilis pada 26 juni 2008. Berikut akan diuraikan secara lebih jelas mengenai konsep MVC, dan keunggulan framework Codeigniter. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid470IUblcxpD4X1QUXfJq87n33xmkgc9eewEzhQt3bJbYcQVGyDVQEJR2aMnC3rCsUAmuetVEaklQoKsOsXtPklidQUGieSwY4NzIwZy0cKVbQ-UcHXgQF3lgBp7NG71SAItZqsUj0uA/s1600/images+(1).jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid470IUblcxpD4X1QUXfJq87n33xmkgc9eewEzhQt3bJbYcQVGyDVQEJR2aMnC3rCsUAmuetVEaklQoKsOsXtPklidQUGieSwY4NzIwZy0cKVbQ-UcHXgQF3lgBp7NG71SAItZqsUj0uA/s1600/images+(1).jpg" height="320" width="293" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Konsep Model View Controller (MVC) adalah konsep dasar yang harus diketahui sebelum mengenal Codeigniter. MVC adalah singkatan Model View Controller. MVC sebenarnya adalah sebuah teknik pemrograman yang memisahkan bisnis logic (alur pikir), data logic (penyimpanan data), dan presentation logic (antarmuka aplikasi). Atau secara sederhana adalah memisahkan antara desain, data dan proses. Adapun konsep MVC dapat dilihat pada Gambar 2.2.</div>
<div style="text-align: justify;">
Adapun penjelasanya adalah sebagai berikut.</div>
<div style="text-align: justify;">
</div>
<ol>
<li style="text-align: justify;">Model berhubungan dengan data dan interaksi ke database atau web service. Model juga merepresentasikan struktur data dari aplikasi yang bisa berupa basis data maupun data lain, misalnya dalam bentuk file teks, file XML maupun web service. Dalam Model berisi class yang berfungsi untuk mengambil, melakukan update, dan menghapus data website. Dengan kata lain Model berhubungan langsung dengan perintah-perintah query SQL.</li>
<li style="text-align: justify;">View berhubungan dengan segala sesuatu yang berhubungan dengan tampilan untuk user. Didalam View hanya berisi variabel-variabel data yang siap ditampilkan.</li>
<li style="text-align: justify;">Controller bertindak sebagai penghubung data dan View. Didalam Controller inilah terdapat class dan fungsi-fungsi yang memproses permintaan dari View ke dalam struktur data di dalam Model. Tugas Controller adalah menyediakan berbagai variabel yang akan ditampilkan di View, memanggil Model untuk melakukan akses ke basis data, menyediakan penanganan kesalahan, mengerjakan proses logika dari aplikasi serta melakukan validasi atau cek data input. Selain berhubungan dengan Model, Controller juga memanggil library inti, plugin, helper, dan resource lainnya yang dibutuhkan untuk memproses request tertentu.</li>
<li style="text-align: justify;">File index.php berfungsi sebagai Controller depan, menginisialisasi basic resource yang dibutuhkan untuk menjalankan Codeigniter.</li>
<li style="text-align: justify;">Router menganalisa HTTP request untuk menentukan apa yang harus dilakukan dengan HTTP request itu.</li>
<li style="text-align: justify;">Jika file cache masih ada, maka akan dikirim langsung ke browser tanpa melewati eksekusi normal dari sistem.</li>
<li style="text-align: justify;">Security, sebelum Controller aplikasi dipanggil, HTTP request dan data yang dikirim user difilter untuk alasan keamanan.</li>
</ol>
<br />
<div style="text-align: justify;">
Ada beberapa kelebihan Codeigniter (CI) dibandingkan dengan framework PHP lainnya adalah sebagai berikut (Tarigan, 2012).</div>
<br />
<div style="text-align: justify;">
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<div>
<ol>
<li>Performa sangat cepat. Salah satu alasan tidak menggunakan framework adalah karena eksekusinya yang lebih lambat dari PHP biasa, tapi Codeigniter sangat cepat dan lebih cepat dibandingkan dengan framework lainnya.</li>
<li>Konfigurasi yang sangat minim (nearly zero configuration). </li>
<li>Banyak komunitas. Dengan banyaknya komunitas penguna Codeigniter, akan memudahkan untuk berinteraksi dengan pengguna lainnya guna meminta pertimbangan jika ditemukannya kesulitan dalam pembuatan aplikasi.</li>
<li>Dokumentasi yang sangat lengkap. Setiap paket instalasi Codeigniter sudah disertai panduan (user guide) yang sangat bagus dan lengkap untuk dijadikan permulaan, serta bahasanya pun mudah dimengerti.</li>
</ol>
</div>
<div>
<div style="margin: 0px;">
<br /></div>
</div>
</div>
</div>
Agus Seputrahttp://www.blogger.com/profile/08518347246314534218noreply@blogger.com0tag:blogger.com,1999:blog-8030239046535219341.post-6750608786966902002014-01-06T22:45:00.002-08:002014-01-06T22:45:22.598-08:00Digital Media Repository<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc1Sd8p1-i1oErzcai1fehGaPbRSJIfDrqX9Bi87srdBJr4sGoaMLKmbwi9uyFqUocuMsAWxQxC-hoOxuqXBBsAY-XUmIkJYJMATwwMxAMnDZjCIl2Lh3S5nTcvVtwJbzWpAoKn8Hkw1o/s1600/1579900_687407631291030_546506716_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc1Sd8p1-i1oErzcai1fehGaPbRSJIfDrqX9Bi87srdBJr4sGoaMLKmbwi9uyFqUocuMsAWxQxC-hoOxuqXBBsAY-XUmIkJYJMATwwMxAMnDZjCIl2Lh3S5nTcvVtwJbzWpAoKn8Hkw1o/s1600/1579900_687407631291030_546506716_n.jpg" height="320" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Dalam dunia "perkomputeran" repository sering didengar apalagi yang terbiasa dengan sistem operasi linux. repositori diartikan sebagai kumpulan paket-paket atau software-software yang
siap untuk diambil dan digunakan sesuai dengan kebutuhan pengguna.
Repository ada yang bersifat offline dan juga ada yang bersifat
online, termasuk repository Ubuntu. Repository yang bersifat
offline biasanya dalam bentuk CD/DVD, sedangkan yang berbentuk
online yaitu, repository diletakkan di sebuah server dan mengharuskan
<span id="more-325"></span>pengguna untukmendownload jika ingin menggunakannya. Kemudian jika digabungkan dengan kata digital repository maka jelas berarti kumpulan paket atau software yang siap digunakan dan tersimpan secara digital atau online. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Beranjak dari hal tersebut maka "Digital Media Repository ITB" merupakan digital online yang diciptakan untuk menyimpan paket dan atau mempublikasikan hasil karya berupa softcopy dan juga tulisan yang berupa karya tulis untuk dapat diakses oleh masyarakat luas terutama perusahaan yang membutuhkan tenaga kerja. dengan adanya repository yang terintegrasi dengan Crayonpedia.org (WikiPediaITB), yoopa.com (AppStoreITB) dan juga community.yoopa.org (sedang dikerjakan), nantinya diharapkan dapat membantu mahasiswa atau masyarakat luas untuk mempublikasikan hasil karyanya. Hal lain yang akan dikembangkan adalah fitur perusahaan yang akan dikembangkan dimana perusahaan akan memberikan posting pekerjaan dan dapat mencari pekerja dengan secara langsung menilai orangnya berdasarkan hasil karya yang disimpan dalam digital media repository ini.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Anonymoushttp://www.blogger.com/profile/18247961430439145848noreply@blogger.com0tag:blogger.com,1999:blog-8030239046535219341.post-17283161286905959922014-01-06T22:13:00.002-08:002014-01-06T23:08:38.049-08:00Cara Kerja Mesin Google<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
Setiap hari google menjawab ribuanpertanyaan dari satu milyar orang didunia di 181 negara dengan 146 bahasa. 15 % dari pencarian google yang bisa ditemukan ternyata belum pernah kita temukan sebelumya. Teknologi saat ini memungkinkan hal itu terjadi, karena komputer bisa membuat program tersebut dengan suatu algoritma tertentu. Untuk setiap permintaan pencarian yang dilakukan google, apakah itu pekerjaan, artikel atau sebagainya ada ribuan kali setiap harinya, dan google tentu tidak gampang dalam menemukan halaman yang kita inginkan. Nah bagaimana bisa google menemukan halaman yang kita cari??? mari simak informasi yang saya terima langsung dari sumber <b style="box-sizing: border-box;"><a href="https://www.google.com/webmasters" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; text-decoration: none; transition: all 0.4s ease-in-out;" target="_blank">google webmaster tools</a>. </b><b style="box-sizing: border-box;"><br style="box-sizing: border-box;" /></b></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
Tantangan dari pencarian tersebut adalah bagaimana menemukan hasil yang paling relevan berada pada halaman atas pencarian google. Tidak setiap situs web dapat keluar pada halaman, atau barangkali halaman atas pencarian google. Google telah menciptakan banyak inovasi dalam pencarian untuk meningkatkan jawaban yang temukan. Pertama dan paling terkenal adalah PageRank, dinamai Larry Page (Google pendiri dan CEO). PageRank bekerja dengan menghitung jumlah dan kualitas link ke halaman untuk menentukan perkiraan kasar tentang betapa pentingnya situs web. Asumsi yang mendasari adalah bahwa situs web yang lebih penting mungkin untuk menerima lebih banyak link dari situs web lain.<br />
Panda: Membantu orang menemukan situs web dengan kualitas tinggi. Perubahan ini kemudian dikenal sebagai \"Panda\", dan sementara itu adalah salah satu dari ratusan perubahan yang dibuat pada tahun tertentu, itu menggambarkan beberapa masalah menangani dalam pencarian. Panda pembaruan dirancang untuk meningkatkan pengalaman pengguna dengan penangkapan dan demoting berkualitas rendah situs yang tidak memberikan konten asli yang berguna atau jika tidak menambahkan banyak nilai. Pada saat yang sama, itu memberikan peringkat yang lebih baik untuk kualitas tinggi situs-situs dengan informasi penelitian mendalam laporan, analisis bijaksana dan konten asli dan seterusnya.<br />
<b style="box-sizing: border-box;"><br style="box-sizing: border-box;" /></b><b style="box-sizing: border-box;">Testing dan Evaluasi</b><br />
Pengujian dan evaluasi Google terus-menerus bekerja untuk meningkatkan pencarian. Google mengambil pendekatan data-driven dan mempekerjakan para analis, peneliti dan ahli statistik untuk mengevaluasi kualitas pencarian pada secara penuh waktu. Perubahan algoritma google menjalani evaluasi kualitas ekstensif sebelum dibebaskan. Perubahan algoritma khas dimulai sebagai ide dari salah satu Engineer google. Google kemudian menerapkan gagasan itu pada versi uji Google dan menghasilkan sebelum dan setelah halaman hasil. Google biasanya hadir ini sebelum dan sesudah hasil halaman untuk \"penilai,\" orang-orang yang terlatih untuk mengevaluasi kualitas pencarian. Dengan asumsi umpan balik positif, google dapat menjalankan apa yang disebut \"percobaan hidup\" di mana google mencoba algoritma pada persentase yang sangat kecil dari pengguna Google, sehingga google dapat melihat data pada pencarian yang dilakukan pengguna. Misalnya, melakukan pencari klik hasil baru #1 lebih sering? Jika demikian, itu umumnya adalah pertanda baik. Meskipun semua pekerjaan yang dimasukkan ke dalam evaluasi google, proses ini sangat efisien pada titik ini bahwa pada tahun 2010 google menemukan:<br />
<br style="box-sizing: border-box;" />
<ul style="box-sizing: border-box;">
<li style="box-sizing: border-box;">13,311 presisi evaluasi: untuk menguji apakah potensi perubahan algoritma dampak positif atau negatif pada ketepatan percobaan google.</li>
<li style="box-sizing: border-box;">sisi-by-side hasil 8,157: menunjukkan satu set penilai dua halaman yang berbeda dari hasil dan meminta mereka untuk mengevaluasi mana yang lebih baik.</li>
<li style="box-sizing: border-box;">2.800 klik evaluasi: Untuk melihat bagaimana contoh kecil (biasanya kurang dari 1% dari pengguna kami). </li>
</ul>
Menanggapi perubahan berdasarkan semua eksperimen ini, evaluasi dan analisis, 2010 google meluncurkan 516 perbaikan untuk mencari.<br />
<b style="box-sizing: border-box;"><br style="box-sizing: border-box;" /></b><b style="box-sizing: border-box;">Manual Controll Manusia</b><br />
Dalam kasus yang sangat terbatas, kontrol manual diperlukan untuk meningkatkan pengalaman pengguna: masalah keamanan: google mengambil tindakan manual yang agresif untuk melindungi orang dari ancaman keamanan online, termasuk malware dan virus. Ini termasuk menghapus halaman dari indeks (termasuk halaman dengan nomor kartu kredit dan informasi pribadi lainnya yang dapat membahayakan keamanan), memasang interstisial peringatan halaman dan menambah pemberitahuan google halaman hasil untuk menunjukkan bahwa, \"situs ini mungkin berbahaya komputer.\" Masalah hukum: Google juga secara manual akan campur dalam hasil pencarian untuk alasan hukum, misalnya untuk menghapus konten pelecehan seksual anak (anak pelecehan seksual citra) atau bahan (ketika diberitahu melalui proses hukum yang berlaku seperti DMCA takedown permintaan di Amerika Serikat) yang melanggar hak cipta. Daftar pengecualian: Seperti sebagian besar search engine, dalam beberapa kasus algoritma google keliru mengidentifikasi situs dan kadang-kadang membuat pengecualian terbatas untuk meningkatkan mutu penelusuran. Sebagai contoh, algoritma Telusur Aman dirancang untuk melindungi anak dari konten seksual secara online. Ketika salah satu algoritma ini keliru menangkap situs web, seperti essex.edu, google dapat membuat pengecualian manual untuk mencegah situs ini digolongkan sebagai pornografi. Spam Protection: Google dan mesin pencari lainnya menerbitkan dan menegakkan pedoman untuk mencegah tidak bermoral aktor dari mencoba permainan mereka jalan ke bagian atas hasil. Sebagai contoh, google menyatakan pedoman bahwa situs web tidak harus mengulangi kata kunci yang sama berulang-ulang pada halaman, teknik yang dikenal sebagai \"kata kunci isian.\" Sementara kita menggunakan banyak cara otomatis mendeteksi perilaku ini, kita juga mengambil tindakan manual untuk menghapus spam.<br />
<br style="box-sizing: border-box;" />
<b style="box-sizing: border-box;">Penghancuran Spam</b><br />
Pertempuran Spam pernah sejak telah search engine, ada orang-orang yang didedikasikan untuk menipu cara mereka ke bagian atas halaman hasil. Taktik yang umum termasuk: Cloaking: dalam praktek ini website menunjukkan informasi yang berbeda untuk mencari crawler mesin dari pengguna. Sebagai contoh, seorang spammer mungkin menempatkan kata-kata \"Sony televisi\" pada situs dalam teks putih pada latar belakang putih, meskipun halaman adalah benar-benar sebuah iklan untuk Viagra. Memasukkan kata kunci: dalam hal ini website dibungkus dengan halaman penuh kata kunci lagi dan lagi untuk mencoba dan mendapatkan pencari berpikir halaman sangat relevan untuk topik itu. Lama kelaman, hal ini bisa berarti hanya mengulangi frase seperti \"pajak persiapan nasihat\" ratusan kali di bagian bawah dari sebuah situs yang menjual mobil bekas, tetapi hari spammer mendapatkan lebih canggih. Link berbayar: Dalam hal ini satu website membayar website lain untuk link ke situs harapan itu akan meningkatkan peringkat berdasarkan PageRank. PageRank terlihat pada link untuk mencoba dan menentukan authoritativeness situs. Saat ini google memperkirakan lebih dari satu juta halaman spam diciptakan setiap jam. Ini adalah buruk bagi pencari karena itu berarti lebih banyak situs yang relevan menjadi terkubur di bawah hasil yang relevan, dan buruk untuk sah pemilik website karena situs mereka menjadi lebih sulit untuk menemukan. Untuk alasan ini, google telah bekerja sejak masa awal Google untuk memerangi spammer, membantu orang menemukan jawaban yang mereka cari, dan membantu sah website, mendapatkan lalu lintas dari pencarian.<br />
<br style="box-sizing: border-box;" />
Demikian sharing kali ini mengenai cara google dalam menemukan artikel atau informasi yang dicari. Nah selanjutnya mari kita pelajari bagai mana cara menaikkan kunjungan pada website, sehingga website kita muncul pada halaman atas pencarian google. Berikut salah satu caranya adalah dengan penggunaan <b style="box-sizing: border-box;">webmaster tools.</b></div>
</div>
Agus Seputrahttp://www.blogger.com/profile/08518347246314534218noreply@blogger.com0tag:blogger.com,1999:blog-8030239046535219341.post-59596785917384968222014-01-06T21:19:00.000-08:002014-01-06T23:08:49.789-08:00Cara Pemakaian Webmaster Tools Google<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
Ketika anda membutuhkan informasi, maka pasti google yang akan anda gunakan, mungkin sebagian besar pengunjung blog ini juga berasal dari mesin pencari google. Sebagai mesin search engine paling populer di dunia, mendaftarkan blog atau website ke mesin pencari google adalah hal yang harus anda lakukan. Tujuan dari mendaftarkan blog ke google adalah untuk menambah blog anda ke dalam daftar index mesin pencari google. Nah silahkan anda simak langkah - langkah untuk mendaftarkan situs anda ke google webmaster tool. </div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
1. Pastikan anda sudah mempunya akun google. </div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
2. silakan kilk <a href="https://www.google.com/webmasters/tools" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; text-align: left; text-decoration: none; transition: all 0.4s ease-in-out;">https://www.google.com/webmasters/tools</a>. Silakan anda login menggunakan akun google anda.</div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: center;">
<a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvIvsf56jEhRzN22GA_vuTnIKrO3OkVjjqjAVR8AEBqE58AhFmKUGUWgg3itG_giBCCS5VfXF3KF1oQuo0LjqJ08ndTs8QjFhgA2CeEAIlZEMSeY9Ezc1MhCN05nlo3PcOZLtS52a6KZM/s1600/Cara+Mengirim+Peta+Situs+di+Google+Webmaster+1.jpg" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvIvsf56jEhRzN22GA_vuTnIKrO3OkVjjqjAVR8AEBqE58AhFmKUGUWgg3itG_giBCCS5VfXF3KF1oQuo0LjqJ08ndTs8QjFhgA2CeEAIlZEMSeY9Ezc1MhCN05nlo3PcOZLtS52a6KZM/s400/Cara+Mengirim+Peta+Situs+di+Google+Webmaster+1.jpg" height="232" style="-webkit-box-shadow: rgb(181, 181, 181) 0px 0px 2px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(224, 224, 224); box-shadow: rgb(181, 181, 181) 0px 0px 2px; box-sizing: border-box; height: auto; max-width: 100%; padding: 5px; transition: all 0.4s ease-in-out;" width="400" /></a></div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
3. Setalah login akan muncul beranda dari google webmaster tools. Silakan klik tambah situs atau add situs. Masukkan alamat indeks website yang ingin didaftarkan. klik Terus atau next.</div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: center;">
<a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuPjdAY5Nj7q_k8s3oHjKbI16yUCu7uqz0cyfOAtk1g61SbI3qavad72Kg_mwqrf4w0G5V4Rm2dVA2sVD_7h9Qa0Gg-Oe00jr2d1SvLYvqraKpmSJI-zv1-6ONsi3aovroXBlObjPSjLQ/s1600/Alat+Webmaster+-+Beranda.png" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuPjdAY5Nj7q_k8s3oHjKbI16yUCu7uqz0cyfOAtk1g61SbI3qavad72Kg_mwqrf4w0G5V4Rm2dVA2sVD_7h9Qa0Gg-Oe00jr2d1SvLYvqraKpmSJI-zv1-6ONsi3aovroXBlObjPSjLQ/s400/Alat+Webmaster+-+Beranda.png" height="180" style="-webkit-box-shadow: rgb(181, 181, 181) 0px 0px 2px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(224, 224, 224); box-shadow: rgb(181, 181, 181) 0px 0px 2px; box-sizing: border-box; height: auto; max-width: 100%; padding: 5px; transition: all 0.4s ease-in-out;" width="400" /></a></div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
<br style="box-sizing: border-box;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
4. Berikutnya lakukan verifikasi kepemilikan website atau blog anda. Klik pada tab alternate method. Ada tiga pilihan verifikasi yang dapat anda pilih, jika blog anda memakai layanan blogger, maka pilih opsi pertama yakni, add meta tag to your site's home page. Silahkan anda copy meta tag yang telah tersedia. (lihat gambar)</div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: center;">
</div>
<br style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px;" />
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: center;">
<a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwsW-oH480XGDzCU9KZXoHeOtqFIPFvhGyJMBjnydZPJEmlKkdXt5ZX9ghZQG7xALHGQ-Ht94XZ5PCahyd6Xgkjy-Ug3qL2NmzOhU2RcOWZS_Kjb6AXM1fHv4XkXF6gR3FSbdyvyq7hJY/s1600/Alat+Webmaster+-+Verifikasi+kepemilikan+(1).png" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwsW-oH480XGDzCU9KZXoHeOtqFIPFvhGyJMBjnydZPJEmlKkdXt5ZX9ghZQG7xALHGQ-Ht94XZ5PCahyd6Xgkjy-Ug3qL2NmzOhU2RcOWZS_Kjb6AXM1fHv4XkXF6gR3FSbdyvyq7hJY/s400/Alat+Webmaster+-+Verifikasi+kepemilikan+(1).png" height="215" style="-webkit-box-shadow: rgb(181, 181, 181) 0px 0px 2px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(224, 224, 224); box-shadow: rgb(181, 181, 181) 0px 0px 2px; box-sizing: border-box; height: auto; max-width: 100%; padding: 5px; transition: all 0.4s ease-in-out;" width="400" /></a></div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
5. Setelah anda mendapatkan meta tag, masuk lah ke akun blogger anda, lalu masuk ke menu<b style="box-sizing: border-box;">Rancangan -> Edit Html</b> . </div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
6. Berikutnya setelah anda masuk ke menu Edit html, maka anda akan melihat kode - kode html yang ada di blog anda. Langkah selanjutnya, anda tekan ctrl + F pada keybord komputer anda.</div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
7. Lalu cari kode </head>.</div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
8. Setelah anda menemukan kode </head>, silahkan anda pastekan meta tag yang anda dapatkan tadi, tepat di bawah kode </head>. Lalu klik simpan atau save pada pojok kanan rancangan Html anda.</div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
9. Jika anda pengguna website, atau website kembangan sendiri akan terjadi sedikit perbedaan. </div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
10. jika tadi anda disuruh untuk memilih tab metode alternatif, kali ini anda disarankan untuk memilih metode yang disarankan. </div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: center;">
<a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg7-dexOLSAYcNMhMHNnpVfzwMJdSZkEYB5oGoHZCR9jnby942fgLybvWRkzkw6dz4KG8bl2OGqazTQOfRYa6B2Mb7dDoQUh2e4aaPBhPAFsJOE-cDX-tEvi9Ze9qVR6fANGjlu1NQFbE/s1600/Alat+Webmaster+-+Verifikasi+kepemilikan.png" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg7-dexOLSAYcNMhMHNnpVfzwMJdSZkEYB5oGoHZCR9jnby942fgLybvWRkzkw6dz4KG8bl2OGqazTQOfRYa6B2Mb7dDoQUh2e4aaPBhPAFsJOE-cDX-tEvi9Ze9qVR6fANGjlu1NQFbE/s400/Alat+Webmaster+-+Verifikasi+kepemilikan.png" height="236" style="-webkit-box-shadow: rgb(181, 181, 181) 0px 0px 2px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(224, 224, 224); box-shadow: rgb(181, 181, 181) 0px 0px 2px; box-sizing: border-box; height: auto; max-width: 100%; padding: 5px; transition: all 0.4s ease-in-out;" width="400" /></a></div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
11. Silakan ikuti langkah seperti gambar diatas. </div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
12. Unduh file verivikasi html, dan silakan anda upload kembali kedirektori indeks web anda, biasanya pada folder <i style="box-sizing: border-box;">public_html.</i></div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
13. Setelah selesai upload, silakan klik link verivikasi seperti pada point ke 3 pada gambar.</div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
14. Langkah terakir adalah, kembali ke halaman google webmaster (tempat anda mendapatkan meta tag), lalu klik tombol veify. Setelah berhasil, akan tampil informasi bahwa proses verifikasi telah sukses. lalu klik tombol continue. Tampilan jika website sudah berhasil didaftarkan. </div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: center;">
<a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMdg_ZoRZJ7Qp9pZwEreaLNvp_AFe9BKWHAIEXjDKxgYhWf78evxCIzOAdgmOsfD14I4F8VOzYz4XeNTF39OjQ7szGxSo37iSBQ16R0drOvAT6bFRYnSPA2IsebeB6imUzOTZriXVctNU/s1600/Alat+Webmaster+-+Beranda.png" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMdg_ZoRZJ7Qp9pZwEreaLNvp_AFe9BKWHAIEXjDKxgYhWf78evxCIzOAdgmOsfD14I4F8VOzYz4XeNTF39OjQ7szGxSo37iSBQ16R0drOvAT6bFRYnSPA2IsebeB6imUzOTZriXVctNU/s400/Alat+Webmaster+-+Beranda.png" height="175" style="-webkit-box-shadow: rgb(181, 181, 181) 0px 0px 2px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(224, 224, 224); box-shadow: rgb(181, 181, 181) 0px 0px 2px; box-sizing: border-box; height: auto; max-width: 100%; padding: 5px; transition: all 0.4s ease-in-out;" width="400" /></a></div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
<br style="box-sizing: border-box;" /></div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
Proses pendaftaran website telah selesai, selanjutnya silakan anda kelola alat webmaster ini untuk kemajuan website anda. Dan alangkah baiknya jika dipadukan dengan <b style="box-sizing: border-box;"><a href="http://www.google.com/analytics/" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; text-decoration: none; transition: all 0.4s ease-in-out;" target="_blank">google analytics.</a></b></div>
</div>
Agus Seputrahttp://www.blogger.com/profile/08518347246314534218noreply@blogger.com0tag:blogger.com,1999:blog-8030239046535219341.post-71163815529678860122014-01-06T21:11:00.003-08:002014-01-06T23:09:04.388-08:00Penyebab Bounce Rate Google Analityc<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
Tinggi rendahnya bounce rate pada sebuah blog dipegaruhi oleh beberapa faktor, antara lain seperti berikut ini.</div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: center;">
<a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy3qBsgFtg8J1cU257p2kdQRMsRCEiPDP6r_AEeTT6RiZBhp-3W0bIEP__qkA9RbEPSdToi5gX7O6BCN8rgD7I4cEs0jmOBP7lVzlNsMNjbLtSaMZQlMJUmbZBcaR4N2t4FxwtmnNnC-Y/s1600/images.jpg" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy3qBsgFtg8J1cU257p2kdQRMsRCEiPDP6r_AEeTT6RiZBhp-3W0bIEP__qkA9RbEPSdToi5gX7O6BCN8rgD7I4cEs0jmOBP7lVzlNsMNjbLtSaMZQlMJUmbZBcaR4N2t4FxwtmnNnC-Y/s1600/images.jpg" style="-webkit-box-shadow: rgb(181, 181, 181) 0px 0px 2px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(224, 224, 224); box-shadow: rgb(181, 181, 181) 0px 0px 2px; box-sizing: border-box; height: auto; max-width: 100%; padding: 5px; transition: all 0.4s ease-in-out;" /></a></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
<br style="box-sizing: border-box;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
1. Tata letak desain.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
Untuk mendapatkan bounce rate yang baik maka sebuah blog juga harus memiliki tata letak desain yang baik pula. Blog yang memiliki tata letak rumit dan sulit ditelusuri akan membuat pembacanya malas menjelajah isi blog dan memilih untuk segera meninggalkannya.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
<br style="box-sizing: border-box;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
2. Kecepatan loading blog.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
Blog dengan kecepatan loading yang baik dapat mencegah pembaca untuk membatalkan kunjungannya ke blog tersebut. Sehingga, semakin cepat loading sebuah blog maka bounce rate yang dimilikinya pun akan semakin kecil. Anda dapat membaca artikel Cara Mengetahui Berat dan Lamanya Loading Blog sebagai referensi untuk mengevaluasi kecepatan blog yang dimiliki.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
<br style="box-sizing: border-box;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
3. Internal linking.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
Semakin banyak internal linking pada blog maka bisa dipastikan bounce rate pada blog tersebut akan semakin kecil. Hal ini disebabkan pembaca diberikan kemudahan untuk mengunjungi halaman lain dalam blog tersebut sehingga setiap halaman dalam sebuah blog dapat terhubung dengan baik. Misalnya pembaca sedang membaca konten blog Anda yang berjudul cara merawat kucing. Nah, pada halaman tersebut Anda sisipkan link yang mengarah pada halaman ciri kucing yang sehat. Jika pembaca tertarik dengan topik pada halaman ciri kucing yang sehat dan kemudian mengunjunginya maka bounce rate dari blog Anda tersebut akan semakin kecil. Anda dapat menggunakan link pada postingan, related post, recent post, dan popular post untuk membangun internal linking.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
<br style="box-sizing: border-box;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
4. Eksternal linking.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
Semakin banyak eksternal linking atau link keluar yang mengarah pada blog lain terpasang di halaman blog Anda maka kemungkinan jumlah pembaca yang meninggalkan blog untuk pergi ke halaman blog lain menurut link yang terpasang tersebut akan semakin besar, sehingga bounce ratenya menjadi tinggi. Eksternal linking banyak ditemukan pada blogroll, gambar, dan iklan yang tampil pada halaman blog.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
<br style="box-sizing: border-box;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
5. Kualitas konten.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
Konten blog yang kurang menarik juga akan membuat pembaca tidak betah berlama-lama mengunjunginya. Pembaca tentu tidak ingin membuang waktunya dengan percuma karena tidak menemukan informasi yang menarik dan bermanfaat bagi dirinya. Oleh karena itu, rajinlah menerbitkan konten pada blog secara teratur dengan tetap menjaga kualitasnya agar selalu baik dan bermanfaat. Baca artikel 6 Ciri Konten Blog Yang Berkualitas sebagai referensi Anda ketika hendak menulis konten pada blog.</div>
</div>
Agus Seputrahttp://www.blogger.com/profile/08518347246314534218noreply@blogger.com0tag:blogger.com,1999:blog-8030239046535219341.post-59508457118694307222014-01-06T21:10:00.001-08:002014-01-06T23:09:14.377-08:00Google Analityc<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
Google merupakan raksasa internet dunia. Banyak aplikasi atau fitur yang disediakan oleh google yang dapat membantu atau bermanfaat bagi para penikmat layanan dunia maya. Khususnya bagi para blogger atau web developer google memeberikan banyak layanan yang dapat menunjang kinerja website anda. Sebelumya saya sudah share sedikit informasi mengenai bagaimana cara meningkatkan <a href="http://tutagus.blogspot.com/2013/12/meningkatkan-seo-website.html" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; text-decoration: none; transition: all 0.4s ease-in-out;" target="_blank">seo web</a>, apa itu <a href="http://tutagus.blogspot.com/2013/12/web-master-tools-untuk-website.html" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; text-decoration: none; transition: all 0.4s ease-in-out;" target="_blank">webmaster tools</a> dan bagaimana cara menggunakan <a href="http://tutagus.blogspot.com/2013/12/cara-pemakaian-webmaster-tools-google.html" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; text-decoration: none; transition: all 0.4s ease-in-out;" target="_blank">webmaster tools</a>, dan saya kira semua itu sangat bermanfaat. Kali ini saya akan share sedikit tentang apa itu<a href="https://www.google.com/analytics" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; text-decoration: none; transition: all 0.4s ease-in-out;" target="_blank">google Analytic</a>. Google Analytic merupakan aplikasi google yang dapat digunakan untuk menganalisa jumlah visitor, darimana visitor kita, page rank, dan sebagainya.</div>
<div class="separator" style="background-color: white; box-sizing: border-box; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: center;">
<a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsZc2rS1CaYnmD0tcZD6YJwRtajn7OSp5h5aBo1zV40TnhDwi0te_ZBFCKXeVOBUyzmuaN7mVzAz1mL-yazfXTW-fJX3L3I95faQrivVb3ms512JRyia0wUTN2tjyWTbXtw2HL6F68fd4/s1600/unduhan+(1).jpg" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsZc2rS1CaYnmD0tcZD6YJwRtajn7OSp5h5aBo1zV40TnhDwi0te_ZBFCKXeVOBUyzmuaN7mVzAz1mL-yazfXTW-fJX3L3I95faQrivVb3ms512JRyia0wUTN2tjyWTbXtw2HL6F68fd4/s1600/unduhan+(1).jpg" style="-webkit-box-shadow: rgb(181, 181, 181) 0px 0px 2px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(224, 224, 224); box-shadow: rgb(181, 181, 181) 0px 0px 2px; box-sizing: border-box; height: auto; max-width: 100%; padding: 5px; transition: all 0.4s ease-in-out;" /></a></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
<br style="box-sizing: border-box;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
Google analytic akan memberikan seluruh informasi yang dibutuhkan mengenai trafik yang datang ke website. Google analytic akan menganalisa seluruh informasi tersebut secara detail, sehingga akan didapatkan informasi yang akurat mengenai data yang dibutuhkan. Google analytic dapat melakukan tracking terhadap visitor yang masuk, dari Negara mana mereka berasal dan berbagai informasi penting lainya. Dengan berbagai data tersebut, alat google ini dapat mencari solusi dalam melakukan optimasi web agar mendapatkan peringkat yang lebih bagus pada search engine.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
Google analytic ini dapat membantu dalam meberikan keputusan tentang kata kunci yang sedang trend dan topik yang menarik yang lebih bagus untuk ditulis dalam website. Berikut beberapa trik mengenai google analytic tersebut. </div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
</div>
<ol style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px;">
<li style="box-sizing: border-box; text-align: justify;">Keyword adalah adalah hal yang paling penting agar website mampu menarik visitor untuk mengunjungi website. Jadi pastikan keyword yang digunakan benar-benar menarik dan sedang trend saat ini.</li>
<li style="box-sizing: border-box; text-align: justify;">Bounce rate adalah aspek yang sangat penting dalam melakukan analisa terhadap website. Bounce rate digunakan untuk mengetahui apakah pengunjung website keluar masuk website dengan cepat. Hal ini dapat disebabkan karena visitor tidak menemukan apa yang mereka cari pada website. Google memiliki patokan dan standar dalam menentukan sesuatu yang wajar maupun yang tidak wajar. Tingkat bouncing akan memberitahukan kepada anda apakah anda memiliki konten yang sesuai dengan apa yang diinginkan oleh visitor ketika mereka mengunjungi website anda. Bounce rate adalah rasio jumlah pengunjung yang hanya membuka satu halaman saja pada blog atau website. Bounce rate dihitung menggunakan rumus sebagai berikut. Bounce rate= (Jumlah pengunjung yang hanya membuka satu halaman blog/Jumlah kunjungan total) x 100%. Misalnya dalam satu bulan sebuah website atau blog memiliki jumlah kunjungan total sebanyak 50.000, sedangkan kunjungan pembaca yang hanya membuka satu halaman saja sebanyak 2.000. Dengan demikian, bounce rate dari website tsb sebesar (2.000/50.000)x100%= 4%. "Semakin besar bounce rate yang dimiliki sebuah blog maka kinerja blog tersebut akan semakin buruk, sedangkan semakin kecil bounce rate pada sebuah blog maka kinerja blog tersebut akan semakin baik". Apa penyebab <a href="http://tutagus.blogspot.com/2014/01/penyebab-bounce-rate-website.html" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; text-decoration: none; transition: all 0.4s ease-in-out;" target="_blank">bounce rate</a>?.</li>
<li style="box-sizing: border-box; text-align: justify;">Google analytic akan memberikan data yang tepat mengenai jumlah kunjungan yang datang melalui referrer site yang anda sewa.Referrer site adalah teknik dengan memasang link banner atau link yang menuju website pada website lainnya yang memiliki traffic tinggi, alat google akan mengetahui apakah link yang dipasang tersebut efektif mendatangkan visitor ke website.</li>
<li style="box-sizing: border-box; text-align: justify;">Gunakan Google analytic untuk menganalisa seluruh statistic yang berhubungan dengan website. Jika website diperuntukkan untuk memiliki target visitor berasal dari Negara tertentu, maka bisa menggunakan Google analytic untuk mengetahui darimana visitor berasal. Jika visitor tidak sesuai dengan target yang ditentukan, bisa dilakukan modifikasi pada website sehingga didapatkan targeted visitor.</li>
<li style="box-sizing: border-box; text-align: justify;">Tips terakhir adalah, alat google ini bebas, silakan dipelajari dan digunakan sebaik mungkin. Dan alangkah baiknya jika dipadukan dengan <a href="http://tutagus.blogspot.com/2013/12/web-master-tools-untuk-website.html" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #62929e; text-decoration: none; transition: all 0.4s ease-in-out;" target="_blank">webmaster tools</a> .</li>
</ol>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; text-align: justify;">
Sekian tips kali ini, semoga bermanfaat.</div>
</div>
Agus Seputrahttp://www.blogger.com/profile/08518347246314534218noreply@blogger.com1tag:blogger.com,1999:blog-8030239046535219341.post-65165926047632034042013-12-30T08:18:00.000-08:002014-01-09T08:20:06.323-08:00Konsep Responsive Design<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
Perkembangan teknologi saat ini sudah tidak bisa dipungkiri lagi. Berkembangnya teknologi seperti saat ini mengakibatkan munculnya berbagai perangkat elektronik yang canggih dengan tujuan membantu segala aktivitas manusia secara lebih efisien, mudah, dan tentunya menarik serta dapat meningkatkan gengsi. Banyak yang melakukan aktivitas online melalui device SmartPhone, seperti update status, upload gambar, dan tidak terkecuali mengakses sebuah website. Dengan keadaan yang seperti ini, mau tidak mau sebuah website harus mampu menangani dengan baik bila diakses melalui device SmartPhone tersebut. Bagi yang menggunakan CMS seperti WordPress mungkin sudah tersedia pluginnya, tapi bagaimana dengan yang membuatnya dari awal atau nol atau menggunakan CMS yang belum tersedia plugin mobile tersebut? Tentunya harus membuat ulang website dalam bentuk mobile bukan. Lalu bagaimana solusinya? Nah dengan hadirnya teknologi Responsive ini, dengan menggunakan satu design saja untuk berbagai device yang ada. Ini adalah cara terbaik untuk mendevelop ulang website agar mampu flexible terhadap resolusi layar device pengguna atau pengunjung. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgxRSthqzDZeCdI1GgLKSAxvmS4Tc9YiPGyXvo_xfP3KMv6sESxMX3DfMpw1o6lBLXVMhJY7uvDou-SroOLTtogVnMk5Cj1_mcp3d0OA3AczWCQIfp-Z8U4HvqeH_y4riwsvqFCS4laSQ/s1600/responsive_web_design.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgxRSthqzDZeCdI1GgLKSAxvmS4Tc9YiPGyXvo_xfP3KMv6sESxMX3DfMpw1o6lBLXVMhJY7uvDou-SroOLTtogVnMk5Cj1_mcp3d0OA3AczWCQIfp-Z8U4HvqeH_y4riwsvqFCS4laSQ/s1600/responsive_web_design.png" height="193" width="320" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya. Responsive Web Design Untuk mengetes tampilan yang menggunakan teknik Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan, kita sudah dapat melihat tampilan website kita pada layar mobile device.</div>
<div style="text-align: justify;">
Istilah Responsive web design awalnya dicetuskan oleh Ethan Marcotte dalam sebuah artikelnya di ListApart(http://www.alistapart.com/articles/responsive-web-design/). Ia mengulas tiga teknik yang telah ada yakni Flexible grid layout, flexible images, dan media and media queries ke dalam satu pendekatan dan menamakannya Responsive Design. Beberapa istilah yang digunakan untuk mengacu hal yang sama antara lain fluid design, elastic layout, rubber layout, liquid design, adaptive layout, cross-device design, dan flexible design.</div>
<div style="text-align: justify;">
Marcotte dan beberapa ahli lainnya berargumen bahwa metodologi responsive yang sebenarnya adalah tidak hanya cukup melakukan perubahan layout sesuai dengan ukuran browser yang mengaksesnya, akan tetapi melakukan perubahan total secara keseluruhan terhadap pendekatan yang kita pakai saat mendesain sebuah web. Daripada memulai desain pada ukuran layar desktop yang fixed atau tetap dan kemudian mengecilkannya dan mengatur isinya guna keperluan ukuran yang lebih kecil, maka sebaiknya desain dilakukan pada ukuran viewport yang terkecil terlebih dahulu dan dilanjutkan pada ukuran viewport yang lebih besar.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Viewport atau ukuran layar.</div>
<div style="text-align: justify;">
Penting untuk diketahui bahwa viewport dan ukuran layar atau screen size merupakan dua istilah yang berbeda. Viewport merupakan area content pada browser, diluar toolbars, tab, address box atau lainnya pada browser. Lebih sederhananya lagi adalah ukuran atau luasan dimana sebuah website ditampilkan pada browser. Sedangkan screen size mengacu pada ukuran layar secara fisik.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mengapa harus HTML5 dan CSS3?</div>
<div style="text-align: justify;">
HTML5 menawarkan kelebihan yang luar biasa dibandingkan generasi sebelumnya yakni HTML4 dan element yang digunakan pada HTML5 lebih memiliki arti atau gampang kita pahami saat kita membaca atau menuliskannya. CSS3 memiliki salah satu fitur yakni media queries yang merupakan salah satu fitur utama untuk responsive design dan tentunya didukung fitur-fitur lain untuk menghasilkan web yang fleksibel. Beberapa fitur CSS3 yang lain misalnya gradient, shadows, animasi dan transformasi. Namun sekarang sudah ada beberapa framework css yang mampu menangani responsive design salah satunya adalah Bootstrap.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bootstrap Framework.</div>
<div style="text-align: justify;">
Framework sendiri merupakan suatu kertas / kerangka kerja dalam aplikasi web yang di dalamnya memiliki suatu potongan – potongan program yang disusun (modul), sehingga programmer tidak perlu membuat kode dari nol, karena framework telah menyediakannya. Bootstrap merupakan sebuah toolkit yang dikembangkan oleh Twitter untuk mempermudah web developer dalam mendesain tampilan aplikasi. Platform ini awalnya dikembangkan pada ajang Hackweek, sebuah perhelatan developer yang diadakan Twitter. Standarisasi platform tersebut sudah disempurnakan sejak saat itu. Kini, disebutkan Twitter memiliki kerangka kerja yang konsisten untuk mengembangkan aplikasi. Di Bootstrap sudah tersedia CSS, HTML, JQuery Plugi,n dan memiliki fitur 12- cloumn grid system dimana developer tidak perlu menghitung setiap ukuran kolom. Bootstrap pertama kali dirilis pada Agustus 2012. Framework CSS ini menerapkan teknologi responsive design, sehingga website yang dikembangkan mampu menyesuaikan diri dengan ukuran laya pada device. </div>
</div>
Agus Seputrahttp://www.blogger.com/profile/08518347246314534218noreply@blogger.com0tag:blogger.com,1999:blog-8030239046535219341.post-90437596787269249342013-10-16T21:13:00.000-07:002014-01-09T08:19:37.017-08:00Menerapkan HTML DOM Untuk Pengembangan Website<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title" itemprop="name">
Belajar HTML DOM
</h3>
<div class="post-header">
</div>
<div dir="ltr" style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0g6DydHdEvkAH3O0WNKbTo8MjhyLUHMJyF2Su4U_PxNZzV4GcAp8kQy2EpmIykYkainw6dE2AdEyco4-viGqbtoFshlbaC1FKxUUKPmRJ3ZQS2UsHXGwKiwzoEE9-92G0j90XHuIDklvt/s1600/htmldom.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0g6DydHdEvkAH3O0WNKbTo8MjhyLUHMJyF2Su4U_PxNZzV4GcAp8kQy2EpmIykYkainw6dE2AdEyco4-viGqbtoFshlbaC1FKxUUKPmRJ3ZQS2UsHXGwKiwzoEE9-92G0j90XHuIDklvt/s320/htmldom.jpg" height="213" width="320" /></a></div>
<br />
Pada kesempatan ini saya akan berbagi mengenai materi HTML DOM untuk
website, dimana HTML DOM digunakan untuk dapat mengakses elemen HTML
seperti menambah, mengubah, dan menghapus. Materi yang saya akan bagikan
pada posting kali ini, saya ambil dari World Wide Web Schools atau
w3schools.com. Tetapi saya rangkup dengan menggunakan bahasa indonesia.
Check it out!<br />
<a href="https://www.blogger.com/null" name="more"></a><br />
<br />
<div style="border-bottom: solid #4F81BD 1.0pt; border: none; mso-border-bottom-themecolor: accent1; mso-element: para-border-div; padding: 0in 0in 4.0pt 0in;">
<h2 style="text-align: left;">
<span style="color: #073763;">HTML DOM Introduction</span></h2>
</div>
<h3 style="text-align: left;">
Apa itu DOM?</h3>
<div class="MsoNormal">
HTML DOM mendefinisikan standar untuk mengakses dan
memanipulasi dokumen HTML.</div>
<div class="MsoNormal">
DOM adalah (World Wide Web Consortium) standar W3C.</div>
<div class="MsoNormal">
DOM mendefinisikan standar untuk mengakses dokumen HTML dan
XML:</div>
<div class="MsoNormal">
"W3C Document Object Model (DOM) adalah sebuah platform
dan bahasa-netral antarmuka yang memungkinkan program dan skrip untuk secara
dinamis mengakses dan memperbarui konten, struktur, dan gaya dari sebuah
dokumen."</div>
<div class="MsoNormal">
W3C DOM standar dipisahkan menjadi 3 bagian yang berbeda:</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>DOM Core - model standar untuk dokumen
terstruktur</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>XML DOM - model standar untuk dokumen XML</div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>HTML DOM - model standar untuk dokumen HTML</div>
<h3 style="text-align: left;">
Apakah HTML DOM?</h3>
<div class="MsoNormal">
HTML DOM adalah:</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo2; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Sebuah model objek standar untuk HTML</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo2; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Sebuah antarmuka pemrograman standar untuk HTML</div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo2; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Sebuah standar W3C</div>
<div class="MsoNormal">
HTML DOM mendefinisikan objek dan properti dari semua elemen
HTML, dan metode untuk mengaksesnya.</div>
<div class="MsoNormal">
Dengan kata lain:</div>
<br />
<div class="MsoNormal">
<b>HTML DOM adalah
standar untuk bagaimana untuk mendapatkan, mengubah, menambah, atau menghapus
elemen HTML.</b></div>
<div class="MsoNormal">
<b><br /></b></div>
<div style="border-bottom: solid #4F81BD 1.0pt; border: none; mso-border-bottom-themecolor: accent1; mso-element: para-border-div; padding: 0in 0in 4.0pt 0in;">
<h2 style="text-align: left;">
<span style="color: #073763;">HTML DOM Nodes</span></h2>
</div>
<div class="MsoQuote">
</div>
<div class="MsoQuote">
Dalam HTML DOM, semuanya node. DOM HTML dipandang sebagai
pohon node.</div>
<h3 style="text-align: left;">
DOM Nodes</h3>
<div class="MsoNormal">
Menurut standar W3C HTML DOM, segala sesuatu dalam dokumen
HTML adalah node:</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l4 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Seluruh dokumen adalah node dokumen</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l4 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Setiap elemen HTML adalah node elemen</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l4 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Teks di dalam elemen HTML node teks</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l4 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Setiap atribut HTML adalah node atribut</div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l4 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Komentar adalah node komentar</div>
<h3 style="text-align: left;">
HTML DOM Node Pohon</h3>
<div class="MsoNormal">
HTML DOM memandang dokumen HTML sebagai struktur pohon.
Struktur ini disebut Pohon Node:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb37WCyEylF_Ww5Bjbz1HgV7jRcNrfIPH8AgrbsVIB5KNIagOKukb7ygsnj1QBYbHzB4vdulDqkQjk6pYdy5WUEaNL2Fr33bVwTbfu_W4hJS-LVGwdcdOCz1B6bqG88MCBeI4xKBIAVq6t/s1600/htmltree.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb37WCyEylF_Ww5Bjbz1HgV7jRcNrfIPH8AgrbsVIB5KNIagOKukb7ygsnj1QBYbHzB4vdulDqkQjk6pYdy5WUEaNL2Fr33bVwTbfu_W4hJS-LVGwdcdOCz1B6bqG88MCBeI4xKBIAVq6t/s320/htmltree.gif" height="175" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Dengan HTML DOM, semua node dalam pohon dapat diakses oleh
JavaScript. Semua elemen HTML (node) dapat dimodifikasi, dan node dapat dibuat
atau dihapus.</div>
<h3 style="text-align: left;">
Node Parent (Orangtua), Children (Anak), dan Siblings (Saudara)</h3>
<div class="MsoNormal">
Node dalam pohon node memiliki hubungan hirarki satu sama
lain.</div>
<div class="MsoNormal">
Istilah parent, children, dan siblings yang digunakan untuk
menggambarkan hubungan. Node parent memiliki children. Children pada tingkat
yang sama disebut siblings (brothers and sisters).</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l2 level1 lfo2; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Dalam pohon node, node atas disebut root</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l2 level1 lfo2; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Setiap node memiliki tepat satu parent, kecuali
root (yang tidak memiliki parent)</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l2 level1 lfo2; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Sebuah node dapat memiliki sejumlah children</div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l2 level1 lfo2; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Siblings adalah node dengan parent yang sama</div>
<div class="MsoNormal">
Gambar berikut mengilustrasikan bagian dari pohon simpul dan
hubungan antara node:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGm6NJcs8ryxMBCuhPlkLXPV2yepr9sX5MeABpNxzQYkA5habgE1wrhN-JAD5Y5mTinqxLffyWVZXqiB1bXiO85N7_LTphYfecHwQOSuUgppAgig1HmxFRfS9NkG6_lWqQm82SXP3n6RNB/s1600/navigate.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGm6NJcs8ryxMBCuhPlkLXPV2yepr9sX5MeABpNxzQYkA5habgE1wrhN-JAD5Y5mTinqxLffyWVZXqiB1bXiO85N7_LTphYfecHwQOSuUgppAgig1HmxFRfS9NkG6_lWqQm82SXP3n6RNB/s320/navigate.gif" height="225" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
Lihatlah fragmen HTML berikut:</div>
<div class="MsoNormal" style="background-color: #f6f4f0; background-position: initial initial; background-repeat: initial initial; margin-bottom: 0.0001pt;">
<span style="color: #444444; font-family: "Courier New"; font-size: 8.0pt; mso-fareast-font-family: "Times New Roman";"><br />
</span><span style="color: #444444; font-family: "Courier New"; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"><html><br />
<head><br />
<title>DOM Tutorial</title><br />
</head><br />
<body><br />
<h1>DOM Lesson one</h1><br />
<p>Hello world!</p><br />
</body><br />
</html></span></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
Dari HTML di atas:</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l3 level1 lfo3; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Node <html> tidak memiliki parent node,
itu adalah root node</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l3 level1 lfo3; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><head> dan <body> parent node nya adalah
node <html></div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l3 level1 lfo3; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>node teks "Halo dunia!" parent node
nya adalah node <p></div>
<div class="MsoNormal">
dan:</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo4; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>The <html> node memiliki dua child node:
<head> dan <body></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo4; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><head> Node memiliki satu child node yaitu
node <title></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo4; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><title> Node juga memiliki satu child node
yaitu teks node "DOM Tutorial"</div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo4; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><h1> Dan node <p> adalah siblings dan
kedua child node adalah dari tag <body></div>
<div class="MsoNormal">
dan:</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo5; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Elemen <head> adalah first child dari elemen
<html></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo5; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Elemen <body> adalah last child dari
elemen <html></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo5; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Elemen <h1> adalah first child dari elemen
<body></div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo5; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Elemen <p> adalah last child dari elemen
<body></div>
<h3 style="text-align: left;">
<span style="color: #073763;">
Peringatan!</span></h3>
<div class="MsoNormal">
Sebuah kesalahan umum dalam pengolahan DOM adalah untuk
mengharapkan node elemen berisi teks.</div>
<div class="MsoNormal">
Dalam contoh ini: <b><title>
DOM Tutorial </ title></b>, node elemen <title>, memegang <b>text node</b> dengan nilai "DOM
Tutorial".</div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
Nilai dari node teks dapat diakses oleh properti <b>innerHTML</b> node.<br />
<br />
<div style="border-bottom: solid #4F81BD 1.0pt; border: none; mso-border-bottom-themecolor: accent1; mso-element: para-border-div; padding: 0in 0in 4.0pt 0in;">
<h2 style="text-align: left;">
HTML DOM Methods</h2>
</div>
<div class="MsoQuote">
</div>
<div class="MsoQuote">
Metode adalah tindakan yang dapat Anda lakukan pada node
(Elemen HTML)</div>
<h3 style="text-align: left;">
Programming Interface</h3>
<div class="MsoNormal">
HTML DOM dapat diakses dengan JavaScript (dan bahasa
pemrograman lain).</div>
<div class="MsoNormal">
Semua elemen HTML didefinisikan sebagai objects, dan
antarmuka pemrograman adalah object methods dan object properties.</div>
<div class="MsoNormal">
<b>Method</b> (metode)
adalah suatu tindakan yang dapat Anda lakukan (seperti menambahkan atau
memodifikasi elemen).</div>
<div class="MsoNormal">
<b>Property</b>
(properti) adalah nilai yang Anda bisa dapatkan atau atur (seperti nama atau
isi dari sebuah node).</div>
<h3 style="text-align: left;">
Metode getElementById()</h3>
<div class="MsoNormal">
Metode getElementById() mengembalikan elemen dengan ID yang
ditentukan:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="background: #F2F2F2; border-collapse: collapse; border: none; mso-background-themecolor: background1; mso-background-themeshade: 242; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="intro">Hello World!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p>This
example demonstrates the <b>getElementById</b> method!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">x=document.getElementById("intro");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.write("<p>The
text from the intro paragraph: " + x.innerHTML +
"</p>");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
<tr>
<td style="background: #595959; border-top: none; border: solid black 1.0pt; mso-background-themecolor: text1; mso-background-themetint: 166; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: white; mso-themecolor: background1;">Hasil :</span></div>
</td>
</tr>
<tr>
<td style="background: transparent; border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><br />
<span style="font-size: 11pt;">Hello World!</span><br />
<span style="font-size: 11pt;">This example demonstrates the</span><span class="apple-converted-space"><span style="font-size: 11pt;"> </span></span><b><span style="font-size: 11pt;">getElementById</span></b><span class="apple-converted-space"><span style="font-size: 11pt;"> </span></span><span style="font-size: 11pt;">method!</span><br />
<span style="font-size: 11pt;">The text from the intro
paragraph: Hello World!</span></td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<h3 style="text-align: left;">
HTML DOM Objects - Methods dan Properties</h3>
<div class="MsoNormal">
Beberapa metode yang umum digunakan HTML DOM:</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>getElementById(<i>id</i>) – get (mendapatkan) node (elemen) dengan id tertentu</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>appendChild(<i>node</i>)
– insert (menyisipkan) node anak baru (elemen)</div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>removeChild(<i>node</i>)
– remove (menghapus) child node (elemen)</div>
<div class="MsoNormal">
Beberapa umum digunakan HTML DOM properti:</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>innerHTML – nilai teks dari node (elemen)</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>parentNode – parent node dari node (elemen)</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>childNodes – child node dari node (elemen)</div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>attributes – attributes node dari node (elemen)</div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
x.innerHTML - the text value of x</div>
<div class="MsoNormal">
x.nodeName - the name of x</div>
<div class="MsoNormal">
x.nodeValue - the value of x</div>
<div class="MsoNormal">
x.parentNode - the parent node of x</div>
<div class="MsoNormal">
x.childNodes - the child nodes of x</div>
<div class="MsoNormal">
x.attributes - the attributes nodes of x</div>
<div class="MsoNormal">
</div>
<h3 style="text-align: left;">
Sebuah Kehidupan Nyata Obyek Ilustrasi:</h3>
<div class="MsoNormal">
Seseorang adalah obyek.</div>
<div class="MsoNormal">
Metode seseorang bisa makan(), tidur(), kerja(), bermain(),
dll</div>
<div class="MsoNormal">
Semua orang memiliki metode ini, tapi mereka melakukan pada
waktu yang berbeda.</div>
<div class="MsoNormal">
Properti seseorang termasuk nama, tinggi, berat, usia, warna
mata, dll.</div>
<div class="MsoNormal">
Semua orang memiliki properti ini, tetapi nilai-nilai nya berbeda
dari orang ke orang.</div>
<h3 style="text-align: left;">
Beberapa Metode Obyek DOM</h3>
<div class="MsoNormal">
Berikut adalah beberapa metode (paling umum):<span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 115%; mso-fareast-font-family: "Times New Roman";"></span></div>
<table border="0" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="border-collapse: collapse; mso-yfti-tbllook: 1184; width: 603px;">
<tbody>
<tr>
<td style="background: #555555; border: solid #555555 1.0pt; mso-border-alt: solid #555555 .5pt; padding: 1.9pt 1.9pt 1.9pt 1.9pt; width: 33.0%;" valign="top" width="33%"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<b><span style="color: white; font-family: "Verdana","sans-serif"; font-size: 7.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Method</span></b></div>
</td>
<td style="background: #555555; border-left: none; border: solid #555555 1.0pt; mso-border-alt: solid #555555 .5pt; mso-border-left-alt: solid #555555 .5pt; padding: 1.9pt 1.9pt 1.9pt 1.9pt;" valign="top"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<b><span style="color: white; font-family: "Verdana","sans-serif"; font-size: 7.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Description</span></b></div>
</td>
</tr>
<tr>
<td style="background: white; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">getElementById()</span></div>
</td>
<td style="background: white; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Mengembalikan elemen yang memiliki atribut ID dengan sebuah nilai</span></div>
</td>
</tr>
<tr>
<td style="background: #F6F4F0; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">getElementsByTagName()</span></div>
</td>
<td style="background: #F6F4F0; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Mengembalikan daftar node (collection/array of nodes) yang
mengandung semua elemen dengan nama tag yang ditentukan</span></div>
</td>
</tr>
<tr>
<td style="background: white; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">getElementsByClassName()</span></div>
</td>
<td style="background: white; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Mengembalikan daftar node yang berisi semua elemen dengan kelas
tertentu</span></div>
</td>
</tr>
<tr>
<td style="background: #F6F4F0; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
</div>
</td>
<td style="background: #F6F4F0; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
</div>
</td>
</tr>
<tr>
<td style="background: white; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">appendChild()</span></div>
</td>
<td style="background: white; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Menambahkan node child baru ke node tertentu</span></div>
</td>
</tr>
<tr>
<td style="background: #F6F4F0; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">removeChild()</span></div>
</td>
<td style="background: #F6F4F0; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Removes a child node</span></div>
</td>
</tr>
<tr>
<td style="background: white; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">replaceChild()</span></div>
</td>
<td style="background: white; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Replaces a child node</span></div>
</td>
</tr>
<tr>
<td style="background: #F6F4F0; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">insertBefore()</span></div>
</td>
<td style="background: #F6F4F0; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Inserts a new child node sebelum child node ditentukan</span></div>
</td>
</tr>
<tr>
<td style="background: white; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
</div>
</td>
<td style="background: white; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
</div>
</td>
</tr>
<tr>
<td style="background: #F6F4F0; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">createAttribute()</span></div>
</td>
<td style="background: #F6F4F0; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Creates an Attribute node</span></div>
</td>
</tr>
<tr>
<td style="background: white; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">createElement()</span></div>
</td>
<td style="background: white; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Creates an Element node</span></div>
</td>
</tr>
<tr>
<td style="background: #F6F4F0; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">createTextNode()</span></div>
</td>
<td style="background: #F6F4F0; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Creates a Text node</span></div>
</td>
</tr>
<tr>
<td style="background: white; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
</div>
</td>
<td style="background: white; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
</div>
</td>
</tr>
<tr>
<td style="background: #F6F4F0; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">getAttribute()</span></div>
</td>
<td style="background: #F6F4F0; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Mengembalikan nilai atribut yg ditentukan</span></div>
</td>
</tr>
<tr>
<td style="background: white; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">setAttribute()</span></div>
</td>
<td style="background: white; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Sets or changes the specified attribute, to the specified value</span></div>
</td>
</tr>
</tbody></table>
<br />
<div class="MsoNormal">
</div>
<div style="border-bottom: solid #4F81BD 1.0pt; border: none; mso-border-bottom-themecolor: accent1; mso-element: para-border-div; padding: 0in 0in 4.0pt 0in;">
<h2 style="text-align: left;">
HTML DOM Properties</h2>
</div>
<div class="MsoQuote">
</div>
<div class="MsoQuote">
Properti adalah nilai-nilai dari node (Elemen HTML) bahwa
Anda bisa mendapatkan (get) atau menetapkan (set)</div>
<h3 style="text-align: left;">
Programming Interface</h3>
<div class="MsoNormal">
HTML DOM dapat diakses dengan JavaScript (dan bahasa
pemrograman lain).</div>
<div class="MsoNormal">
Antarmuka pemrograman dari DOM didefinisikan oleh metode dan
properti.</div>
<div class="MsoNormal">
<b>Method</b> adalah
suatu tindakan yang dapat Anda lakukan (seperti menambahkan atau menghapus
node).</div>
<div class="MsoNormal">
<b>Property</b> adalah
nilai yang Anda bisa dapatkan atau mengatur (seperti nama atau isi dari sebuah
node).</div>
<h3 style="text-align: left;">
InnerHTML Properti</h3>
<div class="MsoNormal">
Cara termudah untuk mendapatkan konten dari suatu elemen
adalah dengan menggunakan properti <b>innerHTML</b>.</div>
<div class="MsoNormal">
InnerHTML properti berguna untuk mendapatkan atau mengganti
isi dari elemen HTML.</div>
<div class="MsoNormal">
Contoh code berikut
mendapat innerHTML dari elemen <p> dengan id="intro":</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="background: #DBE5F1; border: solid black 1.0pt; mso-background-themecolor: accent1; mso-background-themetint: 51; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="intro">Hello World!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
txt=document.getElementById("intro").innerHTML;</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.write(txt);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">Hasil :</span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal">
<span style="font-family: 'Times New Roman', serif; font-size: 12pt;">Hello World!</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif; font-size: 12pt;">Hello World!</span><span style="font-family: "Courier New"; font-size: 10.0pt;"></span></div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
Dalam contoh di atas, getElementById adalah metode,
sementara innerHTML adalah sebuah properti.</div>
<div class="MsoNormal">
<b>Tips : </b><span style="color: #1f497d; mso-themecolor: text2;">InnerHTML properti dapat digunakan
untuk mendapatkan atau mengubah elemen HTML, termasuk <html> dan body.</span></div>
<h3 style="text-align: left;">
Properti nodeName</h3>
<div class="MsoNormal">
Properti nodeName menentukan nama node.</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>nodeName adalah read-only</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>nodeName dari node elemen adalah sama seperti
nama tag</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>nodeName dari node atribut adalah nama atribut</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>nodeName dari node teks selalu #text</div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l1 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>nodeName dari node dokumen selalu #document</div>
<div class="MsoNormal">
<b>Catatan</b>: nodeName
selalu berisi nama tag huruf besar dari elemen HTML.</div>
<h3 style="text-align: left;">
Properti nodeValue</h3>
<div class="MsoNormal">
Property nodeValue
menentukan nilai dari sebuah node.</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo2; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>nodeValue untuk node elemen tidak terdefinisi</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo2; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>nodeValue untuk node teks adalah teks itu
sendiri</div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo2; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>nodeValue untuk node atribut adalah nilai
atribut</div>
<h3 style="text-align: left;">
Dapatkan Nilai dari sebuah Elemen</h3>
<div class="MsoNormal">
Contoh berikut mengambil teks nilai node tag <p
id="intro"> :</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="background: #DBE5F1; border: solid black 1.0pt; mso-background-themecolor: accent1; mso-background-themetint: 51; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="intro">Hello World!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">x=document.getElementById("intro");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.write(x.firstChild.nodeValue);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">Hasil :</span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal">
</div>
<div class="MsoNormal">
<span style="font-family: 'Times New Roman', serif;">Hello World!</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif;">Hello World!</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<h3 style="text-align: left;">
The NodeType Properti</h3>
<div class="MsoNormal">
Properti <b>nodeType</b>
mengembalikan jenis node. nodeType hanya dapat dibaca.</div>
<div class="MsoNormal">
Jenis node yang paling penting adalah:<span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 115%; mso-fareast-font-family: "Times New Roman";"></span></div>
<table border="0" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="border-collapse: collapse; mso-yfti-tbllook: 1184; width: 603px;">
<tbody>
<tr>
<td style="background: #555555; border: solid #555555 1.0pt; mso-border-alt: solid #555555 .5pt; padding: 1.9pt 1.9pt 1.9pt 1.9pt; width: 85.0%;" valign="top" width="85%"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<b><span style="color: white; font-family: "Verdana","sans-serif"; font-size: 7.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Element type</span></b></div>
</td>
<td style="background: #555555; border-left: none; border: solid #555555 1.0pt; mso-border-alt: solid #555555 .5pt; mso-border-left-alt: solid #555555 .5pt; padding: 1.9pt 1.9pt 1.9pt 1.9pt; width: 15.0%;" valign="top" width="15%"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<b><span style="color: white; font-family: "Verdana","sans-serif"; font-size: 7.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">NodeType</span></b></div>
</td>
</tr>
<tr>
<td style="background: white; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Element</span></div>
</td>
<td style="background: white; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">1</span></div>
</td>
</tr>
<tr>
<td style="background: #F6F4F0; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Attribute</span></div>
</td>
<td style="background: #F6F4F0; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">2</span></div>
</td>
</tr>
<tr>
<td style="background: white; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Text</span></div>
</td>
<td style="background: white; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">3</span></div>
</td>
</tr>
<tr>
<td style="background: #F6F4F0; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Comment</span></div>
</td>
<td style="background: #F6F4F0; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">8</span></div>
</td>
</tr>
<tr>
<td style="background: white; border-top: none; border: solid #D4D4D4 1.0pt; mso-border-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">Document</span></div>
</td>
<td style="background: white; border-bottom: solid #D4D4D4 1.0pt; border-left: none; border-right: solid #D4D4D4 1.0pt; border-top: none; mso-border-alt: solid #D4D4D4 .5pt; mso-border-left-alt: solid #D4D4D4 .5pt; mso-border-top-alt: solid #D4D4D4 .5pt; padding: 4.4pt 3.15pt 4.4pt 3.15pt;" valign="top"><div class="MsoNormal" style="line-height: 10.0pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="font-family: Verdana, sans-serif; font-size: 7.5pt;">9</span></div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
</div>
<div style="border-bottom: solid #4F81BD 1.0pt; border: none; mso-border-bottom-themecolor: accent1; mso-element: para-border-div; padding: 0in 0in 4.0pt 0in;">
<h2 style="text-align: left;">
HTML DOM Access</h2>
</div>
<div class="MsoQuote">
Mengakses HTML DOM - Mencari elemen HTML</div>
<h3 style="text-align: left;">
Mengakses Elemen HTML (Nodes)</h3>
<div class="MsoNormal">
Mengakses elemen HTML adalah sama dengan mengakses Node.</div>
<div class="MsoNormal">
Anda dapat mengakses sebuah elemen HTML dengan cara yang
berbeda:</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Dengan menggunakan metode getElementById()</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Dengan menggunakan metode getElementsByTagName()</div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Dengan menggunakan metode getElementsByClassName()</div>
<h3 style="text-align: left;">
Metode getElementById()</h3>
<div class="MsoNormal">
Metode getElementById() mengembalikan elemen dengan ID yang
ditentukan:</div>
<div class="MsoNormal">
Syntax :</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="background: #17365D; border-collapse: collapse; border: none; mso-background-themecolor: text2; mso-background-themeshade: 191; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<i><span style="font-family: "Courier New";"><span style="color: white;">node</span></span></i><span style="font-family: "Courier New";"><span style="color: white;">.getElementById(<i>"id"</i>);</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
Contoh berikut mendapatkan elemen dengan
id="intro":</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="background: #17365D; border-collapse: collapse; border: none; mso-background-themecolor: text2; mso-background-themeshade: 191; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="background: #DBE5F1; border: solid black 1.0pt; mso-background-themecolor: accent1; mso-background-themetint: 51; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: #0f243e; font-family: "Courier New"; font-size: 10.0pt; mso-themecolor: text2; mso-themeshade: 128;"><!DOCTYPE html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: #0f243e; font-family: "Courier New"; font-size: 10.0pt; mso-themecolor: text2; mso-themeshade: 128;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: #0f243e; font-family: "Courier New"; font-size: 10.0pt; mso-themecolor: text2; mso-themeshade: 128;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: #0f243e; font-family: "Courier New"; font-size: 10.0pt; mso-themecolor: text2; mso-themeshade: 128;"><p id="intro">Hello
World!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: #0f243e; font-family: "Courier New"; font-size: 10.0pt; mso-themecolor: text2; mso-themeshade: 128;"><p>This example demonstrates
the <b>getElementById</b> method!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: #0f243e; font-family: "Courier New"; font-size: 10.0pt; mso-themecolor: text2; mso-themeshade: 128;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: #0f243e; font-family: "Courier New"; font-size: 10.0pt; mso-themecolor: text2; mso-themeshade: 128;">x=document.getElementById("intro");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: #0f243e; font-family: "Courier New"; font-size: 10.0pt; mso-themecolor: text2; mso-themeshade: 128;">document.write("<p>The
text from the intro paragraph: " + x.innerHTML +
"</p>");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: #0f243e; font-family: "Courier New"; font-size: 10.0pt; mso-themecolor: text2; mso-themeshade: 128;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: #0f243e; font-family: "Courier New"; font-size: 10.0pt; mso-themecolor: text2; mso-themeshade: 128;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: #0f243e; font-family: "Courier New"; font-size: 10.0pt; mso-themecolor: text2; mso-themeshade: 128;"></html></span></div>
</td>
</tr>
<tr>
<td style="background: #262626; border-top: none; border: solid black 1.0pt; mso-background-themecolor: text1; mso-background-themetint: 217; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: white;">Hasil</span></div>
</td>
</tr>
<tr>
<td style="background: transparent; border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><br />
<span style="font-size: 11pt;"><span style="color: white;">Hello World!</span></span><br />
<span style="color: white;"><span style="font-size: 11pt;">This example demonstrates the</span><span class="apple-converted-space"><span style="font-size: 11pt;"> </span></span><b><span style="font-size: 11pt;">getElementById</span></b><span class="apple-converted-space"><span style="font-size: 11pt;"> </span></span><span style="font-size: 11pt;">method!</span></span><br />
<span style="font-size: 11pt;"><span style="color: white;">The text from the intro
paragraph: Hello World!</span></span><br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<h3 style="text-align: left;">
Metode getElementsByTagName()</h3>
<div class="MsoNormal">
getElementsByTagName() mengembalikan semua elemen dengan
nama tag yang ditentukan.</div>
<div class="MsoNormal">
Syntax :</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="background: #0F243E; border-collapse: collapse; border: none; mso-background-themecolor: text2; mso-background-themeshade: 128; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<i><span style="font-family: "Courier New";"><span style="color: white;">node</span></span></i><span style="font-family: "Courier New";"><span style="color: white;">.getElementsByTagName(<i>"tagname"</i>);</span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
Contoh berikut mengembalikan daftar semua elemen <p>
dalam dokumen:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p>Hello
World!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p>The
DOM is very useful!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p>This
example demonstrates the <b>getElementsByTagName</b>
method.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">x=document.getElementsByTagName("p");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.write("Text
of first paragraph: " + x[0].innerHTML);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
<tr>
<td style="background: #0F243E; border-top: none; border: solid black 1.0pt; mso-background-themecolor: text2; mso-background-themeshade: 128; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: white;">Hasil :</span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal">
</div>
<div class="MsoNormal">
<span style="font-family: 'Times New Roman', serif;">Hello World!</span></div>
<div class="MsoNormal">
<span style="font-family: 'Times New Roman', serif;">The DOM is very
useful!</span></div>
<div class="MsoNormal">
<span style="font-family: 'Times New Roman', serif;">This example
demonstrates the <b>getElementsByTagName</b> method.</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif;">Text of first paragraph: Hello World!</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
Contoh berikut mengembalikan daftar semua elemen <p>
yang adalah keturunan (children, grand-children, etc<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 7.5pt; line-height: 115%;">.</span>) dari elemen dengan id="main":</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p>Hello
World!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><div
id="main"></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p>The
DOM is very useful.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p>This
example demonstrates the <b>getElementsByTagName</b>
method</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></div></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">x=document.getElementById("main").getElementsByTagName("p");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.write("First
paragraph inside the div: " + x[0].innerHTML);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
<tr>
<td style="background: #0F243E; border-top: none; border: solid black 1.0pt; mso-background-themecolor: text2; mso-background-themeshade: 128; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: white;">Hasil :</span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal">
</div>
<div class="MsoNormal">
<span style="font-family: 'Times New Roman', serif;">Hello World!</span></div>
<div class="MsoNormal">
<span style="font-family: 'Times New Roman', serif;">The DOM is very
useful.</span></div>
<div class="MsoNormal">
<span style="font-family: 'Times New Roman', serif;">This example
demonstrates the <b>getElementsByTagName</b> method</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif;">First paragraph inside the div: The DOM is
very useful.</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<h3 style="text-align: left;">
Metode getElementsByClassName()</h3>
<div class="MsoNormal">
Jika Anda ingin mencari semua elemen HTML dengan nama kelas
yang sama. Gunakan metode ini:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.getElementsByClassName("intro");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
Contoh di atas mengembalikan daftar semua elemen dengan
class = "intro".</div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
<b>Note</b>: getElementsByClassName()
tidak bekerja di Internet Explorer 5,6,7, dan 8.</div>
<div class="MsoNormal">
</div>
<div style="border-bottom: solid #4F81BD 1.0pt; border: none; mso-border-bottom-themecolor: accent1; mso-element: para-border-div; padding: 0in 0in 4.0pt 0in;">
<h2 style="text-align: left;">
HTML DOM – Modifying</h2>
</div>
<div class="MsoQuote">
Memodifikasi HTML = Mengubah Elemen, Atribut, Styles, dan
Event.</div>
<h3 style="text-align: left;">
Memodifikasi Elemen HTML</h3>
<div class="MsoNormal">
Memodifikasi HTML DOM dapat banyak hal yang berbeda</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Mengubah konten HTML</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Mengubah gaya CSS</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Mengubah atribut HTML</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Membuat elemen HTML baru</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Menghapus elemen HTML yang ada</div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Mengubah event (handlers)</div>
<div class="MsoNormal">
Dalam bab-bab berikutnya kita akan melihat lebih dekat pada
cara yang paling umum untuk memodifikasi HTML DOM.</div>
<h3 style="text-align: left;">
Mengubah Konten HTML</h3>
<div class="MsoNormal">
Cara termudah untuk mengubah isi dari suatu elemen adalah
dengan menggunakan properti <b>innerHTML</b>.</div>
<div class="MsoNormal">
Contoh berikut mengubah konten HTML elemen <p> :</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p1">Hello World!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.getElementById("p1").innerHTML="New
text!";</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p>The
paragraph above was changed by a script.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
<tr>
<td style="background: #0F243E; border-top: none; border: solid black 1.0pt; mso-background-themecolor: text2; mso-background-themeshade: 128; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: white;">Hasil</span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><br />
<span style="font-size: 11pt;">New text!</span><br />
<span style="font-size: 11pt;">The paragraph above was changed
by a script.</span></td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<h3 style="text-align: left;">
Mengubah Syle HTML</h3>
<div class="MsoNormal">
Dengan HTML DOM Anda dapat mengakses objek style elemen
HTML.</div>
<div class="MsoNormal">
Contoh berikut mengubah gaya HTML paragraf:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p1">Hello world!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p2">Hello world!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.getElementById("p2").style.color="blue";</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.getElementById("p2").style.fontFamily="Arial";</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.getElementById("p2").style.fontSize="larger";</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
<tr>
<td style="background: #0F243E; border-top: none; border: solid black 1.0pt; mso-background-themecolor: text2; mso-background-themeshade: 128; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: white;">Hasil :</span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><br />
<span style="font-size: 11pt;">Hello world!</span><br />
<span style="color: blue; font-family: "Arial","sans-serif"; font-size: 11.0pt;">Hello
world!</span><br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<h3 style="text-align: left;">
Menciptakan Elemen HTML Baru</h3>
<div class="MsoNormal">
Untuk menambahkan elemen baru ke HTML DOM, Anda harus
membuat elemen (node elemen) pertama, dan kemudian tambahkan ke elemen yang
ada.</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><div
id="div1"></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p1">This is a paragraph.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p2">This is another paragraph.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></div></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
para=document.createElement("p");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
node=document.createTextNode("This is new.");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">para.appendChild(node);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
element=document.getElementById("div1");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">element.appendChild(para);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
<tr>
<td style="background: #0F243E; border-top: none; border: solid black 1.0pt; mso-background-themecolor: text2; mso-background-themeshade: 128; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: white;">Hasil</span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><span style="font-size: 11pt;">This is a paragraph.</span><br />
<span style="font-size: 11pt;">This is another paragraph.</span><br />
<span style="font-size: 11pt;">This is new.</span><span style="font-size: 13.5pt;"></span></td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
</div>
<div style="border-bottom: solid #4F81BD 1.0pt; border: none; mso-border-bottom-themecolor: accent1; mso-element: para-border-div; padding: 0in 0in 4.0pt 0in;">
<h2 style="text-align: left;">
HTML DOM – Modifying HTML Content</h2>
</div>
<div class="MsoQuote">
Dengan HTML DOM, JavaScript dapat mengakses setiap elemen
dalam dokumen HTML</div>
<h3 style="text-align: left;">
Mengubah Konten HTML</h3>
<div class="MsoNormal">
Cara termudah untuk mengubah isi dari suatu unsur adalah
dengan menggunakan properti innerHTML.</div>
<div class="MsoNormal">
Contoh berikut mengubah konten HTML elemen <p>:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p1">Hello World!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.getElementById("p1").innerHTML="New
text!";</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p>The
paragraph above was changed by a script.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
<tr>
<td style="background: #0F243E; border-top: none; border: solid black 1.0pt; mso-background-themecolor: text2; mso-background-themeshade: 128; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: white;">Hasil</span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><br />
<span style="font-size: 11pt;">New text!</span><br />
<span style="font-size: 11pt;">The paragraph above was changed
by a script.</span><br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<h3 style="text-align: left;">
Mengubah Style HTML</h3>
<div class="MsoNormal">
Dengan HTML DOM Anda dapat mengakses objek style elemen
HTML.</div>
<div class="MsoNormal">
Contoh berikut mengubah style HTML paragraf:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p1">Hello world!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p2">Hello world!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.getElementById("p2").style.color="blue";</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.getElementById("p2").style.fontFamily="Arial";</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.getElementById("p2").style.fontSize="larger";</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
<tr>
<td style="background: #0F243E; border-top: none; border: solid black 1.0pt; mso-background-themecolor: text2; mso-background-themeshade: 128; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: white;">Hasil</span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><br />
<span style="font-size: 11pt;">Hello world!</span><br />
<span style="color: blue; font-family: "Arial","sans-serif"; font-size: 11.0pt;">Hello
world!</span><br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<h3 style="text-align: left;">
Menggunakan Events</h3>
<div class="MsoNormal">
HTML DOM memungkinkan Anda untuk mengeksekusi kode ketika
sebuah event terjadi.</div>
<div class="MsoNormal">
Event yang dihasilkan oleh browser ketika "sesuatu
terjadi" untuk elemen HTML:</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Sebuah elemen clicked on</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Halaman telah dimuat</div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Field input berubah</div>
<div class="MsoNormal">
Anda dapat membaca lebih lanjut tentang peristiwa di bab
berikutnya.</div>
<div class="MsoNormal">
Berikut 2 contoh mengubah warna latar belakang dari elemen
<body> ketika sebuah tombol diklik:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><input
type="button"</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">onclick="document.body.style.backgroundColor='lavender';"</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">value="Change
background color"></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
<tr>
<td style="background: #0F243E; border-top: none; border: solid black 1.0pt; mso-background-themecolor: text2; mso-background-themeshade: 128; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: white;">Hasil</span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Jalankan di browser</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
contoh ini kode yang
sama dijalankan oleh fungsi:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">function
ChangeBackground()</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">{</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.body.style.backgroundColor="lavender";</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">}</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><input
type="button" onclick="ChangeBackground()"
value="Change background color" /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
<tr>
<td style="background: #0F243E; border-top: none; border: solid black 1.0pt; mso-background-themecolor: text2; mso-background-themeshade: 128; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: white;">Hasil</span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Jalankan di browser</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
Contoh berikut mengubah teks dari elemen <p> ketika
sebuah tombol diklik:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p1">Hello world!</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">function
ChangeText()</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">{</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.getElementById("p1").innerHTML="New
text!";</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">}</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><input
type="button" onclick="ChangeText()" value="Change
text" /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
<tr>
<td style="background: #0F243E; border-top: none; border: solid black 1.0pt; mso-background-themecolor: text2; mso-background-themeshade: 128; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: white;">Hasil</span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; mso-border-top-alt: solid black .5pt; mso-border-top-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Jalankan di browser</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
</div>
<div style="border-bottom: solid #4F81BD 1.0pt; border: none; mso-border-bottom-themecolor: accent1; mso-element: para-border-div; padding: 0in 0in 4.0pt 0in;">
<h2 style="text-align: left;">
HTML DOM – Elements</h2>
</div>
<div class="MsoQuote">
Menambah, Menghapus dan Mengganti Elemen HTML</div>
<h3 style="text-align: left;">
Menciptakan Elemen HTML Baru - appendChild()</h3>
<div class="MsoNormal">
Untuk menambahkan elemen baru ke HTML DOM, Anda harus
membuat elemen (node elemen) pertama, dan kemudian tambahkan ke elemen yang
ada.</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><div
id="div1"></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p1">This is a paragraph.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p2">This is another paragraph.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></div></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
para=document.createElement("p");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
node=document.createTextNode("This is new.");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">para.appendChild(node);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
element=document.getElementById("div1");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">element.appendChild(para);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
</tbody></table>
<h3 style="text-align: left;">
Penjelasan Contoh</h3>
<div class="MsoNormal">
Kode ini menciptakan elemen <p> baru:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
para=document.createElement("p");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
Untuk menambahkan teks ke elemen <p>, Anda harus
membuat node teks pertama. Kode ini menciptakan node teks:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
node=document.createTextNode("This is a new paragraph.");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
Maka Anda harus menambahkan node teks ke elemen <p>:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">para.appendChild(node);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
Akhirnya anda harus menambahkan elemen baru ke elemen yang ada.</div>
<div class="MsoNormal">
Kode ini menemukan elemen yang ada:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
element=document.getElementById("div1");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
Kode ini menambahkan elemen baru ke elemen yang ada:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">element.appendChild(para);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<h3 style="text-align: left;">
Membuat HTML Elemen baru - insertBefore()</h3>
<div class="MsoNormal">
The appendChild() metode dalam contoh sebelumnya,
ditambahkan elemen baru sebagai last child dari parent.</div>
<div class="MsoNormal">
Jika Anda tidak ingin bahwa Anda dapat menggunakan metode
insertBefore() :</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><div
id="div1"></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p1">This is a paragraph.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p2">This is another paragraph.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></div></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
para=document.createElement("p");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
node=document.createTextNode("This is new.");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">para.appendChild(node);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
element=document.getElementById("div1");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
child=document.getElementById("p1");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">element.insertBefore(para,child);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
</tbody></table>
<h3 style="text-align: left;">
Menghapus Elemen HTML yang ada</h3>
<div class="MsoNormal">
Untuk menghapus sebuah elemen HTML, Anda harus mengetahui
parent dari elemen:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><div
id="div1"></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p1">This is a paragraph.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p2">This is another paragraph.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></div></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
parent=document.getElementById("div1");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
child=document.getElementById("p1");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">parent.removeChild(child);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<h3 style="text-align: left;">
Penjelasan Contoh</h3>
<div class="MsoNormal">
Dokumen ini berisi elemen HTML <div> dengan dua child
node (dua elemen <p>):</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><div
id="div1"><br />
<p id="p1">This is a paragraph.</p><br />
<p id="p2">This is another paragraph.</p><br />
</div></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
Menemukan elemen dengan id="div1":</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
parent=document.getElementById("div1");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
Cari elemen <p> dengan id="p1":</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var child=document.getElementById("p1");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
Remove child dari parent:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">parent.removeChild(child);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
Akan menyenangkan untuk dapat menghapus sebuah elemen tanpa
mengacu ke orangtua? Maaf. DOM perlu mengetahui kedua elemen yang ingin Anda
hapus, dan induknya.</div>
<div class="MsoNormal">
Berikut ini adalah solusi yang umum: Temukan child yang ingin
dihapus, dan gunakan properti parentNode untuk menemukan parent:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
child=document.getElementById("p1");<br />
child.parentNode.removeChild(child);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<h3 style="text-align: left;">
Mengganti Elemen HTML</h3>
<div class="MsoNormal">
Untuk mengganti sebuah elemen ke HTML DOM, gunakan metode
replaceChild():</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><div
id="div1"></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p1">This is a paragraph.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="p2">This is another paragraph.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></div></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
parent=document.getElementById("div1");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
child=document.getElementById("p1");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
para=document.createElement("p");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
node=document.createTextNode("This is new.");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">para.appendChild(node);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">parent.replaceChild(para,child);</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
</div>
<div style="border-bottom: solid #4F81BD 1.0pt; border: none; mso-border-bottom-themecolor: accent1; mso-element: para-border-div; padding: 0in 0in 4.0pt 0in;">
<h2 style="text-align: left;">
HTML DOM – Events</h2>
</div>
<div class="MsoQuote">
HTML DOM memungkinkan JavaScript untuk bereaksi <em><span style="font-family: "Calibri","sans-serif"; font-style: normal; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-theme-font: minor-bidi; mso-hansi-theme-font: minor-latin;">terhadap</span></em> event
HTML.</div>
<h3 style="text-align: left;">
Bereaksi terhadap Events</h3>
<div class="MsoNormal">
Sebuah JavaScript dapat dieksekusi ketika suatu event
terjadi, seperti bila pengguna mengklik pada sebuah elemen HTML.</div>
<div class="MsoNormal">
Untuk mengeksekusi kode ketika pengguna mengklik elemen,
tambahkan kode JavaScript untuk atribut event HTML:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">onclick=<i>JavaScript</i></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
Contoh event HTML:</div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Ketika pengguna mengklik mouse</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Ketika sebuah halaman web telah dimuat</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Ketika gambar telah dimuat</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Ketika mouse bergerak di atas elemen</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Ketika sebuah field input diubah/diganti</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Ketika form HTML di-submit</div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .25in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span>Ketika seorang pengguna menekan kunci di
keyboard</div>
<div class="MsoNormal">
Dalam contoh ini, isi dari elemen <h1> berubah ketika
pengguna mengklik di atasnya:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><h1
onclick="this.innerHTML='Ooops!'">Click on this text!</h1></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
Dalam contoh ini, fungsi ini dipanggil dari event handler:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><head></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">function
changetext(id)</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">{</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">id.innerHTML="Ooops!";</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">}</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></head></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><h1
onclick="changetext(this)">Click on this text!</h1></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
</tbody></table>
<h3 style="text-align: left;">
HTML Event Atribut</h3>
<div class="MsoNormal">
Untuk menetapkan event untuk elemen HTML Anda dapat
menggunakan atribut event.</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p>Click
the button to execute the <em>displayDate()</em> function.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><button
onclick="displayDate()">Try it</button></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">function
displayDate()</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">{</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.getElementById("demo").innerHTML=Date();</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">}</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="demo"></p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
Dalam contoh di atas, fungsi bernama displayDate akan dijalankan
ketika tombol diklik.</div>
<h3 style="text-align: left;">
Menetapkan Event Menggunakan HTML DOM</h3>
<div class="MsoNormal">
HTML DOM memungkinkan Anda untuk menetapkan event untuk
elemen HTML menggunakan JavaScript:</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><head></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></head></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p>Click
the button to execute the <em>displayDate()</em>
function.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><button
id="myBtn">Try it</button></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.getElementById("myBtn").onclick=function(){displayDate()};</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">function
displayDate()</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">{</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">document.getElementById("demo").innerHTML=Date();</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">}</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p
id="demo"></p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
Dalam contoh di atas, fungsi bernama <i>displayDate</i> ditugaskan untuk elemen HTML dengan id=myButn ".
Fungsi akan dijalankan ketika tombol diklik.</div>
<h3 style="text-align: left;">
Onload dan onunload Event</h3>
<div class="MsoNormal">
Event onload dan onunload dipicu ketika pengguna memasuki
atau meninggalkan halaman.</div>
<div class="MsoNormal">
Event onload dapat digunakan untuk memeriksa jenis browser
pengunjung dan versi browser, dan memuat versi yang tepat dari halaman web
berdasarkan informasi.</div>
<div class="MsoNormal">
Event onload dan onunload dapat digunakan untuk menangani
cookie.</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body
onload="checkCookies()"></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">function
checkCookies()</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">{</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">if
(navigator.cookieEnabled==true)</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"> {</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"> alert("Cookies are enabled")</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"> }</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">else</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"> {</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"> alert("Cookies are not
enabled")</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"> }</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">}</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p>An
alert box should tell you if your browser has enabled cookies or
not.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
</tbody></table>
<h3 style="text-align: left;">
Event onchange</h3>
<div class="MsoNormal">
Event onchange sering digunakan dalam kombinasi dengan
validasi field input.</div>
<div class="MsoNormal">
Berikut adalah contoh bagaimana menggunakan onchange
tersebut. Huruf upperCase() fungsi akan dipanggil ketika pengguna mengubah
konten sebuah field input.</div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid black 1.0pt; mso-border-alt: solid black .5pt; mso-border-themecolor: text1; mso-border-themecolor: text1; padding: 0in 5.4pt 0in 5.4pt; width: 6.65in;" valign="top" width="638"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><!DOCTYPE
html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><html></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><head></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">function
myFunction()</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">{</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">var
x=document.getElementById("fname");</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">x.value=x.value.toUpperCase();</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">}</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></script></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></head></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;">Enter your
name: <input type="text" id="fname" onchange="myFunction()"></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"><p>When
you leave the input field, a function is triggered which transforms the input
text to upper case.</p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></body></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: "Courier New"; font-size: 10.0pt;"></html></span></div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
</div>
</div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/12025727741139436350noreply@blogger.com0