Pengenalan kepada objek dokumen dalam js-tutorial js-php.cn

Pengenalan kepada objek dokumen dalam js

PHPz

Lepaskan： 2024-02-18 13:06:07

asal

672 orang telah melayarinya

Pengenalan kepada objek dokumen dalam js

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!