Youssef Nasr2 نشر 11 مارس 2023 أرسل تقرير مشاركة نشر 11 مارس 2023 السلام عليكم ما هو ال DOM 3 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد Fahmy نشر 11 مارس 2023 أرسل تقرير مشاركة نشر 11 مارس 2023 DOM هو اختصار لـ Document Object Model وهو عبارة عن مجموعة من الأدوات والتقنيات التي تسمح للمطورين بالتفاعل مع صفحات الويب وتغيير محتواها وخصائصها باستخدام جافا سكربت. يمثل DOM هيكلية الصفحة كشجرة تحتوي على عناصر HTML وCSS وJavaScript، حيث يمكن للمطور استخدام DOM للوصول إلى هذه العناصر والتلاعب بها بشكل ديناميكي ويمكنك تصفح هذه المقالة لتفصيل أكثر. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 11 مارس 2023 أرسل تقرير مشاركة نشر 11 مارس 2023 ال (DOM) Document Object Model هو تمثيل لل Document بشكل Objects حتى يسهل التعامل معه بشكل برمجي، أي انه يمثل كل ما تراه على صفحة الويب بشكل Objects تستطيع الوصول له وتعديله برمجياً. مثال عليها document.getElementById("p1").innerHTML = "New text!"; اطلع اكثر عن الـ dom من خلال هذه المقالة : 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 11 مارس 2023 أرسل تقرير مشاركة نشر 11 مارس 2023 بشكل أكثر تفصيلاً، يمكن القول أن DOM في JavaScript يشير إلى مجموعة من الكائنات (Objects) التي تمثل مستند HTML الذي تتم إنشاؤه من قبل المستعرض (Browser)، وتتيح للمطورين التفاعل مع عناصر المستند بشكل ديناميكي عن طريق البرمجة. ويعد DOM بمثابة جسر بين المستند HTML وJavaScript، حيث يمكن الوصول إلى العناصر الموجودة في المستند والتلاعب بها باستخدام JavaScript. DOM يعمل على مبدأ التسلسل الهرمي (Hierarchical structure)، حيث يتم تمثيل المستند HTML كشجرة تحتوي على عناصر HTML وكل عنصر يحتوي على أطفال (Children) وأشقاء (Siblings). ويتم تمثيل العناصر باستخدام كائنات JavaScript يمكن الوصول إليها باستخدام مجموعة من الخصائص والأساليب. عندما يتم تحميل صفحة ويب، يقوم المستعرض بإنشاء DOM، ويمكن للمطور الوصول إلى عناصر المستند HTML باستخدام الأساليب والخصائص المتاحة في DOM، مثل getElementById() و getElementsByClassName() وغيرها. الأساليب والخصائص المتاحة في DOM تختلف من عنصر إلى آخر، ولكن بشكل عام يمكن استخدام DOM لتعديل محتويات الصفحة والأحداث المرتبطة بها، وذلك باستخدام JavaScript. على سبيل المثال، يمكن استخدام DOM لتغيير نص عنصر HTML، عن طريق الوصول إلى العنصر باستخدام الأسلوب getElementById() ثم تعيين قيمة جديدة لخاصية innerHTML: <p id="myPara">Hello World!</p> const myPara = document.getElementById("myPara"); myPara.innerHTML = "Goodbye World!"; كما يمكن استخدام DOM لإضافة عناصر HTML جديدة إلى المستند، عن طريق إنشاء العنصر باستخدام createElement() ثم إضافته إلى المستند باستخدام append. على سبيل المثال، إذا كنت تريد إنشاء عنصر div جديد وإضافته إلى صفحتك، يمكنك استخدام الكود التالي: // إنشاء عنصر div جديد const newDiv = document.createElement("div"); // تعيين نص داخل العنصر const divText = document.createTextNode("Hello, World!"); // إضافة النص إلى العنصر newDiv.appendChild(divText); // تعيين بعض الخصائص للعنصر newDiv.style.backgroundColor = "blue"; newDiv.style.color = "white"; newDiv.style.padding = "10px"; // إضافة العنصر الجديد إلى الصفحة document.body.appendChild(newDiv); يمكن أيضًا استخدام DOM لإزالة عناصر HTML، عن طريق استخدام removeChild(). على سبيل المثال، إذا كنت تريد إزالة عنصر div بناءً على معرفه، يمكنك استخدام الكود التالي: // الحصول على العنصر المراد إزالته باستخدام معرفه const divToRemove = document.getElementById("myDiv"); // إزالة العنصر من المستند divToRemove.parentNode.removeChild(divToRemove); وباستخدام DOM ، يمكنك أيضًا تغيير خصائص عناصر HTML موجودة، مثل قيمة النص أو الخلفية أو الحجم والألوان والخطوط والأحداث وغيرها الكثير. على سبيل المثال، إذا كنت تريد تغيير خلفية عنصر div عند تحميل الصفحة، يمكنك استخدام الكود التالي: <div id="myDiv">Hello, World!</div> <script> // الحصول على العنصر المراد تعديله باستخدام معرفه const myDiv = document.getElementById("myDiv"); // تغيير خلفية العنصر myDiv.style.backgroundColor = "blue"; myDiv.style.color = "white"; myDiv.style.padding = "10px"; </script> في النهاية، تتيح لك DOM إمكانية التفاعل مع صفحات الويب وتغييرها بطريقة ديناميكية وباستخدام لغة JavaScript. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عبدالباسط ابراهيم نشر 11 مارس 2023 أرسل تقرير مشاركة نشر 11 مارس 2023 يعرض DOM مستند HTML على أنه شجرة من العقد. تمثل العقدة عنصر HTML. وللتوضيح أكثر تسمى وثيقتنا عقدة الجذر وتحتوي على عقدة فرعية واحدة وهي HTML . يحتوي HTML على طفلين هما <head> و<body> .كل من العنصري لهما أبناء.إليك طريقة أخرى لتصور شجرة العقد هذه. كما يمكن أن يكون ال DOM مختلف عن HTML في حالة أن توجد أخطاء في HTML وقد أصلحها المتصفح لك. لنفترض أن لديك عنصر <table> في HTML واستبعد عنصر <tbody> المطلوب. سيقوم المتصفح فقط بإدراج هذا <tbody> نيابة عنك. سيكون موجودًا في DOM ، لذا ستتمكن من العثور عليه باستخدام JavaScript وتصميمه باستخدام CSS ، على الرغم من أنه ليس في HTML. كما يلي قائمة مختصرة بواجهات برمجة التطبيقات الشائعة في البرمجة النصية لصفحات الويب و XML باستخدام DOM. document.querySelector(selector) document.querySelectorAll(name) document.createElement(name) parentNode.appendChild(node) element.innerHTML element.style.left element.setAttribute() element.getAttribute() element.addEventListener() window.content Window.onload window.scrollTo() وللمزيد من التفاصيل حول ال API السابقة يمكنك تصفح موسوعة حسوب 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Youssef Nasr2
السلام عليكم ما هو ال DOM
رابط هذا التعليق
شارك على الشبكات الإجتماعية
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.