سيوضح هذا الدليل كيفية الوصول إلى خاصية 'textContent' لعنصر HTML DOM ومعالجتها في JavaScript.
أولاً، قم بإلقاء نظرة على أساسيات خاصية 'textContent' الخاصة بـ HTML DOM.
ما هي خاصية HTML DOM 'textContent' في JavaScript؟
ال ' محتوى النص 'هي الخاصية المضمنة التي تقوم بتعيين واسترداد وتعديل نص عنصر أو عقدة محددة بما في ذلك جميع أحفادها. العناصر التابعة هي عناصر فرعية مثل و و وغير ذلك الكثير والتي يتم استخدامها لأغراض التنسيق. أثناء ضبط النص باستخدام خاصية 'textContent'، يتم استبدال أحفاد العنصر المستهدف بالكامل بالنص الجديد.
بناء الجملة (تعيين محتوى النص)
بناء الجملة الأساسي لتعيين نص عنصر/عقدة باستخدام ' محتوى النص 'الملكية مكتوبة أدناه:
عنصر. محتوى النص = نص | العقدة. محتوى النص = نص
بناء الجملة أعلاه يأخذ المطلوب ' نص ' كقيمة يريد المستخدم تعيينها لعنصر أو عقدة.
بناء الجملة (الحصول على محتوى النص)
بناء الجملة المعمم لإرجاع نص عنصر أو عقدة عبر ' محتوى النص 'الملكية مذكورة هنا:
عنصر. محتوى النص | العقدة. محتوى النصقيمة الإرجاع: ال ' محتوى النص 'الخاصية ترجع' نص ' لعنصر أو عقدة مع تباعد ولكن بدون علامات HTML الداخلية الخاصة بها.
استخدم الآن تركيبات الجملة المحددة أعلاه عمليًا للوصول إلى خاصية 'textContent' ومعالجتها.
كيفية الوصول إلى خاصية 'textContent' لعنصر HTML DOM ومعالجتها في JavaScript؟
على غرار خصائص 'innerHTML' و'innerText'، فإن ' محتوى النص تتيح الخاصية أيضًا للمستخدمين تعيين نص العنصر المطلوب والوصول إليه وتعديله بسهولة. يقوم هذا القسم بتنفيذ كافة هذه العمليات على عنصر باستخدام الأمثلة المذكورة أدناه.
المثال 1: تطبيق خاصية 'textContent' للوصول إلى نص العنصر/العقدة
يطبق هذا المثال خاصية 'textContent' لإرجاع نص عنصر أو عقدة معينة بما في ذلك جميع أبنائها.
كود HTML
< شعبة بطاقة تعريف = 'myDiv' على الفأرة فوق = 'الحصول على النص()' أسلوب = 'الحدود: 3 بكسل أسود خالص؛ العرض: 400 بكسل؛ الحشو: 5 بكسل 5 بكسل؛ الهامش: تلقائي؛' >< h1 > العنوان الأول < / h1 >
< h2 > العنوان الثاني < / h2 >
< h3 > العنوان الثالث < / h3 >
< h4 > العنوان الرابع < / h4 >
< h5 > العنوان الخامس < / h5 >
< h6 > العنوان السادس < / h6 >
< / شعبة >
في الأسطر أعلاه من كود HTML:
- ال ' <ديف> تقوم العلامة التي تحتوي على المعرف 'myDiv' بإنشاء عنصر div تم تصميمه باستخدام حدود الخصائص التالية، والعرض، والحشوة (أعلى وأسفل، ويسار ويمين)، والهامش. كما يرفق ' على الفأرة فوق 'الحدث الذي يستدعي ' الحصول على النص() 'وظيفة عندما يقوم المستخدم بتمرير الماوس فوقها.
- داخل div، تقوم جميع علامات العناوين المحددة (h1، h2، h3، h4، h5، و h6) بإدراج عناصر العنوان وفقًا لمستوياتها المحددة.
كود جافا سكريبت
< النصي >وظيفة الحصول على النص ( ) {
كان عنصرا = وثيقة. getElementById ( 'myDiv' ) ;
يُحذًِر ( عنصر. محتوى النص ) ;
}
النصي >
في كتلة كود جافا سكريبت المكتوبة أعلاه:
- تحديد وظيفة باسم ' الحصول على النص() '.
- داخل هذه الوظيفة، يطبق المتغير 'elem' getElementById() 'طريقة للوصول إلى عنصر div من خلال معرفه.
- ال ' يُحذًِر() ' تقوم الطريقة بإنشاء مربع تنبيه يستخدم ' محتوى النص 'خاصية إرجاع نص القسم الأصلي مع جميع التابعين له.
انتاج |
ينبثق الإخراج أدناه مربع تنبيه يعرض محتوى النص لعنصر div:
مثال 2: تطبيق خاصية 'textContent' لاستبدال عنصر المحتوى النصي بما في ذلك العناصر التابعة له
يوضح هذا المثال كيف تقوم الخاصية 'textContent' باستبدال جميع العناصر الفرعية للعنصر أثناء تعديل النص الخاص به.
كود HTML
< مركز >< معرف h1 = 'رأسي' عند النقر = 'تعديل النص ()' >< ب > هذا ب > يكون < فترة > عنوان < فترة > < أنا > عنصر أنا >< h1 >
مركز >
في سطور التعليمات البرمجية المذكورة أعلاه:
- ال ' <ح1> تضيف العلامة '' عنصر عنوان من المستوى 1 مع ملحق '' عند النقر 'الحدث الذي يستدعي ' تعديل النص () '' عندما ينقر المستخدم عليها.
- يحتوي عنصر العنوان أيضًا على ' <ب> '،' <سبان> '، و ' <ط> علامات باعتبارها أحفادها. يتم استخدام العلامة ' ' لجعل السلسلة المضمنة عريضة، ويتم استخدام العلامة '' بدون أي خاصية تصميم لعدم تطبيق أي تصميم على السلسلة المحددة، ويتم استخدام العلامة ' ' لعرض السلسلة المحددة بالخط المائل.
كود جافا سكريبت
< النصي >حيث ح1 = وثيقة. getElementById ( 'رأسي' ) ;
وحدة التحكم. سجل ( h1 ) ;
وظيفة تعديل النص ( ) {
h1. محتوى النص = 'مرحبًا بكم في لينكسهنت!' ;
وحدة التحكم. سجل ( h1 )
}
النصي >
في كود جافا سكريبت أعلاه:
- يستخدم المتغير 'h1' ' document.getElementById() 'طريقة للوصول إلى عنصر العنوان من خلال المعرف المخصص له.
- ال ' console.log() تعرض الطريقة عنصر العنوان الذي تم الوصول إليه على وحدة التحكم قبل تغيير محتواه.
- الوظيفة المسماة ' تعديل النص () 'يستخدم' محتوى النص خاصية 'لتعديل نص عنصر العنوان الذي تم جلبه.
- تعرض طريقة 'console.log()' الأخيرة القيمة 'h1' مرة أخرى بعد التعديل.
انتاج |
توضح وحدة التحكم بوضوح أنه تم استبدال جميع العناصر الفرعية لعنصر العنوان المحدد بالنص المحدد حديثًا عند النقر عليه:
مثال 3: تطبيق خاصية 'textContent' لتعديل النص التابع للعنصر
يستخدم هذا المثال خاصية 'textContent' لتعديل نص العنصر الفرعي الخاص بالعنصر المحدد.
كود HTML
< شعبة بطاقة تعريف = 'myDiv' أسلوب = 'الحدود: 3 بكسل أسود خالص؛ العرض: 400 بكسل؛ الحشو: 5 بكسل 5 بكسل؛ الهامش: تلقائي؛' >< مركز >
< زر بطاقة تعريف = 'بي تي ان' على الفأرة فوق = 'تغيير النص ()' > الزر القديم < / زر >
< / مركز >
< / شعبة >
في هذا السيناريو:
- يحتوي العنصر 'div' على عنصر 'زر' يتم إنشاؤه بمساعدة الزر '
' بطاقة شعار. - يحتوي عنصر الزر أيضًا على معرف معين و' على الفأرة فوق 'الحدث الذي يستدعي' تغيير النص () '' عند تحريك الماوس فوقها.
كود جافا سكريبت
< النصي >كان العنصر الأصلي = وثيقة. getElementById ( 'myDiv' ) ;
فار الهدف = وثيقة. getElementById ( 'بي تي ان' ) ;
كان find_me = ParentElement. يتضمن ( هدف ) ;
لو ( ParentElement. يتضمن ( هدف ) == حقيقي ) {
وحدة التحكم. سجل ( قم بإيجادي ) ;
نص تغيير الوظيفة ( ) {
هدف. محتوى النص = 'زر جديد' ;
}
} آخر {
وحدة التحكم. سجل ( 'غير موجود' )
}
النصي >
في مقتطف الكود أعلاه:
- يطبق المتغير 'parentElement' ' getElementById() 'طريقة للوصول إلى عنصر div الأصلي. يستخدم المتغير 'الهدف' أيضًا طريقة 'getElementById()' لجلب عنصر الزر المضاف باستخدام المعرف الخاص به.
- يستخدم المتغير 'find_me' الخيار ' يتضمن() 'طريقة للتحقق مما إذا كان عنصر الزر المستهدف هو فرع لـ div أم لا. ستعود هذه الطريقة ' حقيقي 'ل' نعم 'وإلا ل' خطأ '.
- ال ' إذا كان غير ذلك 'يحدد البيان كتلة التعليمات البرمجية.
- إذا كان العنصر المستهدف تابعًا للعنصر الأصلي، فإن ' تغيير النص () 'ستعمل الوظيفة على تغيير نصها عبر' محتوى النص ' ملكية. وإلا فسيتم تنفيذ مقطع التعليمات البرمجية 'آخر' لعرض الرسالة المحددة باستخدام ' console.log() ' طريقة.
انتاج |
تظهر وحدة التحكم ' حقيقي 'قيمة منطقية تتحقق من أن عنصر الزر هو العنصر الفرعي لعنصر div المحدد ثم يتغير نصه عند تحريك الماوس فوقه:
الفرق بين محتوى النص ونص داخلي وخصائص HTML الداخلية؟
بشكل عام، ' محتوى النص '،' InnerText '، و ' InnerHTML تتعامل الخصائص مع نص العنصر أو العقدة بطريقة الإعداد والحصول عليه. ومع ذلك، تختلف هذه الخصائص عن بعضها البعض بناءً على بعض العوامل. يسلط هذا القسم الضوء على الاختلافات الرئيسية بين كل منهم:
| شروط | 'محتوى النص' | 'النص الداخلي' | 'HTML الداخلي' |
| نوع الإرجاع | تقوم بإرجاع نص عنصر بما في ذلك كافة أبنائه (علامات التنسيق)، والنص المخفي في CSS، والمسافة. ولا يُرجع علامات HTML الخاصة بالعنصر. | تقوم بإرجاع محتوى النص لعنصر HTML المستهدف مع جميع أبنائه (علامات التنسيق). ولا يُرجع مسافة ونص CSS المخفي وعلامات HTML باستثناء |