Latest web development tutorials
×

JavaScript kuliah

JavaScript kuliah JavaScript pengantar singkat JavaScript pemakaian JavaScript ekspor JavaScript tatabahasa JavaScript laporan JavaScript catatan JavaScript variabel JavaScript Jenis Data JavaScript benda JavaScript fungsi JavaScript cakupan JavaScript peristiwa JavaScript tali JavaScript operator JavaScript membandingkan JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Jenis Konversi JavaScript Regular Expressions JavaScript kesalahan JavaScript debugging JavaScript angkat variabel JavaScript Modus yang ketat JavaScript Gunakan tidak tepat JavaScript bentuk Authentication JavaScript Reserved Keywords JavaScript JSON JavaScript void JavaScript kode Spesifikasi

JS fungsi

JavaScript definisi fungsi JavaScript Argumen fungsi JavaScript fungsi panggilan JavaScript penutupan

JS HTML DOM

DOM pengantar singkat DOM HTML DOM CSS DOM peristiwa DOM EventListener DOM elemen

JS canggih Tutorial

JavaScript benda JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp benda

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript pop JavaScript Kegiatan Jangka waktu JavaScript Cookies

JS gudang

JavaScript gudang JavaScript uji jQuery JavaScript uji Prototype

JS contoh

JavaScript contoh JavaScript contoh objek JavaScript Browser contoh objek JavaScript HTML DOM contoh JavaScript ringkasan

JS Reference manual

JavaScript benda HTML DOM benda

JavaScript HTML DOM

Melalui DOM HTML, akses ke semua elemen dokumen JavaScript HTML.

HTML DOM (Document Object Model)

Ketika halaman dibuka, browser akan membuat dokumen halaman model objek (Document Object Model).

Model HTML DOM disusun sebagai pohon benda:

pohon HTML DOM

pohon DOM HTML

model objek diprogram, JavaScript memperoleh kemampuan yang cukup untuk membuat HTML yang dinamis.

  • JavaScript dapat mengubah halaman untuk semua elemen HTML
  • JavaScript dapat mengubah halaman HTML semua properti
  • JavaScript dapat mengubah halaman semua gaya CSS
  • JavaScript dapat bereaksi terhadap semua halaman peristiwa

Menemukan elemen HTML

Biasanya, JavaScript, Anda perlu memanipulasi elemen HTML.

Untuk melakukan hal ini, Anda harus terlebih dahulu menemukan elemen. Ada tiga cara untuk melakukan ini:

  • Cari elemen HTML dengan id
  • Cari elemen HTML dengan nama tag
  • Cari elemen HTML dengan nama kelas

Menemukan elemen HTML dengan id

Menemukan elemen HTML dalam DOM Cara termudah adalah dengan menggunakan id elemen.

Contoh ini menemukan id = "intro" elemen:

contoh

var x = document.getElementById ( "intro");

Coba »

Jika menemukan elemen, metode ini akan menjadi bentuk objek (x dalam) kembali elemen.

Jika unsur ini tidak ditemukan, maka x akan berisi null.

Menemukan elemen HTML dengan nama tag

Contoh ini menemukan id = "main" unsur-unsur, dan kemudian mencari id = elemen "main" dalam semua <p> elemen:

contoh

var x = document.getElementById ( "main");
var y = x.getElementsByTagName ( "p");

Coba »

Cari elemen HTML dengan nama kelas

Dalam hal ini dengangetElementsByClassName fungsi untuk menemukan kelas = "intro" elemen:

contoh

var x = document.getElementsByClassName ( "intro");

Coba »

HTML DOM Tutorial

Dalam tutorial ini halaman berikut, Anda akan belajar:

  • Bagaimana mengubah isi dari elemen HTML (innerHTML)
  • Bagaimana mengubah gaya elemen HTML (CSS)
  • Bagaimana acara HTML DOM dari reaksi
  • Bagaimana cara menambahkan atau menghapus elemen HTML