JavaScript menyediakan kaedah untuk membaca teks dan atribut elemen halaman web, termasuk: Membaca teks: innerText, textContent, value Mendapatkan atribut: getAttribute, dataset, style

JavaScript membaca teks dan atribut dalam elemen halaman web

Pengenalan

JavaScript menyediakan pelbagai kaedah untuk membaca dan memanipulasi teks dan atribut dalam elemen halaman web. Artikel ini akan meneroka kaedah yang berbeza dan memberikan contoh praktikal untuk menggambarkan penggunaannya.

Baca kandungan teks

innerTeks

: Dapatkan teks yang boleh dilihat dalam elemen, termasuk elemen kanak-kanak.

let text = document.getElementById("element").innerText;

textContent

: Serupa dengan innerText, tetapi juga mendapat teks tersembunyi.

let text = document.getElementById("element").textContent;

value

: Dapatkan nilai semasa elemen borang seperti kotak input dan kawasan teks.

let value = document.querySelector("input[type=text]").value;

Dapatkan atribut

getAttribute(nama)

: Dapatkan nilai atribut yang ditentukan.

let href = document.getElementById("link").getAttribute("href");

set datadata-: Akses atribut data yang diawali dengan

.

let username = document.querySelector("user-profile").dataset.username;

style

: Akses sifat gaya CSS.

let color = document.getElementById("element").style.color;

Kes praktikal

Dapatkan tajuk halaman

const title = document.querySelector("head title").innerText;
console.log(title); // 输出：我的网站

Tetapkan nilai input borang

document.querySelector("input[name=name]").value = "John Doe";

Baca atribut data bagi butang

const button = document.querySelector("button");
const action = button.dataset.action;
console.log(action); // 输出：show-details

berdasarkan CSS ee Kesimpulan

Dikuasakan oleh JavaScript Alat yang berkuasa untuk membaca dan memanipulasi teks dan atribut elemen halaman web. Memahami kaedah ini adalah penting untuk memanipulasi dan memanipulasi kandungan DOM secara dinamik. Menggunakan contoh praktikal yang disediakan di atas, anda boleh menggunakan teknik ini dengan mudah pada projek anda sendiri.

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