في هذا الدرس 4تصفّح المواضيع
يمكن التعديل علي محتوي أي عنصر عن طريق ثلاث خصائص وهم:
- innerText وهي خاصية تمكنك من قراءة وتعديل المحتوي النصي لأي عنصر داخل ملف HTML عن طريق لغة جافا سكريبت.
- innerHTML وهي خاصية تمكنك من قراءة وتعديل محتوي HTML [أي يشمل علامات HTML ]لأي عنصر داخل ملف HTML عن طريق لغة جافا سكريبت.
- textContent وهي خاصية تمكنك من قراءة وتعديل المحتوي النصي لأي عنصر داخل ملف HTML عن طريق لغة جافا سكريبت وتشمل جميع العناصر المتفرعه من هذا العنصر حتي وأن كانت غير مرئية علي المتصفح.
هناك عدة فروق بين خاصية innerText و خاصية innerHTML سوف نسردها لكم في الجدول التالي.
| innerText | innerHTML |
| تقوم بقراءة وتعديل النصوص فقط لأي عنصر | تقوم بقراءة وتعديل محتوي [HTML] لأي عنصر |
| لا تستطيع أن تضيف عناصر [HTML] بواسطتها | تستطيع أن تضيف عناصر [HTML] بواسطتها |
| تتجاهل المسافات والسطور الأضافية | يمكنك أن تضيف مسافات وسطور أضافية |
| تقوم بأرجاع المحتوي وعدم قراءة وتنفذ أوامر HTML | تقوم بأرجاع المحتوي وتقراء وتنفذ أوامر HTML |
قراءة محتوي عنصر عن طريق خاصية innerText
قراءة محتوي عنصر عن طريق خاصية innerText وطباعتهة ويمكنك ايضاً التحقق بالعبارات الشرطيه علي المحتوي الموجود وتتجاهل هذة الخاصية علامة HTML الموجوده بداخل المحتوي.
let apple = document.getElementById('apple');
document.write("<b>Content " +apple.innerText+ "</b>");
قراءة محتوي HTML عنصر عن طريق خاصية innerText
لا يمكن قراءة محتوي HTML لعنصر عن طريق خاصية innerText سوف يقرأ النصوص فقط.
let apple = document.getElementById('apple');
document.write("<b>Content " +apple.innerText + "</b>");
قراءة محتوي عنصر عن طريق خاصية innerHTML
قراءة محتوي عنصر عن طريق خاصية innerHTML وطباعتة ويمكنك ايضاً التحقق بالعبارات الشرطيه علي المحتوي الموجود.
let apple = document.getElementById('apple');
document.write("<b>Content " +apple.innerHTML+ "</b>");
مقارنة بين خاصية innerText و textContent
سوف تقراء خاصية textContent جميع العناصر الداخلية شامله العناصر التي لا تعرض علي المتصفح.
let apple = document.getElementById('apple');
document.write(apple.innerText);
document.write(apple.textContent);
يمكنك التحكم في المحتوي النصي لعنصر عن طريق استخدام خاصية innerText وهي تغيير النص لأي عنصر واستبداله بنص اخر.
خاصية innerText
عن طريق هذة الخاصية يمكنك التعديل علي أي نص بداخل أي عنصر في صفحة HTML بلغة جافا سكريبت.
let apple = document.getElementById('apple');
apple.innerText = "This text updated by JavaScript";
الاحتفاظ بالمحتوي السابق
الاحتفاظ بالمحتوي السابق واضافة المحتوي الجديد بعدة عن طريق خاصية innerText.
let firstElement = document.getElementById("myheading");
firstElement.innerText += " Closetag.com!";
الاحتفاظ بالمحتوي السابق
الاحتفاظ بالمحتوي السابق واضافة المحتوي الجديد قبلة عن طريق خاصية innerText.
let firstElement = document.getElementById("myheading");
firstElement.innerText = "Closetag.com! " + firstElement.innerText ;
يمكنك التحكم في محتوي HTML العنصر عن طريق استخدام خاصية innerHTML وهي تغيير محتوي HTML لأي عنصر واستبداله بنصوص أو محتوي HTML اخر.
خاصية innerHTML
عن طريق هذة الخاصية يمكنك التعديل علي أي محتوي HTML بداخل أي عنصر في صفحة HTML بلغة جافا سكريبت.
let firstElement = document.getElementById("myheading");
firstElement.innerHTML = "<i>Welcome to Closetag.com!</i>";
الاحتفاظ بالمحتوي السابق
الاحتفاظ بالمحتوي السابق واضافة المحتوي الجديد بعدة عن طريق خاصية innerHTML.
let firstElement = document.getElementById("myheading");
firstElement.innerHTML += "<i>Closetag.com!</i>";
الاحتفاظ بالمحتوي السابق
الاحتفاظ بالمحتوي السابق واضافة المحتوي الجديد قبلة عن طريق خاصية innerHTML.
let firstElement = document.getElementById("myheading");
firstElement.innerHTML = "<i>Closetag.com! </i> " + firstElement.innerHTML;
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.