Rumah > Artikel > hujung hadapan web > Cara menukar teks di dalam semua tag HTML menggunakan JavaScript
Cara menukar teks di dalam semua tag HTML menggunakan JavaScript
- WBOYke hadapan
- 2023-08-26 13:57:141540semak imbas
Dalam artikel ini, kami akan melaksanakan tugas menukar teks dalam semua tag HTML menggunakan JavaScript. Mari selami artikel ini untuk mengetahui lebih lanjut tentang menukar teks dalam semua HTML, tetapi pertama sekali, mari kita tentukan teg HTML.
Apakah itu tag HTML
Teg HTML ialah sekeping bahasa penanda yang digunakan untuk menunjukkan permulaan dan penghujung elemen HTML dalam dokumen HTML. Tag HTML ialah blok binaan elemen HTML yang membantu pelayar web menukar dokumen HTML ke halaman web.
Untuk pemahaman yang lebih baik, gunakan JavaScript untuk menukar teks di dalam semua tag HTML. Mari kita lihat contoh berikut.
Contoh
Dalam contoh di bawah, kami akan membuat halaman web mudah di mana kami akan menukar teks dengan menjalankan skrip.
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h2>
Click on the button to change the text
</h2>
<label id = "tutorial">
Welcome to Tutorialspoint
</label>
<br>
<button onclick="changetext()">
Click Here!
</button>
<script>
function changetext() {
var x = document.getElementById("tutorial");
if (x.innerHTML === "Welcome to Tutorialspoint") {
x.innerHTML = "The Best E-way Learning";
} else {
x.innerHTML = "Welcome to Tutorialspoint";
}
}
</script>
</body>
</html>
Apabila skrip dilaksanakan, ia akan menghasilkan output yang terdiri daripada teks dan butang yang diklik. Jika pengguna mengklik butang, teks akan berubah dan teks lain akan muncul di halaman web.
Gunakan replaceWith()
KaedahElement.replaceWith() menggantikan objek dalam senarai anak ibu bapa Elemen ini dengan set objek Nod atau rentetan. Memasukkan nod teks yang setara untuk objek String.
Tatabahasa
Berikut ialah sintaks replaceWith() -
ChildNode.replaceWith(Node);
Contoh
Pertimbangkan contoh berikut di mana kami menggunakan replaceWith() untuk menukar teks di dalam markup.
<!DOCTYPE html>
<html>
<body>
<h2 id="tutorial">
<span class="quotation">“</span>
Lost in the ave of you
<span class="quotation">”</span>
</h2>
<script>
const changed = document.getElementById('tutorial');
changed.childNodes[2].replaceWith('Welcome');
</script>
</body>
</html>
Apabila anda menjalankan skrip di atas, tetingkap output akan muncul menunjukkan teks pada halaman web digantikan dengan teks asal yang digunakan dalam skrip.
Gunakan querySelector()
Apabila satu atau satu set pemilih disediakan, kaedah Dokumen querySelector() mengembalikan Elemen pertama dalam dokumen yang sepadan dengannya. Mengembalikan Null jika tiada padanan.
Tatabahasa
Berikut ialah sintaks querySelector()
querySelector(selectors)
Contoh
Laksanakan kod berikut, kami menggunakan querySelector() untuk menukar teks dalam teg HTML.
<!DOCTYPE html>
<html>
<body>
<h1>Welcome</h1>
<script>
document.querySelector("h1").textContent = 'Tutorialspoint';
</script>
</body>
</html>
Apabila skrip dilaksanakan, ia akan menghasilkan output yang mengandungi teks daripada halaman web yang digantikan dengan teks asal yang digunakan dalam penanda.
Atas ialah kandungan terperinci Cara menukar teks di dalam semua tag HTML menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!