Bagaimana untuk mengendalikan elemen HTML dengan javascript

PHPz
Lepaskan: 2023-04-26 11:30:04
asal
757 orang telah melayarinya

JavaScript ialah bahasa skrip yang digunakan terutamanya untuk pembangunan web dinamik. Ia boleh disepadukan dengan mudah dengan HTML dan CSS, serta boleh mengendalikan dan mengawal elemen dalam halaman web melalui fungsi JavaScript dan pengendali acara. Oleh itu, terdapat banyak kaedah dalam JavaScript yang boleh memanipulasi elemen HTML. Di bawah, beberapa kaedah HTML yang biasa digunakan akan diperkenalkan.

  1. getElementById()

getElementById() kaedah boleh mendapatkan elemen berdasarkan atribut IDnya. Contohnya:

var myElement = document.getElementById("myId");
Salin selepas log masuk

Ini akan mengembalikan elemen dengan atribut ID "myId". Kaedah

  1. getElementsByClassName()

getElementsByClassName() boleh mendapatkan elemen berdasarkan atribut kelasnya. Contohnya:

var myElements = document.getElementsByClassName("myClass");
Salin selepas log masuk

Ini akan mengembalikan semua elemen dengan atribut kelas "myClass". Kaedah

  1. getElementsByTagName()

getElementsByTagName() boleh mendapatkan elemen berdasarkan nama tegnya. Contohnya:

var myElements = document.getElementsByTagName("div");
Salin selepas log masuk

Ini akan mengembalikan semua elemen div.

  1. createElement()

kaedah createElement() boleh mencipta elemen dalam DOM secara dinamik. Contohnya:

var newElement = document.createElement("div");
Salin selepas log masuk

Ini akan mencipta elemen div baharu.

  1. appendChild()

appendChild() kaedah memasukkan satu elemen di hujung elemen lain. Contohnya:

var parentElement = document.getElementById("parent");
var childElement = document.createElement("div");
parentElement.appendChild(childElement);
Salin selepas log masuk

Ini akan menambah elemen div baharu pada penghujung elemen dengan ID "ibu bapa".

  1. removeChild()

kaedah removeChild() boleh mengalih keluar elemen daripada DOM. Contohnya:

var parentElement = document.getElementById("parent");
var childElement = document.getElementById("child");
parentElement.removeChild(childElement);
Salin selepas log masuk

Ini akan mengalih keluar elemen dengan ID "anak" daripada elemen dengan ID "ibu bapa".

  1. innerHTML

innerHTML atribut boleh digunakan untuk menetapkan atau mendapatkan kandungan HTML. Contohnya:

var myElement = document.getElementById("myId");
myElement.innerHTML = "Hello World!";
Salin selepas log masuk

Ini akan menetapkan kandungan HTML kepada "Hello World dalam elemen dengan ID "myId". Atribut gaya

  1. gaya

boleh digunakan untuk menetapkan sifat CSS sesuatu elemen. Contohnya:

var myElement = document.getElementById("myId");
myElement.style.color = "red";
Salin selepas log masuk

Ini akan menetapkan warna teks elemen dengan ID "myId" kepada merah. Terdapat banyak sifat CSS yang boleh ditetapkan, seperti warna latar belakang, sempadan, saiz fon, dll.

Di atas ialah beberapa kaedah yang biasa digunakan untuk memanipulasi elemen HTML dalam JavaScript. Melalui kaedah ini, anda boleh memanipulasi elemen dalam halaman web dengan mudah dan dinamik untuk mencapai kesan halaman web yang lebih berwarna.

Atas ialah kandungan terperinci Bagaimana untuk mengendalikan elemen HTML dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan