عناصر DOM جافا سكريبت HTML
إنشاء عنصر HTML جديد
إنشاء عنصر HTML جديد
لإضافة عنصر جديد إلى DOM HTML، يجب أولا إنشاء عنصر (عقدة عنصر)، ومن ثم إلحاق العنصر إلى عنصر موجود.أمثلة
<P معرف = "P1"> هذا هو الفقرة. </ P>
<P معرف = "P2"> هذه هي فقرة أخرى. </ P>
</ div>
<script>
فار الفقرة = document.createElement ( "ع")؛
عقدة فار = document.createTextNode ( "هذا هو فقرة جديدة.")؛
para.appendChild (عقدة)؛
عنصر فار = document.getElementById ( "div1")؛
element.appendChild (الفقرة)؛
</ script>
محاولة »
أمثلة من التحليل:
هذا الرمز يخلق عنصر جديد <ص>:
لإضافة نص إلى عنصر <ص>، يجب عليك أولا إنشاء عقدة النص. هذا الرمز يخلق عقدة النص:
ثم يجب إضافة هذه العقدة النص إلى عنصر <ص>:
وأخيرا، يجب إضافة هذا العنصر الجديد إلى عنصر موجود.
رمز للعثور على عنصر موجود:
التعليمة البرمجية التالية بعد عناصر القائمة إضافة عنصر جديد:
إزالة عناصر HTML القائمة
يوضح التعليمة البرمجية التالية كيفية حذف العناصر:
أمثلة
<P معرف = "P1"> هذا هو الفقرة. </ P>
<P معرف = "P2"> هذه هي فقرة أخرى. </ P>
</ div>
<script>
فار الأم = document.getElementById ( "div1")؛
طفل فار = document.getElementById ( "P1")؛
parent.removeChild (الطفل)؛
</ script>
محاولة »
أمثلة تحليلية
وثيقة HTML تحتوي على العقد التابعة لها اثنين (اثنين <p> وعنصر) من العنصر <div>:
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
البحث عن معرف = عناصر "div1":
البحث عن معرف = "P1" و<ص> العنصر:
إزالة من العنصر الأصلي عناصر فرعية هي:
 | إذا يمكنك إزالة عنصر من دون إشارة إلى العنصر الأصلي، سيكون أمرا رائعا. ولكن للأسف. عناصر DOM التي تحتاج إلى معرفة المراد حذفه، وكذلك عنصر الأم. |
|---|
هذا هو الحل السليم: العثور على العنصر التابع الذي تريد حذفه، ثم استخدام خصائصه لتجد parentNode العنصر الأصلي:
child.parentNode.removeChild(child);
HTML DOM تعليمي
في الجزء HTML DOM لدينا البرنامج التعليمي جافا سكريبت، كنت قد تعلمت:
- كيفية تغيير محتوى عنصر HTML (HTML داخلي)
- كيفية تغيير نمط عناصر HTML (CSS)
- كيفية التعامل مع الأحداث على DOM HTML
- كيف يمكنني إضافة أو إزالة عناصر HTML
إذا كنت ترغب في معرفة المزيد حول استخدام جافا سكريبت للوصول إلى المعرفة HTML DOM، يرجى زيارة موقعنا على كامل البرنامج التعليمي HTML DOM .