Bagaimana untuk mendapatkan semula berbilang teks di bawah teg javascript

Sebagai bahasa skrip yang biasa digunakan, JavaScript boleh membantu pembangun web memanipulasi teks HTML dengan mudah. Apabila kita perlu mendapatkan berbilang kandungan teks di bawah label, kita boleh menggunakan beberapa kaedah dan pernyataan JavaScript yang mudah untuk mencapainya.

Menggunakan atribut innerHTML

Dalam JavaScript, kita boleh menggunakan atribut innerHTML untuk mendapatkan kandungan teks di bawah teg HTML. Atribut innerHTML boleh mendapatkan semua teks yang terkandung dalam teg, termasuk kandungan teks teg bersarang.

Sebagai contoh, katakan kita mempunyai struktur HTML sedemikian:

<div id="container">
  <p>这是第一段文本</p>
  <p>这是第二段文本</p>
  <p>这是第三段文本</p>
</div>

Kita boleh menggunakan kod berikut untuk mendapatkan kandungan teks di bawah semua tag p:

var container = document.getElementById("container");
var innerText = container.innerHTML;

console.log(innerText);

Hasil output ialah:

<p>这是第一段文本</p>
<p>这是第二段文本</p>
<p>这是第三段文本</p>

Walau bagaimanapun, perlu diingatkan bahawa atribut innerHTML bukan sahaja akan memperoleh kandungan teks, tetapi juga memperoleh elemen tag itu sendiri, termasuk atribut dan peristiwa dalam teg Oleh itu, apabila menggunakan atribut innerHTML untuk mendapatkan kandungan teks, anda perlu terlebih dahulu Hanya dengan mengalih keluar elemen HTML kita boleh mendapatkan teks yang kita inginkan.

Gunakan atribut innerText

Selain atribut innerHTML, kita juga boleh menggunakan atribut innerText untuk mendapatkan kandungan teks biasa di bawah teg HTML Ia akan mengabaikan teg HTML dan kembali sahaja bahagian kandungan teks. Atribut ini hanya boleh mendapatkan kandungan teks dalam elemen semasa, bukan kandungan teks elemen anaknya.

Oleh itu, jika kita ingin mendapatkan berbilang kandungan teks di bawah teg HTML, kita perlu menggunakan gelung for untuk mendapatkan atribut innerText bagi elemen anak satu demi satu. Contohnya:

var container = document.getElementById("container");
var paragraphs = container.getElementsByTagName("p");
var innerText = "";

for (var i = 0; i < paragraphs.length; i++) {
  innerText += paragraphs[i].innerText + "
";
}

console.log(innerText);

Hasil output ialah:

这是第一段文本
这是第二段文本
这是第三段文本

Menggunakan atribut textContent

Selain daripada dua kaedah di atas, kita juga boleh menggunakan atribut textContent untuk mendapatkan kandungan teks di bawah teg HTML. Berbeza daripada innerText, atribut textContent akan memperoleh semua nod teks di bawah label, termasuk semua ruang dan baris baharu dalam label.

Begitu juga, jika kita ingin mendapatkan berbilang kandungan teks di bawah teg HTML, kita perlu menggunakan gelung for untuk mendapatkan atribut textContent bagi elemen anak satu demi satu. Contohnya:

var container = document.getElementById("container");
var paragraphs = container.getElementsByTagName("p");
var textContent = "";

for (var i = 0; i < paragraphs.length; i++) {
  textContent += paragraphs[i].textContent + "
";
}

console.log(textContent);

Hasil output ialah:

这是第一段文本
这是第二段文本
这是第三段文本

Ringkasnya, JavaScript menyediakan pelbagai kaedah untuk mendapatkan kandungan teks di bawah teg HTML. Pilih sahaja kaedah yang sesuai mengikut keperluan anda untuk mendapatkan kandungan teks yang diperlukan.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan semula berbilang teks di bawah teg javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!