يُستخدم كائن 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;
 });

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

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