ملخص نقاط معرفة جافا سكريبت: DOM

1. مقدمة إلى DOM

1.1 ما هو DOM

يتكون تنفيذ JavaScript الكامل من الأجزاء الثلاثة المختلفة التالية:

• Core (ECMAScript): الجزء الأساسي من اللغة، والذي يصف بناء الجملة والكائنات الأساسية للغة.

• نموذج كائن المستند (DOM): معيار تشغيل مستند صفحة الويب، ويصف الطرق والواجهات لمعالجة محتوى صفحة الويب.

• نموذج كائن المتصفح (BOM): أساس عمليات نافذة العميل والمتصفح، ويصف طرق وواجهات التفاعل مع المتصفح.

نموذج كائن المستند ( Document Object Model，简称DOM ) هو编程接口قياسية موصى بها من قبل منظمة W3C لمعالجة لغة الترميز القابلة للتوسيع (HTML أو XML).
لقد حددت W3C سلسلة من واجهات DOM التي يمكن من خلالها تغيير محتوى صفحات الويب وبنيتها ونمطها.

اللغة الرسمية: نموذج كائن المستند (DOM) هو واجهة برمجة قياسية موصى بها من قبل منظمة W3C لمعالجة لغات الترميز القابلة للتوسيع. إنها واجهة برمجة تطبيقات (API) مستقلة عن النظام الأساسي واللغة يمكنها الوصول ديناميكيًا إلى البرامج والبرامج النصية وتحديث محتواها وبنيتها ونمط مستندات www (يتم تحديد مستندات HTML وXML من خلال أقسام الوصف). يمكن معالجة المستند بشكل أكبر ويمكن إضافة نتائج المعالجة إلى الصفحة الحالية. DOM عبارة عن مستند API قائم على الشجرة ويتطلب تمثيل المستند بأكمله في الذاكرة أثناء المعالجة. واجهة برمجة التطبيقات البسيطة الأخرى هي SAX المستندة إلى الأحداث، والتي يمكن استخدامها لمعالجة مستندات XML الكبيرة جدًا، نظرًا لكبر حجمها، فهي غير مناسبة لمعالجة كل شيء في الذاكرة.

1.2 شجرة DOM

• المستند: الصفحة عبارة عن مستند. يتم استخدام المستند في DOM لتمثيل
• العناصر: جميع العلامات الموجودة في الصفحة هي عناصر، ويتم استخدام العنصر في DOM لتمثيل
• العقد: كل المحتوى الموجود في صفحة الويب هو عقد (التسميات، والسمات، والنص، التعليقات، وما إلى ذلك). استخدم العقدة في DOM لتمثيل

DOM 把以上内容都看做是对象

2. احصل على العناصر

2.1 تُستخدم كيفية الحصول على

DOM بشكل أساسي لتشغيل العناصر في التطوير الفعلي.
كيف نحصل على العناصر الموجودة في الصفحة يمكنك الحصول على العناصر الموجودة في الصفحة بالطرق التالية:

• الحصول على أساس معرف
• الحصول على اسم العلامة
• الحصول على عناصر خاصة
• عبر طرق جديدة في HTML5
• 
  

2.2 الحصول على المعرف

استخدم طريقة getElementById() للحصول على كائن العنصر بالمعرف.

document.getElementById('id');

استخدم console.dir() لطباعة كائن العنصر الذي حصلنا عليه ولعرض الخصائص والأساليب الموجودة في الكائن بشكل أفضل.

2.3 يعتمد على اسم العلامة

استخدم طريقة getElementsByTagName() لإرجاع مجموعة من الكائنات باسم العلامة المحدد.

document.getElementsByTagName('tag name');

ملاحظة:

1. نظرًا لأن ما نحصل عليه هو مجموعة من الكائنات، فإننا نحتاج إلى الاجتياز إذا أردنا تشغيل العناصر الموجودة بداخلها.
2. الحصول على كائن العنصر ديناميكي

2.4 الحصول على document.getElementsByClassName('class name') من خلال الطريقة الجديدة لـ HTML5

؛ // إرجاع مجموعة كائنات العنصر وفقًا لاسم الفئة document.querySelector('selector'); المحدد المحدد كائن العنصر الأول document.querySelectorAll('selector'); // العودة وفقًا للمحدد المحدد

注意：
يجب وضع علامة على المحددات في querySelector وquerySelectorAll، على سبيل المثال: document.querySelector('#nav');

2.5 احصل على عناصر خاصة (نص، html)

1. احصل على عنصر النص

doucumnet.body // قم بإرجاع كائن عنصر

النص 2. احصل على عنصر html

document.documentElement // قم بإرجاع كائن عنصر html

3. أساسيات الحدث

3.1 نظرة عامة على الحدث

تمكن JavaScript لنا لإنشاء صفحات ديناميكية، والأحداث هي سلوكيات يمكن اكتشافها بواسطة JavaScript.
简单理解： 触发--- 响应机制。
يمكن لكل عنصر في صفحة الويب إنشاء أحداث معينة يمكنها تشغيل JavaScript، على سبيل المثال، يمكننا إنشاء حدث عندما ينقر المستخدم على زر، ثم نقوم بتنفيذ عمليات معينة.

3.2 ثلاثة عناصر للأحداث:

1. مصدر الحدث (من)
2. نوع الحدث (أي حدث)
3. معالج الحدث (ما يجب فعله)

الحالة:

var btn = document.getElementById('btn');
بتن.ونكليك = وظيفة () {
 تنبيه ("كيف حالك")؛ 
};

3.3 خطوات تنفيذ الأحداث:

1. الحصول على مصدر الحدث،
2. وتسجيل الحدث (ربط الحدث)
3. ، وإضافة معالج الحدث (في شكل تعيين وظيفة)

3.3 أحداث الماوس الشائعة

注：以下图片的事件只是常见的并不代表所有

3.4 تحليل العناصر الثلاثة

للأحداث:
1. مصدر الحدث (ما الذي تريد العمل عليه)

2. الحدث (ما تريد القيام به لتحقيق تأثير التفاعل المطلوب)

3. وظيفة المعالجة (كيف تريد أن يبدو الهدف بعد استمرار الحدث)

4 عنصر التشغيل

يمكن لعمليات JavaScript DOM تغيير محتوى صفحات الويب وبنيتها ونمطها. يمكننا استخدام عناصر تشغيل DOM لتغيير المحتوى والسمات وما إلى ذلك داخل العناصر. لاحظ أن ما يلي هو كل السمات

4.1. قم بتغيير محتوى العنصر

element.innerText

من موضع البداية إلى موضع النهاية، ولكنه يزيل علامة html وفي الوقت نفسه، ستؤدي المسافات وفواصل الأسطر أيضًا إلى إزالة

المحتوى بالكامل من البداية الموضع إلى الموضع النهائي لـ

element.innerHTML

4.2 عمليات سمة العنصر المشترك

InternalText وInnerHTML لتغيير محتوى العنصر.
سرك، هريف
id، alt، title

4.3 عمليات سمات عناصر النموذج

يمكنك استخدام DOM لتشغيل سمات عناصر النموذج التالية:

النوع، القيمة، المحدد، المحدد، المعطل

4.4 عمليات سمات النمط

يمكننا تعديل الحجم واللون والموضع والأنماط الأخرى العناصر من خلال JS.

1. element.style عملية نمط مضمنة
2. element.className عملية نمط اسم الفئة

注意：
1.JS 里面的样式采取驼峰命名法比如fontSize、 backgroundColor
2.JS 修改style 样式操作，产生的是行内样式，CSS 权重比较高

التشغيل هي المحتوى الأساسي لـ DOM.

4.5 التفكير الاستبعادي

إذا كانت هناك نفس مجموعة العناصر، ونريد أن ينفذ عنصر معين نمطًا معينًا، فنحن بحاجة إلى استخدام خوارزمية الحلقة الحصرية:

1. مسح أنماط جميع العناصر (قتل الأشخاص الآخرين)
2. وتعيين النمط للعنصر الحالي ( ترك نفسي وشأني).
3. لاحظ أنه لا يمكن عكس الأمر، اقتل الأشخاص الآخرين أولاً، ثم قم بتعيين نفسك

4.6 تشغيل السمات المخصصة

1. احصل على قيمة السمة

• element.property احصل على قيمة السمة.
• element.getAttribute('attribute');

الفرق:

• تحصل element.attribute على قيمة السمة المضمنة (السمة التي تأتي مع العنصر نفسه)
• element.getAttribute('attribute'); تحصل بشكل أساسي على السمات المخصصة (القياسية) المخصصة خاصية المبرمجين لدينا

2. قم بتعيين قيمة الخاصية

• element.property = 'value' قم بتعيين قيمة الخاصية المضمنة.
• element.setAttribute('Attribute', 'Value');

الفرق:

element.Attribute

• يعين قيمة السمة المضمنة
• element.setAttribute('Attribute')

• ; ');

4.7 الخصائص المخصصة H5

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

يتم الحصول على السمات المخصصة من خلال getAttribute('attribute').
ومع ذلك، يمكن أن تسبب بعض السمات المخصصة الغموض بسهولة، ومن الصعب تحديد ما إذا كانت سمات مضمنة أو سمات مخصصة للعنصر.

أضاف H5 سمات مخصصة جديدة إلينا:

1. تعيين سمات H5 المخصصة

ينص H5 على أنه يجب استخدام بداية بيانات السمة المخصصة كاسم للسمة وتعيين قيمة.

أو استخدم JS لتعيين

element.setAttribute('data-index', 2)

2. احصل على سمات H5 المخصصة <br/> التوافق احصل على element.getAttribute('data-index');
أضاف H5 element.dataset.index أو element.dataset['index']، وهو مدعوم فقط في IE 11.

5. تستخدم عمليات العقدة

عادة طريقتين للحصول على العناصر:
1. استخدم الطرق التي يوفرها DOM للحصول على العناصر

• document.getElementById()
• document.getElementsByTagName()
• document.querySelector، وما إلى ذلك.  المنطق ليس قويًا ومرهقًا

• استخدم

العلاقة الهرمية للعقدة للحصول على العناصر

-

• العلاقة بين العقدة والأخوة للحصول على العناصر
• منطقية، ولكنها أقل توافقًا قليلاً.

لكلتا

الطريقتين الحصول على عقد العناصر، والتي سيتم استخدامها لاحقًا، ولكن عمليات العقدة أبسط

العقدة (التسمية، السمة، النص، التعليق، وما إلى ذلك). في DOM، استخدم العقدة لتمثيلها.
يمكن الوصول إلى جميع العقد في شجرة HTML DOM من خلال JavaScript، ويمكن تعديل أو إنشاء أو حذف جميع عناصر HTML (العقد).

بشكل عام، تحتوي العقد على ثلاث سمات أساسية على الأقل: نوع العقدة (نوع العقدة)، اسم العقدة (اسم العقدة)، قيمة العقدة (قيمة العقدة).

• عقدة العنصرNodeType هي 1،
• وNodeType لعقدة السمة هي 2،
• وNodeType للعقدة النصية هي 3 (تتضمن العقد النصية النص والمسافات وفواصل الأسطر وما إلى ذلك).

我们在实际开发中，节点操作主要操作的是元素节点

5.3

المستوى

شجرة DOM لتقسيم العقد بالنسبة للعلاقات الهرمية المختلفة، والأكثر شيوعًا هو父子兄层级关系

1.

العقدة الأصلية

.parentNode

• يمكن لخاصيةparentNode إرجاع العقدة الأصلية لعقدة معينة. لاحظ أنها أحدث عقدة أصلية.
• إذا كانت العقدة المحددة لا تحتوي على عقدة أصلية، فسيتم إرجاع القيمة الخالية

.

ChildNodes (القياسية)

parentNode.childNodes مجموعة من العقد الفرعية للعقدة المحددة، وهي مجموعة يتم تحديثها على الفور.
ملاحظة: تحتوي القيمة المرجعة على جميع العقد الفرعية، بما في ذلك عقد العناصر، والعقد النصية، وما إلى ذلك.
إذا كنت تريد فقط الحصول على عقد العناصر بالداخل، فستحتاج إلى التعامل معها بشكل خاص. لذلك، لا نؤيد بشكل عام استخدام ChildNodes

var ul = document.querySelector('ul');for(var i = 0; i < ul.childNodes.length;i++) {if (ul.childNodes[i]. نوع العقدة == 1 ) {
 // ul.childNodes[i] هي عقدة العنصر console.log(ul.childNodes[i]);}}

2. parentNode.children (غير قياسي)

parentNode.children هي خاصية للقراءة فقط تُرجع جميع عقد العناصر الفرعية. تقوم فقط بإرجاع عقد العناصر الفرعية، ولا يتم إرجاع العقد الأخرى (وهذا ما نركز عليه).
على الرغم من أن الأطفال غير قياسيين، إلا أنهم مدعومون من قبل متصفحات مختلفة، لذلك يمكننا استخدام

3. parentNode.firstChild

firstChild بأمان لإرجاع العقدة الفرعية الأولى، أو فارغة إذا لم يتم العثور عليها. وبالمثل، يتم تضمين كافة العقد.

4. parentNode.lastChild

lastChild يُرجع العقدة الفرعية الأخيرة، أو فارغة إذا لم يتم العثور عليها. وبالمثل، فإنه يحتوي أيضًا على جميع العقد

5. parentNode.firstElementChild

firstElementChild يُرجع عقدة العنصر الفرعي الأولى، إذا لم يتم العثور عليها، يُرجع null.

6. parentNode.lastElementChild

lastElementChild يُرجع آخر عقدة عنصر فرعي، أو فارغة إذا لم يتم العثور عليها.
注意：这两个方法有兼容性问题，IE9 以上才支持

في التطوير الفعلي، تحتوي firstChild وlastChild على عقد أخرى، وهو أمر غير مناسب للعمل، كما أن firstElementChild وlastElementChild لديهما مشكلات في التوافق عقدة العنصر أو ماذا عن عقدة العنصر الفرعي الأخيرة؟
الحل:

1. إذا كنت تريد عقدة العنصر الفرعي الأولى، فيمكنك استخدامparentNode.chilren[0]
2. إذا كنت تريد عقدة العنصر الفرعي الأخيرة، فيمكنك استخدام

parentNode.chilren[parentNode.chilren.length - 1]

نموذج كائن المستند

الملخص

نموذج الكائن (DOM للاختصار) هو واجهة برمجة قياسية موصى بها من قبل منظمة W3C لمعالجة لغة الترميز القابلة للتوسيع (HTML أو XML).

لقد حددت W3C سلسلة من واجهات DOM التي يمكن من خلالها تغيير محتوى صفحات الويب وبنيتها ونمطها.

بالنسبة لجافا سكريبت، من أجل تمكين جافا سكريبت من تشغيل HTML، تمتلك جافا سكريبت مجموعتها الخاصة من واجهات برمجة DOM.

بالنسبة لـ HTML، يجعل DOM HTML من شجرة DOM.

عنصر DOM الذي يحتوي على المستندات والعناصر والعقد هو كائن، لذلك يُسمى نموذج كائن المستند

. فيما يتعلق بعمليات DOM، فإننا نركز بشكل أساسي على تشغيل العناصر. تتضمن بشكل أساسي الإنشاء والإضافة والحذف والتعديل والاستعلام وتشغيل السمة وتشغيل الحدث.