JavaScript textContent özelliği, sayfanın metin içeriğini ayarlamak ve almak için çalışır. Bazı bilgilerin, etiketlerin ve büyük boyutlu verilerin ve düğümlerinin metin içeriğini iletmek ve görüntülemek için kullanılır. TextContent, script etiketinin nodeValue değerinden farklılık gösterir ve birden çok veri türünün alt düğümlerinden içerik döndürür.
Düğüm bir metin düğümü, bir işlem talimatı veya bir etiket açıklaması ise, javascript textContent metni alır veya ayarlar. TextContent, her alt düğümün textContent'inin birleşimini gösterir. İşleme talimatlarını ve yorumlarını diğer düğüm türlerine gösterir.
Sözdizimi
JavaScript metin içeriği için iki sözdizimi mevcuttur. İlk sözdizimi bir düğümün metnini ayarlamak için kullanılır, ikinci sözdizimi ise düğümün metnini almak için kullanılır.
Sözdizimi 1:
Aşağıdaki sözdizimi, metin içeriğini kullanarak düğümün metnini ayarlamak için kullanılır.
enum'un java değeri
Node_element.textContent = information;
Sözdizimi 2:
Aşağıdaki sözdizimi, düğümün metnini almak için metin içeriğini kullanır.
Node_element.textContent;
Geri dönüş değeri:
- Bir dize, çıktı düğümünün ve onun alt düğümünün metnini içerir. Bir öğe bir belge veya belge türü ise çıktı boş bir değer gösterir.
- Alt düğümlerin yerini, textContent özniteliği kümesi kullanılarak tek bir Metin düğümü alır. Özelliğin içeriği olarak belirli bir dize vardır.
Örnekler
Aşağıdaki örnekler, textContent niteliğini kullanarak seti gösterir ve çeşitli türde bilgileri alır.
örnek 1
Aşağıdaki örnek, bilgileri ayarlamak için javascript'teki metin içeriğini kullanır. Düğüm verileri etiketlerin metnini gösterir.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes</h4> Click Here! function display() { var ele = document.getElementById('textContent_information'); ele.textContent = ' <i> JavaScript </i> <h2> Set or get the content of node </h2>'; } Çıktı
Aşağıdaki resim, içerik düğümünü kullanarak veri ayarlamayı göstermektedir.
Örnek 2
Aşağıdaki örnek, bilgiyi almak için javascript'teki metin içeriğini kullanır. Tıklama fonksiyonunun butonunun değerini alabiliriz.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Get node information for child javascript nodes </h4> Get node information for child javascript nodes <br> Click the Button! var text_in = document.getElementById('myData1').textContent; function fdisplay() { document.getElementById('textContent_information').textContent = text_in; } Çıktı
Aşağıdaki resim, içerik düğümünü kullanarak veri ayarlamayı göstermektedir.
Örnek 3
Aşağıdaki örnek, bilgiyi almak için javascript'teki metin içeriğini kullanır. Tıklama fonksiyonunun butonunun değerini alabiliriz.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes </h4> Click the Button! function fdisplay() { var text_in = document.getElementById('value').textContent; document.getElementById('textContent_information').textContent = text_in; } Çıktı
Aşağıdaki resim, içerik düğümünü kullanarak veri ayarlamayı göstermektedir.
Örnek4
kabuk sıralaması
Aşağıdaki örnek, bilgileri almak ve ayarlamak için düğme değerindeki metin içeriğini kullanır. Butona tıkladıktan sonra değeri alabiliriz.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <p id="info"> Get node information for child javascript nodes </p> Click the Button! <br> See the value! function fdisplay() { document.getElementById('value').textContent = 'the information of the node has been changed using click function!'; var text_in = document.getElementById('info').textContent; document.getElementById('values').textContent = text_in; } Çıktı
Aşağıdaki resim, içerik düğümünü kullanarak veri ayarlamayı göstermektedir.
Örnek5
Aşağıdaki örnek, düğme değerindeki innerHtml, innerText ve metin içeriğini kullanarak bilgileri almak ve ayarlamak için kullanılır. Butona tıkladıktan sonra çıktı verilerindeki farkı alabiliriz.
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> Click the innerHtml Button! Click the innerText Button! Click the textcontent Button! function fdisplay() { document.getElementById('finfo').innerHTML = ' <b> textContent in JavaScript using node </b> the information of the node has been changed using click function!'; } function sdisplay() { document.getElementById('sinfo').innerText = ' <b> textContent in JavaScript using node </b> <br> the information of the node has been changed using click function!'; } function tdisplay() { document.getElementById('tinfo').textContent = ' <b> textContent in JavaScript using node </b> <br> textContent in JavaScript using node <br> the information of the node has been changed using click function!'; } Çıktı
Aşağıdaki resim, içerik düğümünü kullanarak veri ayarlamayı göstermektedir.
Örnek 6
Aşağıdaki örnek, liste verilerini almak ve onclick düğmesi değerindeki metin içeriğini kullanarak bilgileri ayarlamak için kullanılır. Listenin verilerini ve diğer etiket bilgilerini alabiliriz.
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> <li id="std1">David</li> <li id="std2">Sai</li> <li id="std3">Ruta</li> <li id="std4">Saniya</li> <li id="std5">Kevin</li> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById('students').textContent; document.getElementById('tinfo').textContent = students; } Çıktı
Aşağıdaki resim, içerik düğümünü kullanarak veri ayarlamayı göstermektedir.
javascript operatörleri
Örnek 7
Bilgi veya dize boşsa metin içeriği boş verileri desteklemez. Boş dizeyi değer olarak gösterir.
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById('students').textContent; console.log(students); if(students != ''){ document.getElementById('tinfo').textContent = 'child node does not available of the student parent node.'; }else{ document.getElementById('tinfo').textContent = 'child node is available of the student parent node.'; } } Çıktı
Aşağıdaki resimde metin içerik düğümü kullanılarak verilerin alınması gösterilmektedir.
Javascript'teki metin içeriğinin Kilit Noktası
- Javascript bilgileri HTML'yi otomatik olarak kaldırdığında, textContent'in kullanımı güvenli olur.
- Metin içeriği ve bilgileri boşlukları ve iç öğe etiketlerini içerir. innerHTML özelliği onu döndürecektir.
- innerText niteliği, herhangi bir boşluk veya iç öğe etiketi içermeyen yalnızca metni döndürür. textContent özelliği, boşluk içeren ancak iç öğe etiketlerini hariç tutan metni döndürür.
- Alt ağaçtaki tüm metin düğümlerinin değerleri birleştirilir ve metin içeriği için ayarlanır ve metin içeriğinden alınır. Bir düğümün çocuğu yoksa dize boştur.
- innerText, insanlar tarafından okunabilen ve herhangi bir CSS'ye aktarılabilen metni döndürür. Verilerde html etiketleri kullanıldığında metin içeriğinin okunması zordur.
- Bir özellik bir düğümde ayarlandığında, tüm alt öğeleri kaldırılır ve belirtilen değere sahip tek bir metin düğümü onun yerini alır.
Çözüm
Metin içeriği birden fazla bilgi türünü görüntüler. Html etiketi, gerekli bilgileri ve liste verilerini tek bir yöntem kullanarak gösterir.