دليل أساسيات JavaScript

مثلات JavaScript

وظائف JavaScript

JS HTML DOM

JS متصفح BOM

دليل أساسيات AJAX

دليل JavaScript

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

مخترات JS HTML DOM

يستخدم JavaScript غالبًا لاسترداد أو تعديل محتوى أو القيمة لعناصر HTML وتطبيق بعض التأثيرات.

من أجل ذلك، يجب عليك أولاً العثور على العنصر. هناك العديد من الطرق لفعل ذلك:

البحث عن عنصر HTML من خلال ID
البحث عن عناصر HTML من خلال اسم العلامة
البحث عن عناصر HTML من خلال الاسم الفئوي
البحث عن عناصر HTML من خلال CSS selectors
البحث عن عناصر HTML من خلال مجموعات العناصر HTML

البحث عن عنصر HTML عن طريق ID

يمكنك استخدامgetElementById()يختار الطريقة العنصر بناءً على ID العنصر الفريد.

هذه هي أبسط طريقة لجعل العناصر في شجرة DOM.

في هذا المثال يتم اختيار عنصر يحتوي على خاصية IDid="msg"العناصر:

مثال

var 	 x 	 = 	 document.getElementById("msg");

اختبار لـ‹/›

إذا تم العثور على العنصر، فإن هذه الطريقة سترجع العنصر كعنصر.

إذا لم يتم العثور على العنصر، فإن myElement سيحتوي على null.

البحث عن عناصر HTML من خلال اسم العلامة

يمكنك أيضًا استخدامgetElementsByTagName()يختار الطريقة العناصر من خلال اسم العلامة.

يستعيد هذا الطريقة قائمة مشابهة لتجميع العناصر في المستند التي تحتوي على اسم علامة معين.

في هذا المثال يتم اختيار جميع<p>العناصر:

مثال

var 	 x 	 = 	 document.getElementsByTagName("p");

اختبار لـ‹/›

تغيير لون الخلفية لجميع عناصر الفقرات في المستند:

مثال

var 	 x 	 = 	 document.getElementsByTagName("p");
for(let 	 i 	 = 	 0; 	 i 	 < 	 x.length; 	 i++) 	 {
　　　x[i].style.backgroundColor 	 = 	 "coral";
}

اختبار لـ‹/›

في هذا المثال يتم اختيارid="wrapper"من العناصر، ثم اختر“ wrapper”كل العناصر<p>العناصر:

مثال

var 	 x 	 = 	 document.getElementById("wrapper");
var 	 y 	 = 	 x.getElementsByTagName("p");

اختبار لـ‹/›

البحث عن عناصر HTML من خلال الاسم الفئوي

يمكنك استخدام هذاgetElementsByClassName()طريقة لاختيار جميع العناصر التي تحتوي على اسم فئة معين.

يستعيد هذا الطريقة قائمة مشابهة للعدد من جميع العناصر التي تحتوي على اسم فئة معين.

هذا المثال يعود إلى جميع العناصر التي تحتوي علىclass="demo"قائمة العناصر:

مثال

var x = document.getElementsByClassName("demo");

اختبار لـ‹/›

البحث عن عناصر HTML من خلال CSS selectors

يمكنك استخدام هذاquerySelectorAll()طريقة لاختيار العناصر التي تتطابق مع المحدد بالاختيار CSS selector (ID، فئة، نوع، إلخ).

يستعيد هذا الطريقة قائمة مشابهة للعدد من جميع العناصر التي تتطابق مع المحدد بالاختيار.

CSS selectors تقدم طريقة قوية ومثمرة لاختيار عناصر HTML في المستند.

مثال

var x = document.querySelectorAll("div");

اختبار لـ‹/›

هذا المثال يعود إلى العناصر التي تحتوي على“note”كل من<div>قائمة العناصر:

مثال

var x = document.querySelectorAll("div.note");

اختبار لـ‹/›

البحث عن عناصر HTML من خلال مجموعات العناصر HTML

العنصر الأعلى في مستند HTML يمكن استخدامها كخصائص المستند.

على سبيل المثال، يمكنك استخدام الخاصية لتحديد<html>العنصرdocument.documentElement.

المذكورالمكون يمكن أن يكون قابل للوصولdocument.bodyالخصائص.

مثال

var html = document.documentElement;
var body = document.body;

اختبار لـ‹/›

ملاحظة:إذاdocument.bodyفيقبل استخدام العلامة (على سبيل المثال، فيداخل <head>،)، سيقوم هذا بتحويله إلى null بدلاً من عنصر body.

يمكنك أيضًا الوصول إلى التالي من خلال HTML Objects (و مجموعات العناصر):

الخصائص	الوصف
document.anchors	الرجوع إلى جميع العناصر التي تحتوي على اسم الخاصية<a>العنصر
document.applets	إرجاع الكل<applet>العنصر(تم التخلي عنه في HTML5)
document.baseURI	الرجوع إلى URI الأساسي المطلق للمستند
document.body	إرجاعالعنصر
document.cookie	الرجوع إلى ملفات الـ cookie للمستند
document.doctype	الرجوع إلى نوع المستند للوثيقة
document.documentElement	إرجاع<html>العنصر
document.documentMode	الرجوع إلى النمط المستخدم من قبل المتصفح
document.documentURI	الرجوع إلى URI المستند
document.domain	إرجاع اسم نطاق خادم الوثيقة
document.domConfig	مستبعد؛إرجاع تكوين DOM
document.embeds	إرجاع الكل<embed>العنصر
document.forms	إرجاع الكل<form>العنصر
document.head	إرجاع<head>العنصر
document.images	إرجاع الكل<img>العنصر
document.implementation	إرجاع تنفيذ DOM
document.inputEncoding	إرجاع تشفير الوثيقة (مجموعة الحروف)
document.lastModified	إرجاع تاريخ وتوقيت تحديث الوثيقة
document.links	إرجاع الكل الذي يحتوي على الخاصية href<area>و<a>العنصر
document.readyState	إرجاع حالة (تحميل) الوثيقة
document.referrer	إرجاع URI المشارك (مستند الرابط)
document.scripts	إرجاع الكل<script>العنصر
document.strictErrorChecking	إرجاع ما إذا كان التحقق من الأخطاء الإجباري قيد التنفيذ
document.title	إرجاع<title>العنصر
document.URL	إرجاع عنوان URL الكامل للوثيقة

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