JavaScript

HTML DOM Collections
كائنات جاهزة في لغة جافا سكريبت لبعض العناصر

في هذا الدرس سوف نتعرف علي Document Dom وهي العناصر التي تستخدم في التعامل في التحكم في الملفات 

التاريخ

09 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

2119

المواضيع

24
الشروحات chevron_left HTML DOM Collections chevron_left JavaScript

HTML DOM Collections
كائنات جاهزة في لغة جافا سكريبت لبعض العناصر

</> HTML DOM Body Collection
كائن جاهز لعنصر body في لغة جافا سكريبت

يُستخدم كائن DOM Body Collection للبحث أو التعامل مع عنصر <Tag <body داخل صفحة HTML ،بدلاً من إستخدام دوال ()getElementById أو ()getElementsByClassName  أو ()querySelectorAll.

Copy Content Body

هذا المثال يَقوم بنسخ محتويات عنصر body ثُمَ يَقوم بعد ذلك بطباعتها.

button.addEventListener("click",()=>{
    result.innerHTML += bodyContent + "<br>";
});
.Set Body Content

هذا المثال يقوم بتغيير محتوي الصفحة عن طريق الخاصية innerHTML مع خاصية document.body

button.addEventListener("click",()=>{
   document.body.innerHTML = "Welcome To Javascript Toturial";
});

</> HTML DOM head Collection
كائن جاهز لعنصر head في لغة جافا سكريبت

يُستخدم كائن DOM head Collection للبحث أو التعامل مع عنصر <Tag <head داخل صفحة HTML ، بدلاً من إستخدام دوال ()getElementById أو ()getElementsByClassName  أو ()querySelectorAll.

.Head Content

يَقوم هذا المثال بطباعة محتويات عنصر head.

let button = document.getElementById('button');
let result = document.getElementById('result');
let headContent = document.head.innerText; 
button.addEventListener("click",()=>{
       result.innerHTML = headContent;
});
Head Content Update

يَقوم هذا المثال بإنشاء عنصر <title> بداخل عنصر head.

let button = document.getElementById('button');
let result = document.getElementById('result');
let headContent = document.head; 
button.addEventListener("click",()=>{
   headContent.innerHTML = "<title>Page Title</title>";
   result.innerHTML = headContent.innerText;
});

</> HTML DOM title Collection
كائن جاهز لعنصر title في لغة جافا سكريبت

يُستخدم كائن DOM title Collection للبحث أو التعامل مع عنصر <Tag <titleداخل صفحة HTML ، بدلاً من إستخدام دوال ()getElementById أو ()getElementsByClassName  أو ()querySelectorAll.

title Content

يَقوم هذا المثال بطباعة محتويات عنصر title.

let button = document.getElementById('button');
let result = document.getElementById('result');
let titlePageContent = document.title; 
button.addEventListener("click",()=>{
    result.innerHTML = titlePageContent;
});
Set Page Title

يُمكنكَ تعديل العنوان الخاص بصفحة HTML عن طريق إعادة ضبط عنصر <title>

let button = document.getElementById('button');
button.addEventListener("click",()=>{
      document.title = "CloseTag";
});
ملاحظة

في المثال الأخير الخاص بإعادة المحتوي النصي للعنصر <title> ، لن يَجدُث أي تغيير علي موقع Closetag ، وإذا أردت أن تَري االنتيجة جرب هذا المثال Offline  علي جهازك الشخصي.

</> HTML DOM images Collection
كائن جاهز لعناصر images في لغة جافا سكريبت

يُستخدم كائن DOM images Collection للبحث أو التعامل مع عنصر <Tag <imgداخل صفحة HTML ،بدلاً من إستخدام دوال ()getElementById أو ()getElementsByClassName  أو ()querySelectorAll.

Images Length Syntax

يمكنك معرفة العناصر التي تحمل علامة <img> عن طريق إضافة length بعد الكائن.

let button = document.getElementById('button');
let result = document.getElementById('result');
let images = document.images.length; 
button.addEventListener("click",()=>{
    result.innerHTML = images;
});
Get Src Attribute Images

يمكنك عرض المسار الخاص بالصورة عن طريق [index].

let button = document.getElementById('button');
let result = document.getElementById('result');
let images = document.images[1].src; 
button.addEventListener("click",()=>{
    result.innerHTML = images;
});
Style Image By Index

يُمكنك إضافة Style لعنصر <img> طريق [index].

let button = document.getElementById('button');
let images = document.images[2]; 
button.addEventListener("click",()=>{
    images.style.border = "2px dotted red";
});

</> HTML DOM Links Collection
كائن جاهز لعناصر Links الروابط في لغة جافا سكريبت

يُستخدم كائن DOM links Collection للبحث أو التعامل مع عنصر <Tag <aصفحة HTML ، بدلاً من إستخدام دوال ()getElementById أو ()getElementsByClassName  أو ()querySelectorAll.

Links URL By Index

يُمكنك عرض القيمة التي بداخل عنصر <a> من خلال Index.

let button = document.getElementById('button');
let links = document.links[0].href; 
let result = document.getElementById('demo');
button.addEventListener("click",()=>{
    result.innerHTML = links;
});
Links URL By Item Index

يُمكنك عرض القيمة التي بداخل عنصر <a> من خلال Item Index.

let button = document.getElementById('button');
let links = document.links.item(0).href; 
let result = document.getElementById('demo');
button.addEventListener("click",()=>{
    result.innerHTML = links;
});

</> HTML DOM Anchors Collection
كائن جاهز لعناصر a في لغة جافا سكريبت

يستخدم كائن DOM Anchors Collection للبحث أو التعامل مع العناصر التي تحمل علامة  <Tag <a داخل صفحة HTML بدلاً من إستخدام دوال ()getElementById أو ()getElementsByClassName  أو ()querySelectorAll ، ولكن لابُد من إضافة خاصية name بداخل عنصر <a>.
Anchor Length Syntax

يمكنك معرفة العناصر التي تحمل علامة <a> عن طريق إضافة length بعد الكائن.

let button = document.getElementById('button');
let len = document.anchors.length; 
button.addEventListener("click",()=>{
document.write("<b>"+ len +"</b>");
    });
Anchor innerHTML

يمكنك طباعة العنصر الذي يَحمل علامة <a> عن طريق إضافة inn erHTML بعد الكائن.

let button = document.getElementById('button');
let text = document.anchors[0].innerHTML; 
button.addEventListener("click",()=>{
document.getElementById('Result').innerHTML = "<b>"+ text +"</b>";
});

</> HTML DOM Forms Collection
كائن جاهز لعنصر Form في لغة جافا سكريبت

يُستخدم كائن DOM Forms Collection للبحث أو التعامل مع عنصر <Tag <formداخل صفحة HTML ، بدلاً من إستخدام دوال ()getElementById أو ()getElementsByClassName  أو ()querySelectorAll.

forms length

هذا المثال يَقوم بطباعة عدد عناصر <form> داخل صفحة HTML.

let button = document.getElementById('button');
let result = document.getElementById('result');
let forms = document.forms.length; 
button.addEventListener("click",()=>{
    result.innerHTML = forms;
});
Forms Value

هذا المثال يَقوم بطباعة القيمة الخاصة بعناصر <form> داخل صفحة HTML من خلال Index وخاصية name.

let button = document.getElementById('button');
let result = document.getElementById('result');
let forms = document.forms[1].lname.value; 
button.addEventListener("click",()=>{
    result.innerHTML = forms;
});

</> HTML DOM scripts Collection
كائن جاهز لعناصر scripts في لغة جافا سكريبت

يُستخدم كائن DOM scripts Collection للبحث أو التعامل مع عنصر <Tag <scriptصفحة HTML ، بدلاً من إستخدام دوال ()getElementById أو ()getElementsByClassName  أو ()querySelectorAll.

عدد عناصر scripts في الصفحة

للحصول علي عدد عناصر scripts في الصفحة استخدم كائن scripts المدمج جاهزاً مع لغة جافا سكريبت.

let button = document.getElementById('button');
let result = document.getElementById('result');
let len  = document.scripts.length; 
button.addEventListener("click",()=>{
   result.innerHTML = len;
});

</> HTML DOM Documnt Element Collection
كائن جاهز لجميع العناصر Elements في لغة جافا سكريبت

يُستخدم كائن DOM Documnt Element Collection للبحث أو التعامل مع جميع العناصر بداخل صفحة HTML ، بدلاً من إستخدام دوال  ()getElementsByClassName  أو ()querySelectorAll.

Documnt Element

يَقومُ هذا المثال بطباعة جميع العناصر التي بداخل صفحة HTML في كل مرة.

let button = document.getElementById('button');
let result = document.getElementById('result');
let documentEleme  = document.documentElement.innerHTML; 
button.addEventListener("click",()=>{
    result.innerHTML += documentEleme;
});

</> HTML DOM Embeds Collection
كائن جاهز لعناصر Embeds في لغة جافا سكريبت

يُستخدم كائن DOM Embeds Collection للبحث أو التعامل مع عنصر <Tag <embed في صفحة HTML ، بدلاً من إستخدام دوال ()getElementById أو ()getElementsByClassName  أو ()querySelectorAll.

عدد عناصر Embeds في الصفحة

للحصول علي عدد عناصر Embeds في الصفحة استخدم كائن Embeds المُدمج جاهزاً مع لغة جافا سكريبت.

let button = document.getElementById('button');
 let result = document.getElementById('result');
 let embeds = document.embeds.length; 
 button.addEventListener("click",()=>{
    result.innerHTML = embeds;
 });
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.