Bu kılavuz, JavaScript'te HTML DOM öğesi 'textContent' özelliğine nasıl erişileceğini ve değiştirileceğini gösterecektir.
Öncelikle HTML DOM “textContent” özelliğinin temellerine bir göz atın.
JavaScript'teki HTML DOM “textContent” Özelliği nedir?
“ Metin içeriği ”, belirli bir öğenin veya düğümün metnini, onun tüm alt öğeleri de dahil olmak üzere ayarlayan, alan ve değiştiren yerleşik özelliktir. Alt öğeler, biçimlendirme amacıyla kullanılan , , ve çok daha fazlası gibi alt öğelerdir. “textContent” özelliği kullanılarak metin ayarlanırken, hedeflenen öğenin alt öğeleri tamamen yeni metinle değiştirilir.
Sözdizimi(Metin İçeriğini Ayarla)
Bir öğenin/düğümün metnini “” kullanarak ayarlamak için temel sözdizimi Metin içeriği ” özelliği aşağıda yazılmıştır:
eleman. Metin içeriği = metin | düğüm. Metin içeriği = metin
Yukarıdaki sözdizimi istenen “ metin Kullanıcının bir öğe veya düğüm için ayarlamak istediği değer olarak.
Sözdizimi(Metin İçeriğini Al)
Bir öğenin veya düğümün metnini “ aracılığıyla döndürmek için genelleştirilmiş sözdizimi Metin içeriği ” özelliği burada belirtilmiştir:
eleman. Metin içeriği | düğüm. Metin içeriğiGeri dönüş değeri: “ Metin içeriği ” özelliği “ döndürür metin ” boşluklu ancak iç HTML etiketleri olmayan bir öğenin veya düğümün.
Şimdi “textContent” özelliğine erişmek ve onu değiştirmek için yukarıda tanımlanan sözdizimlerini pratik olarak kullanın.
JavaScript'te HTML DOM Öğesi “textContent” Özelliğine Nasıl Erişilir ve Yönetilir?
“innerHTML” ve “innerText” özelliklerine benzer şekilde, “ Metin içeriği ” özelliği ayrıca kullanıcıların istenen öğenin metnini kolayca ayarlamasına, erişmesine ve değiştirmesine olanak tanır. Bu bölümde tüm bu işlemler bir eleman üzerinde aşağıda belirtilen örnekler kullanılarak gerçekleştirilmektedir.
Örnek 1: Öğe/Düğüm Metnine Erişmek için “textContent” Özelliğini Uygulama
Bu örnek, belirli bir öğenin veya düğümün metnini, tüm alt öğeleri dahil olmak üzere döndürmek için 'textContent' özelliğini uygular.
HTML Kodu
< div İD = 'Div'im' fareyle üzerine gelindiğinde = 'metin al()' stil = 'kenarlık: 3 piksel düz siyah; genişlik: 400 piksel; dolgu: 5 piksel 5 piksel; kenar boşluğu: otomatik;' >< sa1 > İlk Başlık < / h1 >
< h2 > İkinci Başlık < / h2 >
< h3 > Üçüncü Başlık < / h3 >
< h4 > Dördüncü Başlık < / h4 >
< h5 > Beşinci Başlık < / h5 >
< h6 > Altıncı Başlık < / h6 >
< / div >
HTML kodunun yukarıdaki satırlarında:
- “ 'myDiv' kimliğine sahip ' etiketi, aşağıdaki border, width, padding(üst ve alt, sol ve sağ) ve kenar boşluğu özellikleriyle stillendirilmiş bir div öğesi oluşturur. Ayrıca şu ifadeyi de ekliyor: fareyle üzerine gelindiğinde ' olayını çağıran ' getText() Kullanıcı fareyi üzerine getirdiğinde ” işlevi.
- Div'in içinde, belirtilen başlık(h1,h2,h3,h4,h5 ve h6) etiketlerinin tümü, başlık öğelerini belirtilen düzeylerine göre ekler.
JavaScript Kodu
< senaryo >
getText işlevi ( ) {
elementti = belge. getElementById ( 'Div'im' ) ;
uyarı ( eleman. Metin içeriği ) ;
}
senaryo >Yukarıda yazılan JavaScript kod bloğunda:
- “adlı bir işlev tanımlayın getText() ”.
- Bu fonksiyonun içinde “elem” değişkeni “ getElementById() Div öğesine kimliği aracılığıyla erişme yöntemini kullanın.
- “ uyarı() ” yöntemi, “'yi kullanan bir uyarı kutusu oluşturur Metin içeriği ” özelliği, ana div'in metnini tüm bağımlılarıyla birlikte döndürmek için kullanılır.
Çıktı
Aşağıdaki çıktı, div öğesinin metin içeriğini gösteren bir uyarı kutusu açar:
Örnek 2: Alt Öğelerini de İçererek Bir Öğe Metin İçeriğini Değiştirmek için 'textContent' Özelliğini Uygulama
Bu örnek, 'textContent' özelliğinin, bir öğenin metnini değiştirirken tüm alt öğelerini nasıl değiştirdiğini gösterir.
HTML Kodu
< merkez >
< h1 kimliği = 'kafam' tıklamada = 'Metni değiştir()' >< B > Bu B > dır-dir < açıklık > Başlık < açıklık > < Ben > Öğe Ben > sa1 >
merkez >Yukarıda belirtilen kod satırlarında:
- “ ” etiketi, eklenmiş bir “ ile 1. düzey başlık öğesini ekler tıklamada ' olayını çağıran ' metni değiştir() Kullanıcı tıkladığında ” işlevi.
- Başlık öğesi aynı zamanda “ ', '
', Ve ' ” onun soyundan gelenler olarak etiketlenir. “ ” etiketi, ekteki dizeyi kalınlaştırmak için kullanılır, herhangi bir stil özelliği olmayan “” etiketi, verilen dizeye stil uygulamamak için kullanılır ve “ ” etiketi, verilen dizeyi görüntülemek için kullanılır. dizeyi italik olarak belirttik.
JavaScript Kodu
< senaryo >
nerede h1 = belge. getElementById ( 'kafam' ) ;
konsol. kayıt ( h1 ) ;
işlev değiştirmeText ( ) {
h1. Metin içeriği = 'Linuxhint'e hoş geldiniz!' ;
konsol. kayıt ( h1 )
}
senaryo >Yukarıdaki JavaScript kodunda:
- “h1” değişkeni “ document.getElementById() ” Başlık öğesine atanan kimliği aracılığıyla erişme yöntemi.
- “ console.log() ” yöntemi, erişilen başlık öğesinin içeriğini değiştirmeden önce konsolda görüntüler.
- “adlı fonksiyon metni değiştir() '' ifadesini kullanır Metin içeriği Getirilen başlık öğesinin metnini değiştirmek için ” özelliği.
- Son “console.log()” yöntemi, değişiklik sonrasında tekrar “h1” değerini görüntüler.
Çıktı
Konsol, verilen başlık öğesinin tüm alt öğelerinin, tıklandığında yeni belirtilen metinle değiştirildiğini açıkça göstermektedir:
Örnek 3: Elementin Çocuğunun Metnini Değiştirmek için “textContent” Özelliğini Uygulamak
Bu örnek, belirli bir öğenin alt öğesinin metnini değiştirmek için 'textContent' özelliğini kullanır.
HTML Kodu
< div İD = 'Div'im' stil = 'kenarlık: 3 piksel düz siyah; genişlik: 400 piksel; dolgu: 5 piksel 5 piksel; kenar boşluğu: otomatik;' >
< merkez >
< düğme İD = 'btn' fareyle üzerine gelindiğinde = 'Metin değiştir()' > Eski Düğme < / düğme >
< / merkez >
< / div >Bu senaryoda:
- “Div” elemanı, “ yardımıyla oluşturulan bir “düğme” elemanına sahiptir.
' etiket. - Düğme öğesi ayrıca atanmış bir kimlik ve bir ' fareyle üzerine gelindiğinde ' diye çağıran olay Metni değiştir() Fare üzerine gelindiğinde ” işlevi.
JavaScript Kodu
< senaryo >
ebeveynElement idi = belge. getElementById ( 'Div'im' ) ;
değişken hedef = belge. getElementById ( 'btn' ) ;
beni bul = ebeveynElement. içerir ( hedef ) ;
eğer ( ebeveynElement. içerir ( hedef ) == doğru ) {
konsol. kayıt ( beni Bul ) ;
fonksiyon değişikliğiMetin ( ) {
hedef. Metin içeriği = 'Yeni Düğme' ;
}
} başka {
konsol. kayıt ( 'Bulunmuyor' )
}
senaryo >Yukarıdaki kod parçacığında:
- “parentElement” değişkeni “ getElementById() ” ana div öğesine erişme yöntemini kullanın. 'Target' değişkeni ayrıca eklenen düğme öğesini kimliğini kullanarak getirmek için 'getElementById()' yöntemini kullanır.
- “Find_me” değişkeni “ içerir() ” Hedeflenen düğme öğesinin div'in çocuğu olup olmadığını kontrol etme yöntemi. Bu yöntem şunu döndürecektir: doğru “evet” için ”, aksi takdirde “yanlış”.
- “ if-else ” ifadesi bir kod bloğunu tanımlar.
- Hedeflenen öğe ana öğenin çocuğu ise, o zaman ' Metni değiştir() ” işlevi metnini “ ile değiştirecektir. Metin içeriği ' mülk. Aksi takdirde, “else” kod bloğu belirtilen mesajı “” kullanarak görüntüleyecek şekilde yürütülecektir. console.log() ' yöntem.
Çıktı
Konsolda bir “ doğru ” düğme öğesinin verilen div'in çocuğu olduğunu doğrulayan boolean değeri ve ardından fare bunun üzerine getirildiğinde metni değişir:
textContent, innerText ve innerHTML Özellikleri Arasındaki Fark?
Genel olarak “ Metin içeriği ', ' iç metin ', Ve ' içHTML 'özellikler, bir öğenin veya düğümün metninin onu ayarlama ve alma biçimiyle ilgilidir. Ancak bu özellikler bazı faktörlere bağlı olarak birbirinden farklıdır. Bu bölümde hepsi arasındaki temel farklar vurgulanmaktadır:
Şartlar 'Metin içeriği' 'iç Metin' “içHTML” İade Türü Bir öğenin tüm alt öğelerini (biçimlendirme etiketleri), CSS gizli metnini ve alanını içeren metnini döndürür. Bir öğenin HTML etiketlerini döndürmez. Hedeflenen HTML öğesinin metin içeriğini tüm alt öğeleriyle (biçimlendirme etiketleri) birlikte döndürür.