HTML DOM تعديل
تعديل HTML = عناصر التغيير، والصفات، والأساليب والأحداث.
عناصر تحرير HTML
تعديل HTML DOM يعني العديد من الجوانب المختلفة:
- تغيير محتوى HTML
- تغيير الأنماط CSS
- تغيير سمات HTML
- إنشاء عنصر HTML جديد
- إزالة عناصر HTML القائمة
- حدث تغيير (معالج)
في المقاطع التالية، وسوف ندرس في عمق DOM HTML لتعديل الطريقة التقليدية.
إنشاء محتوى HTML
أسهل طريقة لتغيير محتوى العنصر هو استخدام الخاصية innerHTML.
يغير المثال التالي محتويات HTML العنصر <ص>:
أمثلة
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
محاولة »
 | سوف نشرح لك تفاصيل سبيل المثال في الأقسام التالية. |
|---|
أساليب التغيير HTML
من خلال DOM HTML، يمكنك الوصول إلى نمط الكائن عناصر HTML.
المثال التالي لتغيير نمط فقرة HTML:
أمثلة
<html>
<body>
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
محاولة »
إنشاء عنصر HTML جديد
لإضافة عنصر جديد إلى DOM HTML، يجب أولا إنشاء عنصر (عقدة عنصر)، ومن ثم إلحاقها إلى عناصر القائمة.
أمثلة
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
محاولة »