1.DOM: Dokumen Model Objek DOM (Model Objek Dokumen) mendefinisikan metode standar untuk mengakses dan memproses dokumen HTML. Dom membuat dokumen HTML sebagai struktur pohon (pohon simpul) dengan elemen, atribut, dan teks.
2. Beberapa sifat DOM yang umum digunakan
2.1 Dapatkan elemen dengan ID
(1) Sintaks:
Salinan kode adalah sebagai berikut:
document.geteLementById ("id");
(2) Fungsi: ID mengacu pada kartu ID seseorang. Kami dapat menemukan tag dengan mencari tag ID, dan kemudian melakukan operasi yang sesuai.
(3) Catatan: Jangan lupa untuk menulis dokumen!
2.2 Atribut InnerHTML
(1) Sintaks:
Salinan kode adalah sebagai berikut:
Obgect.innerhtml = "hello world"
(2) Fungsi: Terutama untuk mendapatkan atau mengganti konten dalam tag
(3) Contoh:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> innerHtml </iteme>
</head>
<body>
<h2 id = "con"> javascript </h2>
<p> JavaScript adalah bahasa skrip sederhana berdasarkan objek dan acara yang didorong. Ini tertanam dalam dokumen HTML dan ditafsirkan dan dieksekusi oleh browser, membuat efek tampilan dinamis pada halaman web dan mengimplementasikan fungsi interaksi pengguna. </p>
<type skrip = "Teks/JavaScript">
var mychar = document.geteLementById ("con");
Document.write ("Judul Asli:"+mychar.innerHtml+"<br>"); // Keluarkan konten tag H2 asli
mychar.innerhtml = "Halo dunia!";
document.write ("Judul yang dimodifikasi:"+mychar.innerhtml); // keluaran konten tag H2 yang dimodifikasi
</script>
</body>
</html>
(4) Catatan: Objek adalah objek elemen yang diperoleh, seperti elemen yang diperoleh melalui document.getElementById ("id").
2.3 Ubah Gaya HTML
(1) Sintaks:
Salinan kode adalah sebagai berikut:
Object.style.property
(2) Fungsi: Digunakan untuk memodifikasi gaya HTML
(3) Contoh:
Salinan kode adalah sebagai berikut:
<body>
<h2 id = "con"> Saya suka javascript </h2>
<p> JavaScript memungkinkan halaman web untuk menampilkan efek dinamis dan mengimplementasikan fungsi interaksi pengguna. </p>
<type skrip = "Teks/JavaScript">
var mychar = document.geteLementById ("con");
mychar.style.color = "merah";
mychar.style.backgroundColor = "#ccc";
mychar.style.width = "300px";
</script>
</body>
(4) Catatan: Properti memiliki banyak gaya, seperti warna, tinggi, dll., Yang dapat dimodifikasi menggunakan metode ini. Jangan lupa menambahkan titik koma ke properti setelah mereka.
2.4 Tampilkan dan Sembunyikan (Atribut Tampilan)
(1) Sintaks:
Object.style.display = nilai
(2) Fungsi: Tampilan dan persembunyian sering terlihat di halaman web, yang dicapai dengan menggunakan atribut tampilan.
(3) Contoh:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
fungsi hiddentext ()
{
var mychar = document.geteLementById ("con");
mychar.style.display = "none";
}
function showText ()
{
var mychar = document.geteLementById ("con");
mychar.style.display = "block";
}
</script>
(4) Catatan: Nilai nilai tidak ada dan blok, di mana tidak ada yang tidak ditampilkan, dan blok ditampilkan.
2.5 Atribut ClassName
(1) Sintaks:
Salinan kode adalah sebagai berikut:
Object.className = className
(2) Fungsi: 1. Dapatkan atribut kelas elemen; 2. Tentukan gaya CSS untuk suatu elemen di halaman web untuk mengubah penampilan elemen.
(3) Contoh:
Salinan kode adalah sebagai berikut:
<head>
<meta http-equiv = "konten tipe" content = "text/html; charset = gb2312">
<title> Atribut ClassName </iteme>
<tyle>
body {font-size: 16px;}
.satu{
Perbatasan: 1px solid #eee;
Lebar: 230px;
Tinggi: 50px;
Latar Belakang: #CCC;
Warna: Merah;
}
.dua{
Perbatasan: 1px solid #ccc;
Lebar: 230px;
Tinggi: 50px;
Latar Belakang:#9CF;
Warna: Biru;
}
</tyle>
</head>
<body>
<p id = "p1"> JavaScript memungkinkan halaman web untuk menampilkan efek dinamis dan mengimplementasikan fungsi interaksi pengguna. </p>
<input type = "Tombol" value = "Tambahkan gaya" onClick = "add ()"/>
<p id = "p2"> JavaScript memungkinkan halaman web untuk menampilkan efek dinamis dan mengimplementasikan fungsi interaksi pengguna. </p>
<input type = "tombol" value = "ubah penampilan" onclick = "odify ()"/>
<type skrip = "Teks/JavaScript">
fungsi add () {
var p1 = document.geteLementById ("p1");
p1.classname = "satu";
}
fungsi memodifikasi () {
var p2 = document.geteLementById ("p2");
p2.classname = "dua";
}
</script>
</body>
Di atas adalah semua tentang artikel ini, saya harap Anda menyukainya.