عنصر script في HTML واستخدام خاصية src
تُستخدم خاصية src في عنصر <script> للإشارة إلى موقع ملف السكربت.
يمكن أن يكون الملف المشار إليه محليًا (باستخدام مسار نسبي) أو مستضافًا في مكان آخر (باستخدام مسار مطلق).
- باستخدام مسار نسبي:
<script src="./script.js"></script>- باستخدام مسار مطلق:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>خاصية defer في عنصر script في HTML
تُستخدم خاصية defer في وسم <script> كخاصية بوليانية للإشارة إلى أن السكربت يمكن تحميله ولكن لا يتم تنفيذه حتى يتم تحليل مستند HTML بالكامل. ستعمل فقط للسكربتات المرتبطة خارجيًا (مع خاصية src)، ولن يكون لها أي تأثير إذا تم تطبيقها على سكربت داخلي.
في الكود التالي، سيتم تحميل وتحليل وسم <h1> قبل تنفيذ السكربت بفضل خاصية defer.
<body>
<script src="main.js" defer></script>
<h1>Hello</h1>
</body>خاصية async في وسم script في HTML
يتم تحميل السكربتات بشكل متزامن كما تظهر في ملف HTML، قبل تحميل وتحليل HTML اللاحق. يمكن استخدام خاصية async لتحميل السكربتات بشكل غير متزامن، بحيث يتم تحميلها في الخلفية دون منع محلل HTML من الاستمرار.
في الكود التالي، سيتم تحميل السكربت بشكل غير متزامن في الخلفية، دون منع محلل HTML.
<body>
<script src="main.js" async></script>
<h1>Hello world!</h1>
</body>عنصر script في HTML
يمكن لعنصر <script> في HTML أن يحتوي على كود JavaScript أو يشير إليه في ملف HTML. يحتاج عنصر <script> إلى وسم فتح ووسم إغلاق، ويمكن تضمين كود JavaScript بين الوسمين.
<script>
console.log("Hello world!");
</script>طريقة removeChild()
تقوم طريقة removeChild() بإزالة عنصر فرعي محدد من عنصر الأب. يمكن استخدام هذه الطريقة عن طريق استدعاء removeChild() على العقدة الأب التي نريد إزالة ابنها، وتمرير العقدة الفرعية كوسيط.
في الكود التالي، نحن نزيل عنصر iceCream من عنصر groceryList.
const groceryList = document.getElementById('groceryList');
const iceCream = document.getElementById('iceCream');
groceryList.removeChild(iceCream);خاصية parentNode للعناصر
يمكن استخدام خاصية parentNode للعناصر لإرجاع مرجع إلى عقدة الأب المباشرة. يمكن استخدام parentNode على أي عقدة.
في الكود التالي، نحن نستدعي الخاصية parentNode للعقدة #first-child للحصول على مرجع إلى العنصر #parent.
<div id="parent">
<p id="first-child">Some child text</p>
<p id="second-child">Some more child text</p>
</div>
<script>
const firstChild = document.getElementById('first-child');
firstChild.parentNode; // مرجع إلى العنصر #parent
</script>طريقة document.createElement()
تقوم طريقة document.createElement() بإنشاء وإرجاع مرجع إلى عقدة عنصر جديدة بالاسم المحدد.
لا تقوم document.createElement() فعليًا بإضافة العنصر الجديد إلى DOM، يجب إرفاقه باستخدام طريقة مثل element.appendChild().
const newButton = document.createElement("button");خاصية innerHTML للعناصر
يمكن استخدام خاصية innerHTML للوصول إلى HTML الذي يتكون من محتويات العنصر.
يمكن استخدام innerHTML للوصول إلى القيمة الحالية لمحتويات العنصر أو لإعادة تعيينها.
في الكود التالي، نحن نعيد تعيين المحتوى الداخلي للعنصر box إلى عنصر فقرة يحتوي على النص “Goodbye”.
<box>
<p>Hello there!</p>
</box>
<script>
const box = document.querySelector('box');
// يُظهر '<p>Hello there!</p>':
console.log(box.innerHTML)
// يُعيد تعيين القيمة:
box.innerHTML = '<p>Goodbye</p>'
</script>كائن document
يوفر كائن document واجهة JavaScript للوصول إلى DOM. يمكن استخدامه لأغراض متنوعة بما في ذلك الإشارة إلى عنصر <body>، والإشارة إلى عنصر معين باستخدام معرف، وإنشاء عناصر HTML جديدة، إلخ.
يمكن استخدام الكود التالي للحصول على مرجع إلى عنصر <body> باستخدام كائن document.
const body = document.body;طريقة document.getElementById()
تعيد طريقة document.getElementById() العنصر الذي يحتوي على الخاصية id بالقيمة المحددة.
تعيد document.getElementById() قيمة null إذا لم يوجد أي عنصر بالقيمة المحددة للمعرف.
يجب أن يكون المعرف فريدًا داخل الصفحة. ومع ذلك، إذا كان هناك أكثر من عنصر واحد بالقيمة المحددة للمعرف، فإن طريقة getElementById() تعيد أول عنصر في كود المصدر.
// حفظ مرجع إلى العنصر الذي يحتوي على المعرف 'demo':
const demoElement = document.getElementById('demo');طريقة .querySelector()
تقوم طريقة .querySelector() باختيار أول عنصر فرعي/نسل يطابق وسيط المُحدِّد.
يمكن استدعاؤها على كائن document للبحث في المستند بأكمله أو على مثال عنصر واحد للبحث في نسل ذلك العنصر.
في الكود التالي، نستخدم .querySelector() لاختيار أول عنصر div في الصفحة، وأول عنصر يحمل فئة button داخل عنصر .main-navigation.
// اختيار أول <div>
const firstDiv = document.querySelector('div');
// اختيار أول عنصر .button داخل .main-navigation
const navMenu = document.getElementById('main-navigation');
const firstButtonChild = navMenu.querySelector('.button');كائن document.body
تعيد document.body مرجعًا إلى محتويات عنصر <body> في مستند/صفحة HTML. يحتوي عنصر <body> على جميع المحتويات المرئية للصفحة.
خاصية onclick للعناصر
يمكن استخدام خاصية onclick لتعيين دالة ليتم تشغيلها عند النقر على العنصر. على سبيل المثال، سيضيف الكود التالي عنصر <li> جديد في كل مرة ينقر فيها المستخدم على العنصر الذي يحتوي على المعرف addItem.
let element = document.getElementById('addItem');
element.onclick = function() {
let newElement = document.createElement('li');
document.getElementById('list').appendChild(newElement);
};طريقة element.appendChild()
تقوم طريقة element.appendChild() بإلحاق عنصر كآخر ابن للأب.
في الكود التالي، سيتم إلحاق عنصر <li> تم إنشاؤه حديثًا كآخر ابن لعنصر HTML الذي يحتوي على المعرف list.
var node1 = document.createElement('li');
document.getElementById('list').appendChild(node1);خاصية style للعناصر
يمكن استخدام خاصية style للوصول إلى أو تعيين قواعد أنماط CSS للعنصر. للقيام بذلك، تُعيّن القيم إلى سمات style.
في مثال الكود، يحتوي blueElement على عنصر HTML بالمعرف colorful-element. عن طريق تعيين سمة backgroundColor للخاصية style إلى blue، تصبح خاصية CSS background-color زرقاء.
لاحظ أيضًا أنه إذا كانت خاصية CSS تحتوي على واصلة مثل font-family أو background-color، يتم استخدام تدوين Camel Case في JavaScript لاسم السمة، لذا تصبح background-color هي backgroundColor.
let blueElement = document.getElementById('colorful-element');
blueElement.style.backgroundColor = 'blue';العقد في شجرة DOM
العقدة في شجرة DOM هي تقاطع فرعين يحتويان على بيانات. يمكن أن تمثل العقد عناصر HTML أو نصوصًا أو سمات إلخ. العقدة الجذر هي العقدة الأعلى في الشجرة. توضح الرسوم التوضيحية تمثيلًا لـ DOM يحتوي على أنواع مختلفة من العقد.
HTML DOM
DOM هو واجهة بين لغات البرمجة التركيبية وهيكل صفحة الويب. يقوم المتصفح بإنشاء نموذج كائن المستند (DOM) لكل صفحة ويب يقوم بعرضها. يسمح DOM للغات البرمجة التركيبية بالوصول إلى صفحة الويب وتعديلها. بمساعدة DOM، يمكن لـ JavaScript إنشاء HTML ديناميكي.
الوصول إلى سمات HTML في DOM
تسمح عقد DOM من النوع Element بالوصول إلى نفس السمات المتاحة لعناصر HTML. على سبيل المثال، بالنسبة لعنصر HTML التالي، ستكون سمة id متاحة من خلال DOM.
<h1 id="
heading">Welcome!</h1>نموذج كائن المستند (Document Object Model)
نموذج كائن المستند أو DOM هو تمثيل لمستند (مثل صفحة HTML) كمجموعة من الكائنات. في حين أنه يُستخدم غالبًا لتمثيل مستندات HTML، وتستخدم معظم متصفحات الويب واجهات JavaScript مع DOM، فهو كائن محايد من حيث اللغة.
DOM يشبه الشجرة وهرمي، مما يعني أنه هناك كائن علوي واحد، وتنحدر منه كائنات أخرى في بنية متفرعة.
العلاقة بين الأب والابن في DOM
تعكس العلاقة بين الأب والابن في DOM بناء جملة التعشيق في HTML.
العناصر التي تتعشش داخل وسم الفتح والإغلاق لعنصر آخر هي أبناء لهذا العنصر في DOM.
في الكود التالي، تكون وسمتا <p> أبناءً للوسم <body>، والوسم <body> هو الأب لكل من وسمتي <p>.
<body>
<p>first child</p>
<p>second child</p>
</body>