dokumen set javascript

JavaScript ialah bahasa pengaturcaraan yang berkuasa yang boleh membenamkan kod secara langsung dalam halaman web untuk mengubah penampilan dan tingkah laku halaman web. Dalam JavaScript, objek dokumen mewakili keseluruhan halaman web, dan kami boleh menggunakannya untuk mengubah suai kandungan dan struktur halaman web secara dinamik.

Dalam artikel ini, kita akan membincangkan beberapa tetapan asas dan penggunaan objek dokumen dalam JavaScript.

1 Dapatkan elemen
Untuk mengubah suai elemen dalam halaman web, anda mesti mendapatkan rujukan elemen tersebut terlebih dahulu. Dalam JavaScript, anda boleh mendapatkan elemen melalui kaedah berikut:

1. Dapatkan melalui id
   Jika elemen mempunyai atribut id unik, anda boleh mendapatkan rujukan kepada elemen melalui document.getElementById () kaedah . Kaedah ini menerima parameter rentetan, iaitu nilai id elemen dan mengembalikan objek yang mewakili elemen. Contohnya:

var elem = document.getElementById("my-element");

2. Mendapatkan dengan nama teg
   Anda boleh menggunakan kaedah document.getElementsByTagName() untuk mendapatkan semua elemen dengan nama teg yang ditentukan. Kaedah ini menerima parameter rentetan, iaitu nama label, dan mengembalikan objek senarai nod. Contohnya:

var elems = document.getElementsByTagName("p");

3. Mendapatkan mengikut nama kelas
   Anda boleh menggunakan kaedah document.getElementsByClassName() untuk mendapatkan semua elemen dengan nama kelas yang ditentukan. Kaedah ini menerima parameter rentetan, iaitu nama kelas, dan mengembalikan objek senarai nod. Contohnya:

var elems = document.getElementsByClassName("my-class");

4. Melalui pemilih
   Anda boleh menggunakan kaedah document.querySelector() dan document.querySelectorAll() untuk mendapatkan elemen yang sepadan dengan pemilih yang ditentukan. Kaedah ini menerima parameter rentetan, pemilih CSS dan mengembalikan objek nod atau objek senarai nod. Contohnya:

var elem = document.querySelector(".my-class");
var elems = document.querySelectorAll("p");

2. Ubah suai atribut dan kandungan elemen
Selepas mendapatkan rujukan elemen, anda boleh menggunakan JavaScript untuk mengubah suai atribut dan kandungan elemen. Berikut ialah beberapa operasi biasa:

1. Ubah suai kandungan teks elemen
   Anda boleh menggunakan atribut innerHTML untuk mengubah suai kandungan teks elemen. Contohnya:

elem.innerHTML = "Hello, world!";

2. Ubah suai gaya elemen
   Anda boleh menggunakan atribut gaya untuk mengubah suai gaya elemen. Contohnya:

elem.style.color = "red";
elem.style.backgroundColor = "blue";

3. Ubah suai kelas elemen
   Anda boleh menggunakan atribut className untuk mengubah suai kelas elemen. Contohnya:

elem.className = "my-class";

4. Ubah suai atribut elemen
   Anda boleh menggunakan kaedah setAttribute() dan kaedah removeAttribute() untuk mengubah suai atribut elemen dan memadamkan atribut unsur tersebut. Contohnya:

elem.setAttribute("href", "http://www.example.com");
elem.removeAttribute("target");

3. Menambah dan memadam elemen
JavaScript juga boleh menambah dan memadam elemen secara dinamik Berikut ialah beberapa contoh:

1. Tambah elemen
   . Elemen baharu boleh dibuat menggunakan kaedah createElement() dan ditambah pada dokumen menggunakan kaedah appendChild() atau kaedah insertBefore(). Contohnya:

var newElem = document.createElement("p");
newElem.innerHTML = "This is a new paragraph.";
document.body.appendChild(newElem);

2. Alih Keluar Elemen
   Anda boleh menggunakan kaedah removeChild() untuk mengalih keluar elemen daripada dokumen. Contohnya:

document.body.removeChild(elem);

4. Pengendali acara
Pengendali acara dalam JavaScript digunakan untuk bertindak balas kepada operasi pengguna atau acara penyemak imbas. Berikut ialah beberapa contoh:

1. Tambahkan pendengar acara pada elemen
   Anda boleh menggunakan kaedah addEventListener() untuk menambah pendengar acara pada elemen. Kaedah ini menerima tiga parameter: jenis acara, fungsi pengendalian acara dan sama ada untuk mencetuskan acara semasa fasa tangkapan (pilihan). Contohnya:

elem.addEventListener("click", function() {
  alert("Clicked!");
});

2. Mengalih keluar pendengar acara elemen
   Anda boleh menggunakan kaedah removeEventListener() untuk mengalih keluar pendengar acara elemen. Kaedah ini menerima dua parameter: jenis acara dan fungsi pengendalian acara, yang mesti sama dengan fungsi yang digunakan semasa menambah pendengar acara. Contohnya:

elem.removeEventListener("click", listener);

5. Ringkasan
Objek dokumen dalam JavaScript boleh membantu kami mengubah suai kandungan dan struktur halaman web secara dinamik supaya pengguna boleh berinteraksi dengan halaman web. Artikel ini memperkenalkan beberapa kaedah penggunaan biasa, termasuk mendapatkan elemen, mengubah suai sifat dan kandungan elemen, menambah dan mengalih keluar elemen, pengendali acara, dsb. Saya harap kandungan ini dapat membantu anda menggunakan JavaScript dengan lebih baik untuk memaparkan hasil yang sangat baik pada halaman web.

Atas ialah kandungan terperinci dokumen set javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!