جافا سكريبت HTML DOM يتغير محتوى HTML
HTML DOM يسمح جافا سكريبت لتغيير محتوى عنصر HTML.
تغيير دفق إخراج HTML
جافا سكريبت يمكن إنشاء محتوى HTML حيوي:
تاريخ اليوم هو:
في جافا سكريبت، دوكمنت () يمكن استخدامها لكتابة مباشرة محتوى HTML إلى دفق إخراج.
أمثلة
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
محاولة »
 | أبدا استخدام دوكمنت بعد الانتهاء من وثيقة تحميل (). هذا يتجاوز الوثيقة. |
|---|
تغيير محتوى HTML
باستخدام الخاصية innerHTML أسهل طريقة لتعديل محتوى HTML.
لتغيير محتوى عنصر HTML، استخدم بناء الجملة التالي:
document.getElementById(id).innerHTML=新的 HTML
يتغير هذا المثال محتويات العنصر <ص>:
أمثلة
<HTML>
<body>
<P معرف = "P1"> مرحبا العالم! </ P>
<script>
document.getElementById ( "P1") HTML داخلي = "النص الجديد!".
</ script>
</ الجسم>
</ HTML>
<body>
<P معرف = "P1"> مرحبا العالم! </ P>
<script>
document.getElementById ( "P1") HTML داخلي = "النص الجديد!".
</ script>
</ الجسم>
</ HTML>
محاولة »
يتغير هذا المثال محتويات <H1> العنصر:
أمثلة
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
محاولة »
أمثلة لشرح:
- وثيقة HTML أعلاه يحتوي على معرف = "رأس" من <h1> تحليل عنصر
- نحن نستخدم DOM HTML للحصول على معرف = "رأس" عنصر
- جافا سكريبت التغييرات على هذه محتويات عنصر (HTML داخلي)
تغيير سمات HTML
لتغيير خصائص عنصر HTML، استخدم بناء الجملة التالي:
document.getElementById(id).attribute=新属性值
يتغير هذا المثال عنصر سمة src <IMG>:
أمثلة
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
محاولة »
أمثلة لشرح:
- وثيقة HTML أعلاه يحتوي على معرف = "صورة" من عنصر <IMG>
- نحن نستخدم DOM HTML للحصول على معرف = "صورة" عنصر
- جافا سكريبت تغيير خصائص هذا العنصر (و"smiley.gif" إلى "landscape.jpg")