-tutorial js-php.cn

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

JavaScript 读取网页元素中的文本和属性

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;

Salin selepas log masuk

textContent

: Serupa dengan innerText, tetapi juga mendapat teks tersembunyi.

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

Salin selepas log masuk

value

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

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

Salin selepas log masuk

Dapatkan atribut

getAttribute(nama)

: Dapatkan nilai atribut yang ditentukan.

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

Salin selepas log masuk

set data data-: Akses atribut data yang diawali dengan

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

Salin selepas log masuk

style

: Akses sifat gaya CSS.

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

Salin selepas log masuk

Kes praktikal

Dapatkan tajuk halaman

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

Salin selepas log masuk

Tetapkan nilai input borang

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

Salin selepas log masuk

Baca atribut data bagi butang

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

Salin selepas log masuk

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!