جافا سكريبت dom : واستخدامها في صفحات الويب

تمت الكتابة بواسطة : محمد

for Large

جافا سكريبت dom يشير إلى نموذج كائن مستند وهو عبارة عن منصة وواجهة محايدة للغة.

تسمح جافا سكريبت dom لكل من البرامج والأدوات النصية بالوصول إلى المحتوى الديناميكي.

بالتالي فقد بات من الممكن إجراء عدد من التحديثات على بنيته ونمطه وتحديثه باستمرار.

على سبيل المثال , يتم استخدام وجمع المعلومات المتوفرة على صفحة الويب باستخدام جافا سكريبت dom.

حيث توفر لغة JavaScript العديد من الميزات والطرق الفريدة في إدارة صفحات الويب.

أقسام جافا سكريبت DOM

النموذج القياسي الموحد (Core Dom).
نموذج مستندات XML.
مستندات HTML.

لماذا DOM

يوفر الوصول إلى ديناميكية الصفحات بواسطة JavaScript حرية كاملة في التحكم وفقًا لمصادرها.

خاصة وأنه يمكن النظر إلى كائن مستند جافا سكريبت DOM ، على أنه كائن HTML.

و بالتالي يتم جمع معلوماته والوصول إليها والتأثير على المخرجات بواسطة JavaScript.

مع ذلك فقد أحدث الوصول إلى بنية علامات الصفحة تغيرًا نوعيًا في صفحات الويب.

على سبيل المثال لغة JavaScript. زودتك بإمكانية التحكم في بنية البيانات HTML ولغة الترميز CSS أيضًا.

استخدامات جافا سكريبت DOM

يرتبط استخدام DOM في JavaScript بالعلامات التي يمكن العمل عليها.

لا سيما أن صفحات الويب مليئة بعلامات متعددة وتحت أسماء مختلفة ، فيما يلي مثال على كود HTML:

<body>
 <h1>My First Page</h1>
 <paragraph alt="myPara">Welcome to our first paragraph!</paragraph>
</ body >

كما نلاحظ هنا ، يمثل الكود السابق صفحة HTML نمطية قياسية.

إذ أن كل ما يمكن فعله هو تعيين علامات فارقة من الوسوم للحصول على العناوين بشكل قابل للتنفيذ .

بالتالي تعتبر كل من علامات H1 و Paragraph إحدى عناصر جافا سكريبت DOM التي لم يتم استخدامها بعد.

بينما تعتبر النصوص الموجودة بالداخل بمثابة عقدة فرعية.

تمكين عناوين 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 .

جافا سكريبت 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.

يطبق عليها أحيانا بــ معرّفات الوصول.