جافا سكريبت dom يشير إلى نموذج كائن مستند وهو عبارة عن منصة وواجهة محايدة للغة.
تسمح جافا سكريبت dom لكل من البرامج والأدوات النصية بالوصول إلى المحتوى الديناميكي.
بالتالي فقد بات من الممكن إجراء عدد من التحديثات على بنيته ونمطه وتحديثه باستمرار.
على سبيل المثال , يتم استخدام وجمع المعلومات المتوفرة على صفحة الويب باستخدام جافا سكريبت dom.
حيث توفر لغة JavaScript العديد من الميزات والطرق الفريدة في إدارة صفحات الويب.
يوفر الوصول إلى ديناميكية الصفحات بواسطة JavaScript حرية كاملة في التحكم وفقًا لمصادرها.
خاصة وأنه يمكن النظر إلى كائن مستند جافا سكريبت DOM ، على أنه كائن HTML.
و بالتالي يتم جمع معلوماته والوصول إليها والتأثير على المخرجات بواسطة JavaScript.
مع ذلك فقد أحدث الوصول إلى بنية علامات الصفحة تغيرًا نوعيًا في صفحات الويب.
على سبيل المثال لغة JavaScript. زودتك بإمكانية التحكم في بنية البيانات HTML ولغة الترميز CSS أيضًا.
يرتبط استخدام DOM في JavaScript بالعلامات التي يمكن العمل عليها.
لا سيما أن صفحات الويب مليئة بعلامات متعددة وتحت أسماء مختلفة ، فيما يلي مثال على كود HTML:
<body> <h1>My First Page</h1> <paragraph alt="myPara">Welcome to our first paragraph!</paragraph> </ body >
كما نلاحظ هنا ، يمثل الكود السابق صفحة HTML نمطية قياسية.
إذ أن كل ما يمكن فعله هو تعيين علامات فارقة من الوسوم للحصول على العناوين بشكل قابل للتنفيذ .
بالتالي تعتبر كل من علامات H1 و Paragraph إحدى عناصر جافا سكريبت DOM التي لم يتم استخدامها بعد.
بينما تعتبر النصوص الموجودة بالداخل بمثابة عقدة فرعية.
يمكن الحصول على اتصال مباشر بالعلامات بواسطة جافا سكريبت DOM.
يتم ذلك عبر وظائف getElementById أو getElementsByTagName.
حيث أنها وظائف موجهة للكائنات لنفس اللغة (جافا سكريبت).
على سبيل المثال تدعم لغة جافا سكريبت الكائنات الموجهة تمامًا مثل لغات البرمجة الأخرى لكن بطريقة تلقائية.
بالتالي تمكنك خاصية DOM في JavaScript من بناء كائنات وفقًا لــ :
يتم ترجمة إضافة العناصر في JavaScript إلى createElement () والنصوص عبر createTextNode ().
حيث يمكن الإعتماد على هاتين الوظيفتين في بناء واجهات الإشعارات ونظام المحادثة على مواقع الويب.
على سبيل المثال في قواعد البيانات ، يتم الانتقال إلى صفحة الخادم .
ما يمكن من إعادة النتائج الفورية عبر عناصر مؤقتة ولحظية الإستخدام .
مواقع الشبكات الاجتماعية مثل Facebook و LinkedIn و Instagram.
تم إنشاء واجهاتها باستخدام كائنات المستند في JavaScript.
هناك الكثير من الخصائص التي يمكننا استخدامها عند إضافة عناصر والتحكم في العلامات الخاصة في HTML و CSS أيضًا.
على سبيل المثال ، يمكن التحكم في لون العنصر عبر JavaScript.
هناك بعض الوظائف مثل fgColor و bgColor ، كما في المثال التالي:
<body> <h1>My First document object in javascript</h1> <paragraph id="testing">Welcome to our first paragraph!</paragraph> <button onclick="createFirstDOM()">Click Me</button> </ body > <script> function createFirstDOM() { document.getElementById("testing").style.color = "#2b2d2d"; document.getElementById("testing").style.fontSize = "30px"; alert("I will resize Paragraph again"); } </script>
تم الوصول إلى علامة HTML من خلال Javascript DOM ، لا سيما عند التحكم في ميزات CSS.
إذ أن الدالة document.getElementById ، هي إحدى أساسيات جافا سكريبت dom .
بات من الممكن الآن إضافة عنصر لم يتم الإعلان عنه بعد في علامات HTML.
يشير المثال التالي إلى وظيفة كائن المستند في جافا سكريبت dom:
<body> <h1>By Using Element Creation</h1> <button onclick="createFirstDOM()">Click Me</button> <span id="ConnectChild"></span> </ body > <script> function createFirstDOM() { var title = document.createElement("DIV"); var text = document.createTextNode("Welcome to our first paragraph!"); title.appendChild(text); document.getElementById("ConnectChild").innerHTML = title.innerHTML; } </script>
لقد قمنا بتحديد عنوانًا متغيرًا وأضفنا عنصر DIV.
وهو علامة من HTML ، ولكن تمت إضافته بحرف كبير عند التعامل مع JavaScript.
نأخذ بالحسبان بأن إضافة أي نص عبر Node مثلا يتم باستخدام وظيفة مثل createTextNode.
إذ أنه يتعذر على المتصفح رؤية هذا النوع من العناصر.
وبالتالي يتعين استخدام وظيفة appendChild لتنفيذ علامة DIV وإظهارها بطريقة DOM.
يطبق عليها أحيانا بــ معرّفات الوصول.
وقت النشر : 2023-02-04 12:25:20 ·
يعتمد هذا الموقع على عرض الإعلانات في تحقيق الدخل ، نشكر تفهمكم الدائم ونتمنى لكم قضاء وقت رائع ... وشكراً :D .