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

[التوصيات ذات الصلة: فيديو تعليمي لجافا سكريبت، واجهة الويب الأمامية]

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

• من خلال المعرف ( getElementById )
• من خلال سمة الاسم ( getElementsByName )
• من خلال اسم العلامة ( getElementsByTagName )
• من خلال اسم الفئة ( getElementsByClassName )
• احصل على عنصر من خلال المحدد ( querySelector )
• من خلال المحدد مجموعة من العناصر ( querySelectorAll )
• للحصول على طريقة html ( document.documentElement )
• للحصول على النص ( document.body )

1. الحصول على المعرف (getElementById)

// 1 الحصول على عقدة العنصر // عن طريق المعرف (العثور على العناصر حسب المعرف، حساسة لحالة الأحرف، إذا كان هناك معرفات متعددة، فسيتم العثور على المعرف الأول فقط)
    document.getElementById('p1');

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

2. ابحث عن العناصر حسب اسم الفئة (getElementsByClassName)

// ابحث عن العناصر حسب اسم الفئة. افصل أسماء الفئات المتعددة بمسافات للحصول على HTMLCollection (مجموعة من العناصر ذات سمة الطول، ويمكنك الوصول إلى عنصر بداخلها من خلال رقم الفهرس). )
    var cls = document.getElementsByClassName('a b');
    console.log(cls);

• المعلمة هي اسم فئة العنصر.
• القيمة المرجعة هي مصفوفة تشبه المصفوفة. إذا لم يتم العثور عليها، فسيتم إرجاع مصفوفة فارغة

3. من خلال سمة الاسم (getElementsByName)

// ابحث في سمة الاسم وأرجع NodeList (مجموعة عقدة ذات سمة طول) يمكن الوصول إليها من خلال رقم الفهرس)
   var nm = document.getElementsByName('c');
    console.log(nm);

4. حسب اسم العلامة (getElementsByTagName)

// ابحث عن العناصر حسب اسم العلامة وأرجع HTMLCollection
    document.getElementsByTagName('p');

• المعلمة هي الحصول على سمة اسم العلامة للعنصر، وهي ليست حساسة لحالة الأحرف.
• القيمة المرجعة هي مصفوفة فئة. إذا لم يتم العثور عليها، يتم إرجاع مصفوفة فارغة

5. احصل على عنصر من خلال المحدد (querySelector)

document.querySelector('.animated')

• هي المحدد، مثل: "p. اسم الفئة".
• قم بإرجاع عقدة واحدة، إذا كان هناك عدة عناصر متطابقة، قم بإرجاع أول

6. احصل على مجموعة من العناصر من خلال المحدد (querySelectorAll)

document.querySelector('.animated')

• القيمة المرجعة هي مصفوفة فئة

للحصول على العقدة

في نموذج كائن المستند (DOM))، كل عقدة هي كائن. تحتوي عقد DOM على ثلاث سمات مهمة

: 1.nodeName: اسم العقدة

2.nodeValue: قيمة العقدة

3.nodeType: نوع العقدة

1.nodeName attribute: اسم العقدة، وهي للقراءة فقط .

• اسم العقدة لعقدة العنصر هو نفس اسم التسمية.
• اسم العقدة لعقدة السمة هو
دائمًا
• اسم
• العقدة

#text سمة قيمة العقدة: قيمة العقدة لعقدة

• العنصر غير محددة أو فارغة.
• قيمة العقدة هي
• سمة النص

للعقدة العقدة، وهي للقراءة فقط. أنواع العقد التالية شائعة الاستخدام:

• نوع العنصر نوع العقدة
• العنصر 1
• السمة 2
• النص 3 المسافة أيضًا تُرجع 3
• التعليق 8
• المستند 9

إنشاء عقدة:

1. إنشاء عقدة: createElement('')

// أنشئ عنصرًا. تم إنشاؤه للتو ولم تتم إضافته إلى HTML. يجب استخدامه مع appendChild var elem = document.createElement('. ص');
    elem.id = 'اختبار';
    elem.style = 'اللون: أحمر';
    elem.innerHTML = 'أنا عقدة تم إنشاؤها حديثًا';
    document.body.appendChild(elem);

2. أدخل العقدة: استخدام appendChild ()

• هو: يضيفparent.appendChild(child)
• العقدة الفرعية إلى نهاية العقدة الأصلية.
• إذا كانت العقدة الفرعية موجودة في الأصل، فستكون العقدة الأصلية تمت إزالته، أضف العقدة الجديدة إلى النهاية، لكن الحدث سيبقى

var oNewp=document.createElement("p");
      var oText=document.createTextNode("مرحبا بالعالم");
      oNewp.appendChild(oText);

2-1. أدخل العقدة:

• استخدام InsertBefore() هوparent.insertBefore(newNode,refNode)

;
      document.body.insertBefore(oNewp,oOldp);

حذف العقدة

1. حذف العقدة:

• استخدام RemoveChild هو:parent.removeChild(child)
• إذا قمت بحذف عقدة فرعية ليست عنصرًا أصليًا، فسيتم الإبلاغ عن خطأ

var op=document .body.getElementsByTagName("p ")[0];
         op.parentNode.removeChild(op);

عقدة الاستنساخ

1. عقدة الاستنساخ:parent.cloneNode() عقدة استنساخ خاطئة أو صحيحة

• (تحتاج إلى قبول معلمة للإشارة إلى ما إذا كان سيتم نسخ العنصر)

// عقدة الاستنساخ (تحتاج إلى قبول معلمة) للإشارة إلى ما إذا كان سيتم نسخ العنصر) element)
    فار النموذج = document.getElementById('test');
    var clone =form.cloneNode(true);
    clone.id = 'test2';
    document.body.appendChild(clone);

استبدال العقدة

1. استبدال طريقة العقدةNode.replace(new,old)

var oOldp=document.body.getElementsByTagName("p"[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);

مربع جزء المستند

• : عند إضافة عدد كبير من العقد إلى مستند، ستكون عملية إضافتها واحدة تلو الأخرى بطيئة جدًا. في هذه الحالة، يمكنك استخدام أجزاء المستند إضافتها إلى المستند مرة واحدة
• :
• document.createDocumentFragment()

;
    {
        فار ستارت = Date.now();
        var str = '', li;
        var ul = document.getElementById('ul');
        جزء فار = document.createDocumentFragment();
        ل(فار ط = 0؛ أنا <10000؛ أنا ++)
        {
            li = document.createElement('li');
            li.textContent = ''+i+'العقدة الفرعية';
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        console.log('استهلاك الوقت:'+(Date.now()-start)+'مللي ثانية'

)

;

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