0 محمد Fahmy نشر 11 مارس 2023 أرسل تقرير نشر 11 مارس 2023 DOM هو اختصار لـ Document Object Model وهو عبارة عن مجموعة من الأدوات والتقنيات التي تسمح للمطورين بالتفاعل مع صفحات الويب وتغيير محتواها وخصائصها باستخدام جافا سكربت. يمثل DOM هيكلية الصفحة كشجرة تحتوي على عناصر HTML وCSS وJavaScript، حيث يمكن للمطور استخدام DOM للوصول إلى هذه العناصر والتلاعب بها بشكل ديناميكي ويمكنك تصفح هذه المقالة لتفصيل أكثر. 1 اقتباس
0 عمر قره محمد نشر 11 مارس 2023 أرسل تقرير نشر 11 مارس 2023 ال (DOM) Document Object Model هو تمثيل لل Document بشكل Objects حتى يسهل التعامل معه بشكل برمجي، أي انه يمثل كل ما تراه على صفحة الويب بشكل Objects تستطيع الوصول له وتعديله برمجياً. مثال عليها document.getElementById("p1").innerHTML = "New text!"; اطلع اكثر عن الـ dom من خلال هذه المقالة : 1 اقتباس
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 باستخدام الأساليب والخصائص المتاحة في جافاسكريبت مثل 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 اقتباس
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 اقتباس
السؤال
Youssef Nasr2
السلام عليكم ما هو ال DOM
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.