
x32x01
أدارة أكتب كود
- بواسطة x32x01 ||
ما هو DOM في JavaScript؟

DOM (Document Object Model) هو واجهة برمجة التطبيقات (API) التي تمكن JavaScript من التفاعل مع محتوى مستندات HTML و XML. يتيح DOM للمطورين تعديل العناصر مثل النصوص، الصور، والروابط، إضافة أو إزالة عناصر من المستند.
ما الفرق بين getElementById و querySelector؟

getElementById: تستخدم للبحث عن عنصر باستخدام المعرف (ID) الخاص به. تُرجع العنصر الأول الذي يطابق المعرف.
querySelector: تستخدم للبحث عن أي عنصر بناءً على مُحدد CSS مثل الفئة (.class) أو المعرف (#id)، وتُرجع العنصر الأول الذي يطابق هذا المُحدد.
كيف يمكن إضافة عنصر جديد إلى DOM باستخدام JavaScript؟

JavaScript:
var newDiv = document.createElement("div");
newDiv.innerHTML = "Hello World!";
document.body.appendChild(newDiv);
ما هو الفرق بين innerHTML و textContent؟

innerHTML: يُستخدم للوصول إلى أو تعديل HTML داخل العنصر (يشمل العناصر الداخلية).
textContent: يُستخدم للوصول إلى أو تعديل النص داخل العنصر فقط (لا يشمل HTML).
كيف يمكن حذف عنصر من DOM؟

JavaScript:
var element = document.getElementById("myElement");
element.remove(); // أو
document.body.removeChild(element);
ما هي الأحداث events في DOM وكيف يمكن ربط حدث بعنصر؟

JavaScript:
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button clicked!");
});
ما هو classList وكيف يتم استخدامه؟

JavaScript:
var element = document.getElementById("myElement");
element.classList.add("newClass");
element.classList.remove("oldClass");
element.classList.toggle("active");
كيف يمكن الوصول إلى جميع العناصر التي تحمل نفس الفئة باستخدام JavaScript؟

JavaScript:
var elements = document.getElementsByClassName("myClass");
// أو
var elements = document.querySelectorAll(".myClass");
ما هو مفهوم "Event Bubbling" في DOM؟

كيف يمكن تعديل خصائص CSS لعنصر باستخدام JavaScript؟

JavaScript:
var element = document.getElementById("myElement");
element.style.backgroundColor = "blue";
element.style.fontSize = "20px";
ما هي خاصية window في DOM؟

ما الفرق بين nodeName و tagName؟

nodeName: تُرجع اسم العقدة (يمكن أن يكون عنصرًا أو نصًا أو تعليقًا).
tagName: تُرجع اسم العلامة (Tag) الخاصة بالعناصر فقط.
مثال:
JavaScript:
var element = document.getElementById("myElement");
console.log(element.nodeName); // "DIV"
console.log(element.tagName); // "DIV"
كيف يتم استخدام dataset في DOM؟

HTML:
<div id="myElement" data-role="admin" data-id="123"></div>
JavaScript:
var element = document.getElementById("myElement");
console.log(element.dataset.role); // "admin"
console.log(element.dataset.id); // "123"
ما هي خاصية firstChild و lastChild؟

firstChild: تُرجع أول عقدة فرعية للعنصر.
lastChild: تُرجع آخر عقدة فرعية للعنصر.
JavaScript:
console.log(element.firstChild); // أول عقدة (قد تكون عنصرًا أو نصًا)
console.log(element.lastChild); // آخر عقدة
ما هي خاصية nextSibling و previousSibling؟

nextSibling: تُرجع العقدة التالية لنفس المستوى.
previousSibling: تُرجع العقدة السابقة لنفس المستوى.
JavaScript:
console.log(element.nextSibling);
console.log(element.previousSibling);
ما الفرق بين nodeType و nodeValue؟

nodeType: تُرجع نوع العقدة (1: عنصر، 3: نص، 8: تعليق).
nodeValue: تُرجع قيمة العقدة (تُستخدم عادةً مع النصوص أو التعليقات).
JavaScript:
console.log(element.nodeType); // 1
console.log(element.nodeValue); // null إذا كان عنصرًا
ما هي خاصية parentNode؟

JavaScript:
console.log(element.parentNode);
ما الفرق بين offsetWidth و clientWidth؟

offsetWidth: عرض العنصر بما في ذلك الحواف (border) والتمرير (scrollbar).
clientWidth: عرض العنصر بدون الحواف والتمرير.
JavaScript:
console.log(element.offsetWidth);
console.log(element.clientWidth);
ما هي خاصية scrollHeight و scrollWidth؟

JavaScript:
console.log(element.scrollHeight);
console.log(element.scrollWidth);
ما هي خاصية hasChildNodes؟

JavaScript:
if (element.hasChildNodes()) {
console.log("Element has child nodes.");
}
ما هي خاصية innerHTML مقابل outerHTML؟

innerHTML: تُرجع أو تُعين المحتوى داخل العنصر.
outerHTML: تُرجع أو تُعين المحتوى بما في ذلك العنصر نفسه.
JavaScript:
console.log(element.innerHTML); // المحتوى الداخلي فقط
console.log(element.outerHTML); // العنصر مع المحتوى
ما هي خاصية attributes؟

JavaScript:
var attrs = element.attributes;
for (var i = 0; i < attrs.length; i++) {
console.log(attrs.name + " = " + attrs.value);
}
ما هي خاصية nodeValue وكيف تُستخدم؟

JavaScript:
var textNode = element.firstChild;
console.log(textNode.nodeValue); // محتوى النص
textNode.nodeValue = "New Text";
ما هو BOM في JavaScript؟

BOM هو اختصار لـ Browser Object Model، وهو عبارة عن واجهة (API) توفرها المتصفحات للتفاعل مع نافذة المتصفح نفسها. يمكن من خلاله التحكم في النافذة، التنقل بين الصفحات، والتعامل مع URL، الـ cookies، والتاريخ.
ما هي أهم الكائنات التابعة لـ BOM؟

window: الكائن الأعلى في BOM، يمثل نافذة المتصفح.
document: يمثل DOM الخاص بالصفحة.
navigator: للحصول على معلومات حول المتصفح والجهاز.
location: للتعامل مع URL الحالي.
history: للتعامل مع تاريخ التصفح.
screen: للحصول على معلومات عن الشاشة مثل العرض والارتفاع.
كيف يمكن فتح نافذة جديدة باستخدام BOM؟

يمكن استخدام الدالة window.open() لفتح نافذة جديدة:
JavaScript:
window.open("https://www.google.com", "_blank", "width=500,height=500");
كيف يمكن إعادة توجيه المستخدم إلى رابط آخر باستخدام BOM؟

يمكن استخدام location.href:
JavaScript:
location.href = "https://www.google.com";
كيف يمكن إعادة تحميل الصفحة الحالية؟

باستخدام
location.reload()
: JavaScript:
location.reload(); // تعيد تحميل الصفحة
ما الفرق بين location.href و location.assign()؟

location.href: ينقل المستخدم مباشرة إلى الصفحة الجديدة.
location.assign()
: أيضًا ينقل المستخدم إلى الصفحة الجديدة ولكنه يضيفها إلى سجل التصفح (يمكنك العودة للصفحة السابقة).
كيف يمكننا التحقق من اسم المتصفح؟

باستخدام
navigator.userAgent
: JavaScript:
console.log(navigator.userAgent); // طباعة معلومات المتصفح
كيف يمكننا العودة إلى الصفحة السابقة في التاريخ؟

باستخدام history.back() أو التنقل بين الصفحات عبر history.go():
JavaScript:
history.back(); // للرجوع إلى الصفحة السابقة
history.go(-1); // رجوع صفحة واحدة للخلف
كيف يمكننا الحصول على عرض وارتفاع نافذة المتصفح؟

باستخدام window.innerWidth و window.innerHeight:
JavaScript:
console.log(window.innerWidth); // عرض النافذة
console.log(window.innerHeight); // ارتفاع النافذة
كيف نستخدم setTimeout و setInterval في BOM؟

setTimeout: تنفيذ كود مرة واحدة بعد فترة معينة.
setInterval: تنفيذ كود بشكل متكرر كل فترة زمنية معينة.
مثال:
JavaScript:
// setTimeout: ينفذ مرة واحدة
setTimeout(() => {
console.log("مرحباً بعد 3 ثواني");
}, 3000);
// setInterval: يتكرر كل ثانية
setInterval(() => {
console.log("مرحباً كل ثانية");
}, 1000);
كيف يمكننا إيقاف مؤقت تم تشغيله باستخدام setInterval؟

باستخدام clearInterval:
JavaScript:
let timer = setInterval(() => {
console.log("مرحباً");
}, 1000);
// إيقاف المؤقت بعد 5 ثوانٍ
setTimeout(() => {
clearInterval(timer);
}, 5000);
ما هي طريقة فحص عرض الشاشة بالكامل؟

باستخدام screen.width و screen.height:
JavaScript:
console.log(screen.width); // عرض الشاشة
console.log(screen.height); // ارتفاع الشاشة
ما هو الـ destructuring؟

الـ destructuring هو طريقة لاستخراج القيم من المصفوفات (Arrays) أو الخصائص من (Objects) وتخزينها في متغيرات بطريقة مختصرة وسهلة.
كيف يتم استخدام destructuring مع المصفوفات؟

يمكنك استخدام الأقواس المربعة [ ] لاستخراج القيم من المصفوفة.
مثال:
JavaScript:
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1 2 3
ماذا يحدث إذا حاولت استخراج قيمة غير موجودة؟

إذا حاولت استخراج قيمة غير موجودة، سيتم تعيين المتغير إلى undefined.
مثال:
JavaScript:
const numbers = [1, 2];
const [a, b, c] = numbers;
console.log(c); // undefined
كيف يمكن استخدام قيمة افتراضية في الـ destructuring؟

يمكنك تعيين قيمة افتراضية باستخدام علامة =.
مثال:
JavaScript:
const numbers = [1];
const [a, b = 2] = numbers;
console.log(a, b); // 1 2
كيف يتم استخدام destructuring مع الكائنات؟

يتم استخدام الأقواس المعقوفة { } لاستخراج القيم من object
مثال:
JavaScript:
const person = { name: "Ali", age: 25 };
const { name, age } = person;
console.log(name, age); // "Ali" 25
ماذا لو أردت إعادة تسمية المتغير عند استخراج قيمة من object ؟

يمكنك إعادة تسمية المتغير باستخدام صيغة key: newVariableName.
مثال:
JavaScript:
const person = { name: "Ali", age: 25 };
const { name: fullName, age } = person;
console.log(fullName, age); // "Ali" 25
كيف يمكن استخدام destructuring مع القيم المتداخلة؟

يمكنك استخدام destructuring لاستخراج القيم من objects أو المصفوفات المتداخلة.
مثال:
JavaScript:
const person = { name: "Ali", address: { city: "Riyadh", zip: 12345 } };
const { address: { city, zip } } = person;
console.log(city, zip); // "Riyadh" 12345
كيف يمكن استخدام destructuring مع المصفوفات المتداخلة؟

استخدم نفس الطريقة مع الأقواس المربعة [ ].
مثال:
JavaScript:
const numbers = [1, [2, 3]];
const [a, [b, c]] = numbers;
console.log(a, b, c); // 1 2 3
كيف يتم استخدام destructuring مع الدوال؟

يمكنك استخدام destructuring للحصول على القيم من الوسيطات (parameters) مباشرة.
مثال:
JavaScript:
function printPerson({ name, age }) {
console.log(Name: ${name}, Age: ${age});
}
const person = { name: "Ali", age: 25 };
printPerson(person); // Name: Ali, Age: 25
هل يمكن دمج destructuring مع البقية (Rest Parameters)؟

نعم، يمكنك استخدام عامل الأنتشار ... للحصول على القيم المتبقية.
مثال:
مع المصفوفات:
JavaScript:
const numbers = [1, 2, 3, 4];
const [a, b, ...rest] = numbers;
console.log(a, b, rest); // 1 2 [3, 4]
مع objects :
JavaScript:
const person = { name: "Ali", age: 25, city: "Riyadh" };
const { name, ...rest } = person;
console.log(name, rest); // "Ali" { age: 25, city: "Riyadh" }
يعني إيه Set في JavaScript؟

إزاي أعمل Set جديد؟

JavaScript:
let mySet = new Set();
console.log(mySet); // Set {}
إزاي أضيف عناصر لـ Set؟

JavaScript:
let mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(1); // مكرر
console.log(mySet); // Set {1, 2}
إزاي أشوف لو العنصر موجود في الـ Set؟

JavaScript:
let mySet = new Set([1, 2, 3]);
console.log(mySet.has(2)); // true
console.log(mySet.has(5)); // false
إزاي أشيل عنصر من الـ Set؟
بتستخدم الميثود delete(). JavaScript:
let mySet = new Set([1, 2, 3]);
mySet.delete(2);
console.log(mySet); // Set {1, 3}
إزاي أمسح كل العناصر في الـ Set؟

JavaScript:
let mySet = new Set([1, 2, 3]);
mySet.clear();
console.log(mySet); // Set {}
إزاي أجيب عدد العناصر في الـ Set؟

JavaScript:
let mySet = new Set([1, 2, 3, 4]);
console.log(mySet.size); // 4
إزاي أعمل لوب على عناصر الـ Set؟

باستخدام for...of:
JavaScript:
let mySet = new Set([1, 2, 3]);
for (let item of mySet) {
console.log(item);
}
// 1
// 2
// 3
باستخدام forEach:
JavaScript:
mySet.forEach(item => {
console.log(item);
});
// 1
// 2
// 3
الفرق بين Set و Array؟

الـ Set ملوش فهرسة (index) زي الـ Array.
إزاي أحوّل Set لـ Array؟

باستخدام Array.from():
JavaScript:
let mySet = new Set([1, 2, 3]);
let myArray = Array.from(mySet);
console.log(myArray); // [1, 2, 3]
باستخدام spread operator:
JavaScript:
let myArray = [...mySet];
console.log(myArray); // [1, 2, 3]
الفرق بين Set و WeakSet في JavaScript

Set: بيقبل أي نوع من البيانات (Strings, Numbers, Objects, Arrays, إلخ).
JavaScript:
let mySet = new Set();
mySet.add(1); // رقم
mySet.add("hello"); // نص
mySet.add({ name: "Ali" }); // كائن
console.log(mySet);
WeakSet: بيقبل الكائنات (Objects) بس، يعني لازم القيمة تكون Object أو Array. ماينفعش تضيف أرقام أو نصوص.
JavaScript:
let myWeakSet = new WeakSet();
myWeakSet.add({ name: "Ali" }); // صح
// myWeakSet.add(1); // غلط - يرمي خطأ
console.log(myWeakSet);

Set: بيحتفظ بالعناصر حتى لو مافيش متغير تاني بيشير ليها. يعني الكائنات اللي جوه الـ Set مش بتتحذف لو ما بقتش مستخدمة.
JavaScript:
let mySet = new Set();
let obj = { name: "Ali" };
mySet.add(obj);
obj = null; // الكائن لسه موجود جوه الـ Set
console.log(mySet); // Set { { name: "Ali" } }
WeakSet: بيربط الكائنات بمرجعية ضعيفة (weak reference)، يعني لو ما بقاش فيه متغير بيشير للكائن، بيتم حذفه تلقائيًا (garbage collected).
JavaScript:
let myWeakSet = new WeakSet();
let obj = { name: "Ali" };
myWeakSet.add(obj);
obj = null; // الكائن بيتحذف تلقائيًا
console.log(myWeakSet); // WeakSet {}

Set: بيتيح ليك تعرف عدد العناصر باستخدام size، والعناصر لازم تكون فريدة.
JavaScript:
let mySet = new Set([1, 2, 2, 3]);
console.log(mySet.size); // 3

Set: ممكن تعمل تكرار على العناصر باستخدام for...of أو forEach.
JavaScript:
let mySet = new Set([1, 2, 3]);
mySet.forEach(item => console.log(item));

Set: لما تحتاج تخزين أي نوع بيانات مع ضمان إنها تكون فريدة (Unique values).
JavaScript:
let uniqueValues = new Set([1, 2, 3, 1, 2]);
console.log(uniqueValues); // Set {1, 2, 3}
JavaScript:
let cache = new WeakSet();
let user = { id: 1 };
cache.add(user);
user = null; // object بيتشال من الـ WeakSet
الخلاصة
Set: مرن أكتر ومناسب للتعامل مع أنواع مختلفة من البيانات.
WeakSet: متخصص للتعامل مع الكائنات، وبيساعد في إدارة الذاكرة (Memory Management) بكفاءة.