Bagaimana untuk Mendapatkan Kandungan Teks daripada Elemen Div Menggunakan JavaScript Biasa?

Barbara Streisand
Lepaskan: 2024-10-18 21:12:30
asal
621 orang telah melayarinya

How to Get Text Content from a Div Element Using Plain JavaScript?

Mendapatkan Kandungan Teks daripada Elemen Div Menggunakan JavaScript Biasa

Dalam percubaan anda untuk mendapatkan semula teks dalam div menggunakan sifat "nilai" , anda menghadapi isu di mana "tidak ditentukan" dikembalikan. Untuk berjaya mengekstrak kandungan teks menggunakan JavaScript tulen, anda boleh menggunakan pendekatan berikut:

Sifat "nilai" digunakan terutamanya dengan elemen input, bukan elemen div. Untuk mengakses kandungan teks div, anda harus memanfaatkan sama ada sifat "innerHTML" atau "textContent".

Menggunakan sifat "innerHTML":

function test() {
  var t = document.getElementById('superman').innerHTML;
  alert(t);
}
Salin selepas log masuk

Pendekatan ini mendapatkan semula keseluruhan kandungan dalam div, termasuk sebarang teg HTML. Walau bagaimanapun, jika div anda mengandungi teks sahaja, kaedah ini sesuai.

Sebagai alternatif, pertimbangkan untuk menggunakan sifat "textContent":

function test() {
  var t = document.getElementById('superman').textContent;
  alert(t);
}
Salin selepas log masuk

Sifat "textContent" mengembalikan kandungan teks secara eksklusif dalam div, tidak termasuk sebarang teg HTML. Pilihan ini amat berguna apabila berurusan dengan div yang mungkin mengandungi kandungan bercampur.

Sebagai contoh, pertimbangkan HTML berikut:

<div id="test">
  Some <span class="foo">sample</span> text.
</div>
Salin selepas log masuk

Menggunakan sifat "innerHTML" akan mengembalikan perkara berikut:

var node = document.getElementById('test');

htmlContent = node.innerHTML;
// htmlContent = "Some <span class="foo">sample</span> text."
Salin selepas log masuk

Walau bagaimanapun, menggunakan sifat "textContent" akan menghasilkan:

textContent = node.textContent;
// textContent = "Some sample text."
Salin selepas log masuk

Untuk butiran lanjut dan contoh penggunaan, rujuk dokumentasi komprehensif yang disediakan oleh MDN:

  • [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
  • [innerHTML](https://developer.mozilla.org /en-US/docs/Web/API/Element/innerHTML)

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Kandungan Teks daripada Elemen Div Menggunakan JavaScript Biasa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan