خصائص dom جافا سكريبت

التقنية

2023-02-04 12:25:20 تم النشر بتاريخ

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

ستكون قادرًا على استخدام وجمع تلك المعلومات المتوفرة على صفحتك باستخدام خصائص DOM. حيث تمنحك لغة JavaScript العديد من الميزات والطرق الفريدة في إدارة الصفحات.

لماذا DOM

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

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

استخدام خصائص DOM

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

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

كما نلاحظ هنا ، لقد أنشأت أول صفحة HTML بشكل طبيعي. وكل ما نريده هنا هو بضع علامات للحصول على الفكرة بشكل جيد وسهل التنفيذ في البداية. وتعتبر كل من علامات H1 و Paragraph من عناصر JavaScript و تعتبر النصوص الموجودة بالداخل عقدة فرعية.

لاحظ هنا أن alt عبارة عن سمة العلامة Paragraph تشير إلى نص بديل ويمكن أيضًا الوصول إليها عن طريق استدعاء خاصية Attribute لكائن المستند نفسه في JavaScript. يمكنك الحصول على اتصال مباشر بالعلامات عبر DOM في JavaScript.

يتم ذلك عبر getElementById أو getElementsByTagName ، وهي وظائف موجهة للكائنات لنفس اللغة ، لأن JavaScript يدعم الكائنات الموجهة تمامًا مثل لغات البرمجة الأخرى. تمكنك خاصية 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 في JavaScript .

إضافة العناصر

سننتقل الآن إلى إضافة عنصر لم يتم الإعلان عنه مسبقًا في علامات HTML. وبعد ذلك سنضعه في منتصف الشاشة عند. ربما يكون المثال التالي هو المعنى الحقيقي لكائن المستند في JavaScript:

<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. معرفات الوصول أو المعرفات.

المراجع

^ JavaScript - HTML DOM Methods.
^ تصميم CSS.
^ دورة تعلم لغة HTML كاملة للمبتدئين.

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

آخر تحديث : لم تخضع لتحديثات بعد