انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 54
دورة جافا سكريبت

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
10
الأمثلة
18
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,743
محتوى الدرس
في هذا الدرس 10تصفّح المواضيع

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

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

Copy Content Body

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

HTML 
button.addEventListener("click",()=>{
    result.innerHTML += bodyContent + "<br>";
});
جرّب بنفسك

.Set Body Content

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

HTML 
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.

HTML 
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.

HTML 
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.

HTML 
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>

HTML 
let button = document.getElementById('button');
button.addEventListener("click",()=>{
      document.title = "CloseTag";
});
جرّب بنفسك

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

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

Images Length Syntax

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

HTML 
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].

HTML 
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].

HTML 
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.

HTML 
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.

HTML 
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 بعد الكائن.

HTML 
let button = document.getElementById('button');
let len = document.anchors.length; 
button.addEventListener("click",()=>{
document.write("<b>"+ len +"</b>");
    });
جرّب بنفسك

Anchor innerHTML

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

HTML 
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.

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.

HTML 
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 المدمج جاهزاً مع لغة جافا سكريبت.

HTML 
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 في كل مرة.

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 المُدمج جاهزاً مع لغة جافا سكريبت.

HTML 
let button = document.getElementById('button');
 let result = document.getElementById('result');
 let embeds = document.embeds.length; 
 button.addEventListener("click",()=>{
    result.innerHTML = embeds;
 });
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…