מדריך זה ימחיש כיצד לגשת ולתפעל את מאפיין ה-HTML DOM 'textContent' ב-JavaScript.
ראשית, תסתכל על היסודות של מאפיין HTML DOM 'textContent'.
מהו מאפיין HTML DOM 'textContent' ב-JavaScript?
ה ' textContent ” הוא המאפיין המובנה שמגדיר, מאחזר ומשנה את הטקסט של אלמנט או צומת שצוינו כולל כל הצאצאים שלו. הצאצאים הם אלמנטים צאצאים כגון , , ועוד הרבה יותר המשמשים למטרות עיצוב. בזמן הגדרת הטקסט באמצעות המאפיין 'textContent', הצאצאים של האלמנט הממוקד מוחלפים לחלוטין בטקסט החדש.
תחביר (הגדר תוכן טקסט)
התחביר הבסיסי להגדרת הטקסט של אלמנט/צומת באמצעות ' textContent ' הנכס כתוב להלן:
אֵלֵמֶנט. textContent = טֶקסט | צוֹמֶת. textContent = טֶקסט
התחביר לעיל לוקח את ה- ' טֶקסט ' כערך שהמשתמש רוצה להגדיר עבור אלמנט או צומת.
תחביר (קבל תוכן טקסט)
התחביר המוכלל להחזרת הטקסט של אלמנט או צומת באמצעות ' textContent ' הנכס מצוין כאן:
אֵלֵמֶנט. textContent | צוֹמֶת. textContentערך החזרה: ה ' textContent נכס מחזיר את ה- טֶקסט ' של אלמנט או צומת עם מרווח אך ללא תגי ה-HTML הפנימיים שלו.
כעת השתמש בתחבירים שהוגדרו לעיל באופן מעשי כדי לגשת ולתפעל את המאפיין 'textContent'.
כיצד לגשת ולתפעל את מאפיין ה-HTML DOM 'textContent' ב-JavaScript?
בדומה למאפיינים 'innerHTML' ו-'innerText', ' textContent 'מאפיין גם מאפשר למשתמשים להגדיר, לגשת ולשנות את הטקסט של האלמנט הרצוי בקלות. סעיף זה מבצע את כל הפעולות הללו על אלמנט באמצעות הדוגמאות המפורטות להלן.
דוגמה 1: החלת המאפיין 'textContent' כדי לגשת לטקסט האלמנט/צומת
דוגמה זו מיישמת את המאפיין 'textContent' כדי להחזיר את הטקסט של אלמנט או צומת מסוימים, כולל כל הילדים שלו.
קוד HTML
< div תְעוּדַת זֶהוּת = 'myDiv' מעבר עכבר = 'getText()' סִגְנוֹן = 'גבול: 3px שחור מלא; רוחב: 400px; ריפוד: 5px 5px; שוליים: אוטומטי;' >< h1 > כותרת ראשונה < / h1 >
< h2 > כותרת שניה < / h2 >
< h3 > כותרת שלישית < / h3 >
< h4 > כותרת רביעית < / h4 >
< h5 > כותרת חמישית < / h5 >
< h6 > כותרת שישית < / h6 >
< / div >
בשורות למעלה של קוד HTML:
- ה ' ' תג בעל מזהה 'myDiv' יוצר רכיב div המעוצב עם המאפיינים הבאים גבול, רוחב, ריפוד (למעלה ולמטה, שמאל וימין) ושוליים. זה גם מצרף את ' מעבר עכבר ' אירוע המעורר את ' getText() ' פונקציה כאשר המשתמש מרחף מעליו את העכבר.
- בתוך ה-div, כל תגי הכותרת שצוינו (h1,h2,h3,h4,h5 ו-h6) מכניסים את רכיבי הכותרת לפי הרמות שצוינו.
קוד JavaScript
< תַסרִיט >
פונקציה getText ( ) {
היה עלם = מסמך. getElementById ( 'myDiv' ) ;
עֵרָנִי ( אֵלֵמֶנט. textContent ) ;
}
תַסרִיט >בגוש קוד JavaScript שנכתב לעיל:
- הגדר פונקציה בשם ' getText() '.
- בתוך פונקציה זו, המשתנה 'elem' מחיל את ' getElementById() ' שיטה לגשת לרכיב div דרך המזהה שלו.
- ה ' עֵרָנִי() השיטה יוצרת תיבת התראה המשתמשת ב-' textContent ” מאפיין להחזיר את הטקסט של div האב יחד עם כל התלויים בו.
תְפוּקָה
הפלט למטה מקפיץ תיבת התראה המציגה את תוכן הטקסט של רכיב ה-div:
דוגמה 2: החלת המאפיין 'textContent' כדי להחליף תוכן טקסט של אלמנט כולל צאצאיו
דוגמה זו מראה כיצד המאפיין 'textContent' מחליף את כל הילדים של אלמנט תוך שינוי הטקסט שלו.
קוד HTML
< מֶרְכָּז >
< h1 מזהה = 'הראש שלי' בלחיצה = 'modifyText()' >< ב > זֶה ב > הוא < לְהַקִיף > כּוֹתֶרֶת < לְהַקִיף > < אני > אֵלֵמֶנט אני > h1 >
מֶרְכָּז >בשורות הקוד האמורות לעיל:
- ה ' ' תג מוסיף רכיב כותרת ברמה 1 עם ' מצורף ' בלחיצה ' אירוע המעורר את ' modifyText() ' פונקציה כאשר המשתמש לוחץ עליה.
- רכיב הכותרת מכיל גם את ' ',' ', ו' ' מתייג כצאצאיו. התג ' ' משמש להדגשה של המחרוזת המצורפת, התג '' ללא כל מאפיין סגנון משמש כדי לא להחיל שום סגנון על המחרוזת הנתונה, והתג ' ' משמש להצגת המחרוזת שצוינה כתווית.
קוד JavaScript
< תַסרִיט >
איפה h1 = מסמך. getElementById ( 'הראש שלי' ) ;
לְנַחֵם. עֵץ ( h1 ) ;
פונקציה modifyText ( ) {
h1. textContent = 'ברוכים הבאים ל-Linuxhint!' ;
לְנַחֵם. עֵץ ( h1 )
}
תַסרִיט >בקוד JavaScript לעיל:
- המשתנה 'h1' משתמש ב-' document.getElementById() שיטה לגשת לרכיב הכותרת דרך המזהה שהוקצה לו.
- ה ' console.log() ' השיטה מציגה את רכיב הכותרת הנגיש במסוף לפני שינוי התוכן שלו.
- הפונקציה בשם ' modifyText() 'משתמש ב' textContent ' מאפיין כדי לשנות את הטקסט של רכיב הכותרת שאוחזר.
- השיטה האחרונה 'console.log()' מציגה שוב את הערך 'h1' לאחר השינוי.
תְפוּקָה
המסוף מראה בבירור שכל הילדים של רכיב הכותרת הנתון הוחלפו בטקסט החדש שצוין בלחיצה עליו:
דוגמה 3: החלת המאפיין 'textContent' כדי לשנות את הטקסט של הילד של האלמנט
דוגמה זו משתמשת במאפיין 'textContent' כדי לשנות את הטקסט של הילד הספציפי של האלמנט.
קוד HTML
< div תְעוּדַת זֶהוּת = 'myDiv' סִגְנוֹן = 'גבול: 3px שחור מלא; רוחב: 400px; ריפוד: 5px 5px; שוליים: אוטומטי;' >
< מֶרְכָּז >
< לַחְצָן תְעוּדַת זֶהוּת = 'btn' מעבר עכבר = 'changeText()' > כפתור ישן < / לַחְצָן >
< / מֶרְכָּז >
< / div >בתרחיש הזה:
- לאלמנט 'div' יש אלמנט 'כפתור' שנוצר בעזרת ה-'
'תג. - רכיב הכפתור מכיל בנוסף מזהה שהוקצה ו' מעבר עכבר אירוע שקורא ל- changeText() ' פונקציה כאשר העכבר מרחף מעליו.
קוד JavaScript
< תַסרִיט >
היה parentElement = מסמך. getElementById ( 'myDiv' ) ;
היעד של var = מסמך. getElementById ( 'btn' ) ;
היה מצא_מי = parentElement. מכיל ( יַעַד ) ;
אם ( parentElement. מכיל ( יַעַד ) == נָכוֹן ) {
לְנַחֵם. עֵץ ( מצא אותי ) ;
פונקציה changeText ( ) {
יַעַד. textContent = 'כפתור חדש' ;
}
} אַחֵר {
לְנַחֵם. עֵץ ( 'לא קיים' )
}
תַסרִיט >בקטע הקוד שלמעלה:
- המשתנה 'parentElement' מחיל את ' getElementById() ' שיטה לגישה לרכיב div האב. המשתנה 'target' משתמש גם בשיטת 'getElementById()' כדי להביא את רכיב הכפתור שנוסף באמצעות המזהה שלו.
- המשתנה 'find_me' משתמש ב-' מכיל() ” שיטה כדי לבדוק אם אלמנט הכפתור הממוקד הוא הילד של ה-div או לא. שיטה זו תחזיר ' נָכוֹן ' עבור 'כן' אחרת 'שקר'.
- ה ' אחרת המשפט מגדיר בלוק קוד.
- אם הרכיב הממוקד הוא הילד של אלמנט האב, אזי ה-' changeText() הפונקציה ' תשנה את הטקסט שלה באמצעות ' textContent ' תכונה. אחרת, בלוק הקוד 'אחר' יבוצע כדי להציג את ההודעה שצוינה באמצעות ' console.log() ' שיטה.
תְפוּקָה
הקונסולה מציגה ' נָכוֹן ” ערך בוליאני המאמת את רכיב הכפתור הוא הילד של ה-div הנתון ואז הטקסט שלו משתנה עם ריחוף העכבר מעליו:
ההבדל בין מאפייני textContent, innerText ו-innerHTML?
בדרך כלל, ה' textContent ',' innerText ', ו' innerHTML ” מאפיינים עוסקים בטקסט של אלמנט או צומת בדרך של הגדרה וקבלתו. עם זאת, מאפיינים אלה שונים זה מזה בהתבסס על כמה גורמים. סעיף זה מדגיש את ההבדלים העיקריים בין כולם:
תנאים 'טקסטתוכן' 'טקסט פנימי' 'innerHTML' סוג החזרה זה מחזיר את הטקסט של אלמנט כולל כל הילדים שלו (תגי עיצוב), טקסט מוסתר CSS ורווח. זה לא מחזיר את תגיות ה-HTML של אלמנט. הוא מחזיר את תוכן הטקסט של רכיב ה-HTML הממוקד עם כל הילדים שלו (תגי עיצוב). הוא אינו מחזיר שטח, טקסט מוסתר CSS ותגי HTML מלבד