Rumah > Artikel > hujung hadapan web > Pengenalan kepada objek dokumen dalam js
Pengenalan kepada objek dokumen dalam js
- PHPzasal
- 2024-02-18 13:06:07620semak imbas
Pengenalan kepada objek Dokumen dalam JavaScript dan contoh kod
Pengenalan:
Dalam JavaScript, objek Dokumen ialah antara muka yang mewakili keseluruhan dokumen HTML Ia menyediakan kaedah akses dan operasi kepada dokumen HTML. Artikel ini akan memperkenalkan kaedah dan sifat biasa bagi objek Dokumen dan menyediakan beberapa contoh kod khusus.
- getElementById method
getElementById ialah kaedah penting bagi objek Document, digunakan untuk mendapatkan nod elemen yang sepadan berdasarkan atribut id bagi elemen yang ditentukan. Perubahan dinamik pada halaman boleh dicapai dengan mengubah suai sifat atau kandungan nod elemen. Berikut ialah contoh kod khusus:
<html>
<body>
<h1 id="myHeading">Hello, World!</h1>
<script>
var heading = document.getElementById("myHeading");
heading.innerHTML = "Hello, JavaScript!";
</script>
</body>
</html>Dalam kod di atas, nod elemen dengan id "myHeading" diperoleh melalui kaedah getElementById dan kandungannya ditukar kepada "Hello, JavaScript!" Kaedah
- getElementsByTagName
getElementsByTagName digunakan untuk mendapatkan semua nod elemen nama tag yang ditentukan dan mengembalikan objek NodeList. Anda boleh menggunakan sifat panjang objek NodeList untuk mendapatkan bilangan elemen padanan dan mengakses setiap elemen mengikut indeks. Berikut ialah kod sampel:
<html>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
var listItems = document.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
listItems[i].style.color = "red";
}
</script>
</body>
</html>Dalam kod di atas, semua nod elemen li diperoleh melalui kaedah getElementsByTagName, dan warna teks setiap elemen li ditukar kepada merah melalui gelung for.
- createElement dan kaedah appendChild
Kaedah createElement digunakan untuk mencipta nod elemen baharu, manakala kaedah appendChild menambah nod elemen baharu pada nod induk yang ditentukan. Berikut ialah contoh kod:
<html>
<body>
<div id="myDiv"></div>
<script>
var newElement = document.createElement("p");
newElement.innerHTML = "This is a new paragraph.";
document.getElementById("myDiv").appendChild(newElement);
</script>
</body>
</html>Dalam kod di atas, nod elemen p baharu dicipta melalui kaedah createElement dan ditambah pada elemen div dengan id "myDiv" menggunakan kaedah appendChild.
Ringkasan:
Artikel ini memperkenalkan beberapa kaedah dan sifat biasa objek Dokumen dalam JavaScript, termasuk getElementById, getElementsByTagName, createElement dan appendChild. Melalui kaedah dan sifat ini, anda boleh mengakses dan mengendalikan nod elemen dokumen HTML dengan mudah. Saya harap contoh kod yang disediakan dalam artikel ini akan membantu pembaca yang sedang belajar dan menggunakan JavaScript.
Atas ialah kandungan terperinci Pengenalan kepada objek dokumen dalam js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!