HTML DOM textContent Özellik
Örnek
Bir öğenin metin içeriğini alın:
var x =
document.getElementById("myBtn").textContent;
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
textContent özelliği, belirtilen düğümün ve tüm alt öğelerinin metin içeriğini ayarlar veya döndürür .
textContent özelliğini ayarlarsanız , tüm alt düğümler kaldırılır ve belirtilen dizeyi içeren tek bir Metin düğümü ile değiştirilir.
Not: Bu özellik innerText özelliğine benzer, ancak bazı farklılıklar vardır:
- textContent tüm öğelerin metin içeriğini döndürürken innerText , <script> ve <style> öğeleri dışında tüm öğelerin içeriğini döndürür.
- innerText, CSS ile gizlenmiş öğelerin metnini döndürmez (textContent olacaktır).
İpucu: Bazen bu özellik nodeValue özelliği yerine kullanılabilir , ancak bu özelliğin tüm alt düğümlerin metnini de döndürdüğünü unutmayın.
İpucu: Bir öğenin HTML içeriğini ayarlamak veya döndürmek için innerHTML özelliğini kullanın.
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Property | |||||
---|---|---|---|---|---|
textContent | 1.0 | 9.0 | Yes | Yes | Yes |
Sözdizimi
Bir düğümün metin içeriğini döndür:
node.textContent
Bir düğümün metin içeriğini ayarlayın:
node.textContent = text
Mülk değerleri
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
Teknik detaylar
Geri dönüş değeri: | Düğümün metnini ve tüm alt öğelerini temsil eden bir Dize. Öğe bir belge, belge türü veya gösterim ise null döndürür. |
---|---|
DOM Sürümü | Çekirdek Düzey 3 Düğüm Nesnesi |
Daha fazla örnek
Örnek
Bir <p> öğesinin metin içeriğini id="demo" ile değiştirin:
document.getElementById("demo").textContent = "Paragraph changed!";
Örnek
id="myList" ile bir <ul> öğesinin tüm metin içeriğini alın:
var x = document.getElementById("myList").textContent;
x'in değeri şöyle olacaktır:
Coffee Tea
Örnek
Bu örnek innerText, innerHTML ve textContent arasındaki bazı farklılıkları gösterir:
<p id="demo"> This element has extra spacing and contains <span>a span
element</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
Belirtilen özelliklerle yukarıdaki <p> öğesinin içeriğini alın:
innerText şunu döndürür: "Bu öğede fazladan boşluk var ve bir yayılma öğesi içeriyor."
innerHTML şunu döndürür: " Bu öğede fazladan boşluk var ve <span>bir yayılma öğesi</span> içeriyor."
textContent şunu döndürür: " Bu öğede fazladan boşluk var ve bir yayılma öğesi içeriyor."
innerText özelliği, boşluk ve iç eleman etiketleri olmadan yalnızca metni döndürür.
innerHTML özelliği, tüm boşluk ve iç öğe etiketleri dahil olmak üzere metni döndürür.
textContent özelliği, metni boşluklu, ancak iç öğe etiketleri olmadan döndürür.