محتوى HTML DOM تحرير HTML
من خلال DOM HTML، يمكن أن جافا سكريبت الوصول إلى وثيقة 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 "شيئا ما يحدث"، ومتصفح توليد حدث:
- انقر على عنصر
- تحميل الصفحة
- تغيير حقل الإدخال
يمكنك معرفة المزيد عن هذا الحدث في الفصل التالي.
وفيما يلي مثالين لتغيير لون الخلفية <BODY> يتم النقر عنصر في الزر:
أمثلة
<html>
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
محاولة »
في هذه الحالة، فإن وظيفة ينفذ نفس الرمز:
أمثلة
<html>
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
محاولة »
يغير المثال التالي يتم النقر على عنصر النص <ع> في الزر:
أمثلة
<html>
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>
<input type="button" onclick="ChangeText()" value="Change text">
</body>
</html>
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>
<input type="button" onclick="ChangeText()" value="Change text">
</body>
</html>
محاولة »