كل ما تحتاج لمعرفته حول DOM في JavaScript

هل تعلم أنه يمكننا استخدام JavaScript لمعالجة المحتوى على صفحة الويب؟ تبدو مثيرة للاهتمام ، أليس كذلك؟ دعونا نفهم ما هو نموذج كائن المستند ، أي. DOM بجافا سكريبت بالطريقة التالية:

• ما هو DOM في JavaScript؟
• إجراءات DOM في JavaScript
• الاستعلام عن DOM
• الاستماع إلى الأحداث
• التعامل مع النماذج
• إنشاء عناصر HTML
• مضيفا CSS

ما هو DOM في JavaScript؟

يتم إنشاء نموذج كائن المستند أو DOM بواسطة المستعرض عند تحميل صفحة ويب. في شكل رسومي ، يشبه شجرة عناصر تسمى أيضًا العقد ، والتي تُستخدم لتمثيل كل عنصر على الصفحة.

يقع كل DOM الخاص بصفحة الويب الخاصة بنا داخل كائن المستند. برمجيًا ، يسمح لنا هذا النموذج بقراءة محتوى صفحتنا أو حتى تغييره عبر . أليس هذا رائعًا؟

c ++ فرز مجموعة

إجراءات DOM في JavaScript

بعض الإجراءات التي يمكننا تنفيذها باستخدام هذا النموذج هي:

• تغيير / إزالة عناصر HTML في DOM / على الصفحة.

• قم بتغيير وإضافة أنماط CSS إلى العناصر

• قراءة السمات وتغييرها (href ، src ، بديل) ، إلخ.

  
  
  

  كيفية إنشاء تطبيق Salesforce

• أنشئ عناصر جديدة وأدخلها في DOM / الصفحة.

• إرفاق مستمعي الحدث بالعناصر (انقر ، ضغطة مفتاح ، إرسال)

الاستعلام عن DOM في JavaScript

يُطلق على الاستيلاء على عنصر HTML أو الحصول عليه لإضافة / تغيير أو محتوى اسم الاستعلام.

كود HTML:

جافا سكريبت و DOM h1 {font-size: 60px}

كود JavaScript:

var title = document.getElementById ('title') // cgangin color to red title.style.color = 'red' var body = document.getElementById ('body') // تغيير لون الخلفية إلى body.style باللون الأزرق الفاتح. backgroundColor = 'lightblue'

قمنا بتغيير لون نص العنوان من الأسود إلى الأحمر باستخدام JavaScript. لقد حققنا هذا باستخدام .أسلوب الخاصية ثم تغيرت قيمة اللون ليساوي شبكة .

فلنقم الآن بتغيير لون الخلفية لعنصر الجسم إلى أزرق فاتح .

دورة حياة نشاط android

بهذا نكون قد وصلنا إلى نهاية DOM في مقالة JavaScript. آمل أن تكون قد فهمت كيفية عمل نماذج كائنات المستندات وكيفية تنفيذ نفس DOM في JavaScript.

الآن بعد أن تعرفت على DOM في JavaScript ، تحقق من ملف بواسطة Edureka. سيساعدك تدريب شهادة تطوير الويب على تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في “DOM in JavaScript” وسنقوم بالرد عليك.