هناك ثلاثة أنواع رئيسية من العقد: العقد العناصر وعقد السمة والعقد النصية.
الشيء الرئيسي في DOM هو إضافة العقد وحذفها وتعديلها والتحقق منها وعقد السمة. سيؤدي ما يلي إلى تقديم العمليات على عقد العناصر والعمليات على عقد السمة على التوالي.
العنصر العقدة
يفحص
قبل الإضافة ، حذف وتعديل DOM ، يجب عليك أولاً العثور على العنصر المقابل. طرق البحث المحددة هي كما يلي:
getElementById () // احصل على عقدة واحدة getElementsByTagName () // احصل
في الوقت نفسه ، يمكنك أيضًا استخدام سمات عقدة العنصر للحصول على العقد الأم والطفل والعقد النصية:
العقد الأطفال
Node.ChildNodes // الحصول على قائمة العقدة الطفل لاحظ أن فواصل الأسطر يتم حسابها كعقد نصية في المتصفح. إذا حصلت على قائمة العقدة بهذه الطريقة ، فسيكون التصفية مطلوبًا node.firstchild
عقدة الوالدين
node.parentnode // إرجاع عقدة الأصل.
العقد المواطن
Node.PreviousSibling // إرجاع العقدة السابقة ، إن لم يكن ، إرجاع nullnode.nextsibling // إرجاع العقدة التالية
يزيد
لإضافة عقدة جديدة ، يجب أولاً إنشاء عقدة ، ثم أدخل العقدة التي تم إنشاؤها حديثًا في DOM. لذلك ، فإن ما يلي هو طرق إنشاء العقد وإدخال العقد ، ويتم تقديم طريقة تكرار العقد أيضًا في إنشاء العقد.
إنشاء عقدة
CreateElement () // إنشاء عقدة عنصر جديدة وفقًا لاسم العلامة المحدد
قم بإنشاء مقتطفات رمز (لتجنب تحديث DOM المتكرر ، يمكنك إنشاء قصاصات رمز أولاً ، ثم إضافتها إلى DOM بعد الانتهاء من جميع عمليات العقدة)
CreateOcumentFragment ()
عقدة النسخ المتماثل
clonednode = node.clonenode (boolean) // هناك معلمة واحدة فقط ، تمر في قيمة منطقية ، يعني صحيح نسخ جميع العقد الفرعية تحت العقدة ؛ خطأ يعني نسخ العقدة فقط
أدخل العقدة
/*insert node*/parentnode.appendChild (childnode) ؛ // إلحاق عقدة جديدة حتى نهاية قائمة العقدة الفرعية ParentNode.InserTBefore (NewNode ، TargetNode) ؛ // أدخل newNode في TargetNode/*insert html code*/node.insertadjacenthtml ('QuaretBegin' ، html) ؛ // إدراج رمز node.insertadjacenthtml ('Afterbegin' ، html) ؛ // إدراج رمز node.insertadjacenthtml ('Afterbegin' ، html) ؛ // إدراج رمز node.insertadjacenthtml ('قبل "، html) ؛ // أدخل الكود بعد آخر عنصر طفل من العنصر node.insertadjacenthtml ('بعد "، html) ؛ // أدخل الرمز بعد العنصراستبدال العقد
parentnode.replace (newNode ، targetNode) ؛ // استبدل TargetNode مع NewNode
يمسح
إزالة العقد
parentnode.removechild (childnode) ؛ // قم بإزالة node node.parentnode.removechild (العقدة) ؛ // استخدم دون معرفة العقدة الأصل
عقدة السمة
تتمثل عقد سمة التشغيل في إضافة أنماط DOM وحذفها وتعديلها والتحقق منها. هناك طرق تشغيل مختلفة للأساليب في الخط ، والأنماط المضمنة ، والأساليب الخارجية ؛ تنقسم الأنماط التي تم الحصول عليها بالطرق المختلفة أيضًا إلى قابلة للقراءة وقابلة للكتابة وقراءة فقط.
احصل على أنماط CSS مباشرة
node.style.color // قابلة للقراءة أو قابلة للكتابة
خصائص وطرق الأسلوب نفسها
node.style.csstext // الحصول على عقدة النمط string node.style.length // احصل على عدد الأنماط المضمنة node.style.item (0) // احصل على النمط في الموضع المحدد
احصل على أنماط العناصر وتعديلها
يوفر HTML5 سمة جديدة للعناصر: قائمة الفئة لتنفيذ الإضافة والحذف والتعديل والبحث عن أوراق نمط العنصر. العملية كما يلي:
node.classlist.add (value) ؛ // إضافة الفئة المحددة node.classlist.contains (value) ؛ // تحديد ما إذا كان العنصر يحتوي على الفئة المحددة. إذا كان هناك truenode.classlist.remove (القيمة) ؛ // حذف الفئة المحددة node.classlist.toggle (value) ؛ // حذف إذا كان هناك فئة معينة ، وأضف الفئة المحددة إذا كان هناك لا.
طرق لتعديل خصائص DOM
node.getattribute ('id') // get node.setattributطريقة القراءة فقط
GetComputedStyle هي طريقة النافذة. يمكن أن تحصل على جميع قيم سمة CSS المستخدمة للعنصر الحالي ، ولكنها للقراءة فقط. يحتوي على معلمتين ، الأول هو العقدة الواردة ، والثانية يمكن أن تمر في: Hover ،: Blur ، وما إلى ذلك للحصول على أسلوبها الفئة الزائفة ، وإذا لم يكن الأمر كذلك ، فسيتم تمرير Null.
ومع ذلك ، لا يدعم IE طريقة getComputedStyle ، ويمكن استخدام CurrentStyle للحفاظ على التوافق:
window.getComputedStyle؟ window.getComputedStyle (Node ، Null): Node.CurrentStyle
الملخص أعلاه لطرق تشغيل عقدة JavaScript DOM هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.