جافاسكربتالوصول لعناصر الصفحة

// element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var element = document.getElementById('demo');

// element هنا قمنا بتغيير محتوى العنصر الذي يمثله المتغير
element.innerHTML = 'My content is changed!';

// elements في مصفوفة إسمه demo يساوي class هنا قمنا بتخزين جميع العناصر التي تملك
var elements = document.getElementsByClassName('demo');

// elements هنا قمنا بتغيير محتوى أول و ثاني عنصر موجودين في المصفوفة
elements[0].innerHTML = 'My content is changed!';
elements[1].innerHTML = 'My content is changed too!';

// elements و المخزنة في المصفوفة demo يساوي class هنا قمنا بإضافة فقرة في آخر الصفحة عرضنا فيها إجمالي عدد العناصر التي تملك
document.write('<p>' + elements.length + ' element(s) found have the class "demo".'</p>' ');

// elements في مصفوفة إسمه <p> هنا قمنا بتخزين جميع العناصر التي نوعها
var elements = document.getElementsByTagName('p');

// elements هنا قمنا بتغيير محتوى أول و ثاني عنصر موجودين في المصفوفة
elements[0].innerHTML = 'My content is changed!';
elements[1].innerHTML = 'My content is changed too!';

// elements و المخزنة في المصفوفة <p> هنا قمنا بإضافة فقرة في آخر الصفحة عرضنا فيها إجمالي عدد العناصر التي نوعها
document.write(elements.length + ' p tag(s) found.');

// element في متغير إسمه demo يساوي class و يملك <p> هنا قمنا بتخزين أول عنصر نوعه
var element = document.querySelector('p.demo');

// element هنا قمنا بتغيير محتوى العنصر الذي يمثله المتغير
element.innerHTML = 'My content is changed!';

// elements في مصفوفة إسمها demo يساوي class و تملك <p> هنا قمنا بتخزين جميع العناصر التي نوعها
var elements = document.querySelectorAll('p.demo');

// elements هنا قمنا بتغيير محتوى أول و ثاني عنصر موجودين في المصفوفة
elements[0].innerHTML = 'My content is changed!';
elements[1].innerHTML = 'My content is changed too!';

// elements و المخزنة في المصفوفة demo يساوي class و تملك <p> هنا قمنا بإضافة فقرة في آخر الصفحة عرضنا فيها إجمالي عدد العناصر التي نوعها
document.write(elements.length + ' paragraph(s) found with class equal demo.');

// headers في مصفوفة إسمها <h2> هنا قمنا بتخزين جميع العناصر التي نوعها
var headers = document.querySelectorAll('h2');

// headers هنا قمنا بإنشاء حلقة تمر على جميع العناصر الموجودة في المصفوفة
for(let i=0; i<headers.length; i++) {
    headers[i].innerHTML = (i + 1) + ') ' + headers[i].innerHTML;
}