دليل أساسي لـ JavaScript

أجسام JavaScript

وظائف JavaScript

JS HTML DOM

BOM متصفح JS

دليل أساسي لـ AJAX

دليل مرجعي لـ JavaScript

تغيير CSS باستخدام JS DOM محددات JS HTML DOM

تغيير محتوى HTML باستخدام JS DOM

يسمح HTML DOM لـ JavaScript بالحصول على تغيير محتوى عناصر HTML.

تغيير محتوى HTML

أبسط طريقة لتغيير محتوى عنصر HTML هي استخدامinnerHTMLالميزة.

لتحديد محتوى عنصر HTML، استخدم النحو التالي:

element.innerHTML　=　text

المثال التالي يستخدمid="para" تغيير<p>محتوى العنصر:

مثال

<!DOCTYPE html>
<html>
<p id="para"></p>
<script>
document.getElementById("para").innerHTML　=　"مرحبا بالعالم";
</script>
</html>

اختبار لرؤية‹/›

في المثال التاليالحصول علىid="para"مع<p>محتوى العنصر:

مثال

<!DOCTYPE html>
<html>
<p id="para">هذا فقرة.</p>
<p id="result"></p>
<script>
var x = document.getElementById("para").innerHTML;
document.getElementById("result").innerHTML = x;
</script>
</html>

اختبار لرؤية‹/›

تغيير流出

document.write()يضيف نصًا سلسًا إلى流出 الوثيقة.

مثال

<!DOCTYPE html>
<html>
<p>يضيف أسلوب document.write() نصًا سلسًا إلى流出 الوثيقة:</p>
<script>
document.write(new Date());
</script>
</html>

اختبار لرؤية‹/›

يتم كتابة المحتوى باستخدام هذا الأسلوب فقط عند تحليل المستند.

إذا تم استخدام هذا الأسلوب بعد تحميل الصفحة، فإنه سيقوم بإسقاط جميع المحتويات الموجودة حاليًا في المستند.

مثال

<button onclick="myFunc()">انقر علي
<script>
function myFunc() {
　　document.write(new Date());
}
</script>

اختبار لرؤية‹/›

تغيير قيمة الخاصية

للتحويل قيمة خاصية HTML، استخدم الجملة التالية:

element.attribute = new value

في المثال التاليتغيير<img>العنصرsrcقيمة الخاصية:

انقر على الزر لتغيير الصورة الشخصية:

في المثال التاليالحصول علىللحصول على عناصر الربطhrefقيمة الخاصية:

مثال

var x = document.getElementById("demo").href;

اختبار لرؤية‹/›

لإضافة عناصر جديدة إلى DOM

يمكنك استخدامdocument.createElement()تقوم الطريقة بإنشاء عناصر جديدة بوضوح في مستند HTML.

تقوم هذه الطريقة بإنشاء عنصر جديد ولكن لا تضعه في DOM. يجب عليك تنفيذ هذا في خطوة منفصلة:

　　// إنشاء عنصر h3 جديد
　　var　newElem　=　document.createElement("h3");
　　// وإعطائه بعض المحتوى
　　var newContent = document.createTextNode("مرحبًا، يا أصدقاء!");

appendChild()يضيف هذا الطريقة العنصر الجديد إلى أي من الأبناء الآخرين للنود المحددالنهاية.

مثال

//　Add　text　node　to　the　newly　created　h3
newElem.appendChild(newContent);　　
// إضافة العنصر الجديد و محتواه إلى DOM
document.body.appendChild(newElem);

اختبار لرؤية‹/›

لكن، إذا كان يجب على أي عنصر فرعي آخرالبدايةلإضافة عنصر جديد، يمكنك استخدامinsertBefore()أسلوب

مثال

//　Create　a　new　h3　element
var　newElem　=　document.createElement("h3");
//　Give　it　some　content
var　newContent　=　document.createTextNode("Hi　there　and　greetings!");
//　Add　text　node　to　the　newly　created　h3
newElem.appendChild(newContent);　　
//　Get　the　Body
var　body　=　document.body;
//　Insert　H3　before　the　first　child　of　the　BODY
body.insertBefore(newElem,　body.childNodes[0]);

اختبار لرؤية‹/›

لإزالة العنصر الحالي من DOM

بالنسبة لنفس الغرض، يمكنك استخدامremoveChild()يستخدم هذا الأسلوب لإزالة العنصر من DOM.

مثال

var　div　=　document.getElementById("demo");
div.removeChild(div.firstElementChild);

اختبار لرؤية‹/›

تغيير CSS باستخدام JS DOM محددات JS HTML DOM