الوصول لخصائص العناصر في لغة JavaScript

الوصول لخصائص العناصر في لغة JavaScript

يا هلا بالجميع! اليوم بنشوف كيف نقدر نوصل لخصائص أي عنصر HTML في صفحتنا باستخدام JavaScript. الموضوع سهل ومهم جداً عشان تتفاعل مع الصفحة.

أول شيء: كيف نوصل للعنصر نفسه؟

قبل ما نوصل لخصائص العنصر، لازم نوصل للعنصر نفسه! فيه طرق كثيرة، أشهرها:

• document.getElementById('someId'): لو العنصر عنده id فريد.
• document.querySelector('.someClass') أو document.querySelector('div'): يرجع أول عنصر يطابق المحدد (CSS Selector).
• document.querySelectorAll('.someClass'): يرجع كل العناصر اللي تطابق المحدد كمصفوفة (NodeList).

مثال سريع:

const myDiv = document.getElementById('myAwesomeDiv');
console.log(myDiv); // بيطبع لك العنصر كله في الكونسول

طيب، كيف نوصل لخصائص العنصر؟

بمجرد ما توصل للعنصر، تقدر توصل لأي خاصية فيه باستخدام نقطة (.) وبعدها اسم الخاصية. زي كذا: element.propertyName.

أمثلة على خصائص شائعة:

1. id و className

عشان تقرأ أو تعدل الـ id أو الـ class الخاص بالعنصر:

const myElement = document.getElementById('myElement');

// قراءة الـ ID
console.log(myElement.id); // بيطبع 'myElement'

// قراءة الـ Class
console.log(myElement.className); // بيطبع كل الكلاسات كـ String

// تعديل الـ ID (نادراً ما تحتاجها)
myElement.id = 'newId';

// تعديل الـ Class (هنا بتستبدل كل الكلاسات القديمة)
myElement.className = 'newClass anotherClass';

// ملاحظة: لو بتضيف أو تحذف كلاس معين بدون ما تأثر على الباقي، استخدم <code dir="ltr" style="background:#f3f4f6; color:#0056b3; padding:2px 6px; border-radius:4px; font-family:monospace; direction:ltr !important; display:inline-block;">classList</code>:
myElement.classList.add('active');
myElement.classList.remove('inactive');
myElement.classList.toggle('highlight'); // يضيفه لو مو موجود، يحذفه لو موجود

2. innerHTML و textContent

هذي عشان تتعامل مع المحتوى النصي أو HTML اللي داخل العنصر:

• innerHTML: يجيب أو يغير كل المحتوى اللي داخل العنصر، بما فيه وسوم HTML.
• textContent: يجيب أو يغير المحتوى النصي فقط، ويتجاهل أي وسوم HTML.

const myParagraph = document.getElementById('myParagraph');

// قراءة المحتوى
console.log(myParagraph.innerHTML);   // بيجيب كل HTML اللي جواته
console.log(myParagraph.textContent); // بيجيب النص بس

// تعديل المحتوى
myParagraph.innerHTML = 'مرحباً <strong>يا عالم</strong>!';
myParagraph.textContent = 'هذا نص عادي.';

ملاحظة مهمة: استخدام innerHTML لإدخال محتوى من المستخدم ممكن يسبب مشاكل أمنية (XSS). انتبه!

3. value

خاصية value تستخدم لعناصر مثل <input>, <textarea>, و <select> عشان تقرأ أو تعدل القيمة المدخلة فيها.

const myInput = document.getElementById('myInput');

// قراءة القيمة
console.log(myInput.value);

// تعديل القيمة
myInput.value = 'قيمة جديدة';

4. src و href

للعناصر اللي عندها مسار زي <img> (خاصية src) أو <a> (خاصية href).

const myImage = document.getElementById('myImage');
const myLink = document.getElementById('myLink');

// قراءة المسار
console.log(myImage.src);
console.log(myLink.href);

// تعديل المسار
myImage.src = 'new_image.jpg';
myLink.href = 'https://www.google.com';

5. style

هذي الخاصية تسمح لك تعدل على الـ CSS الخاص بالعنصر مباشرة من JavaScript. كل خاصية CSS تكتبها بنمط camelCase.

const myButton = document.getElementById('myButton');

// تعديل لون الخلفية
myButton.style.backgroundColor = '#007bff';

// تعديل لون النص
myButton.style.color = 'white';

// تعديل حجم الخط
myButton.style.fontSize = '16px';

// إضافة أكثر من خاصية (مثلاً، Border Radius)
myButton.style.borderRadius = '5px';

نصيحة: الأفضل غالباً إنك تعدل على الكلاسات (باستخدام classList) بدل ما تعدل على الـ style مباشرة، عشان تخلي الـ CSS حقك مرتب ومنظم.

مثال شامل:

شوف هالمثال كيف نستخدم كم خاصية مع بعض:

// HTML
/*
<div id="card">
    <h2 id="cardTitle">بطاقة مميزة</h2>
    <img id="cardImage" src="placeholder.png" alt="صورة توضيحية" style="width:100px;">
    <p id="cardDescription">هنا وصف مختصر للبطاقة.</p>
    <button id="cardButton">اضغط هنا</button>
</div>
*/

// JavaScript
const card = document.getElementById('card');
const title = document.getElementById('cardTitle');
const image = document.getElementById('cardImage');
const description = document.getElementById('cardDescription');
const button = document.getElementById('cardButton');

// قراءة وتعديل خصائص
console.log("العنوان الحالي:", title.textContent);
title.textContent = "عنوان جديد ومثير!";
console.log("العنوان بعد التعديل:", title.textContent);

image.src = "https://via.placeholder.com/150"; // تغيير الصورة
image.alt = "صورة جديدة"; // تغيير النص البديل

description.innerHTML = "هذا <em>وصف</em> <strong>محدث</strong> للبطاقة.";

button.style.backgroundColor = '#28a745'; // لون أخضر للزر
button.style.color = '#fff';
button.textContent = 'شاهد المزيد';

// إضافة كلاس للبطاقة الرئيسية
card.classList.add('active-card');

console.log("الزر الآن:", button.textContent, "ولونه:", button.style.backgroundColor);

وبكذا، صرنا نعرف كيف نوصل لخصائص العناصر ونعدل عليها بكل سهولة. طبقوا الأمثلة عشان تثبت المعلومة!

← السابقالفهرسالتالي →