عمليات عقدة جافا سكريبت الشاملة في مقال واحد

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

نظرة عامة على العقدة

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

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

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

في تطويرنا الفعلي، تعمل عمليات العقدة بشكل أساسي على عقد العناصر.

مستوى العقدة

شجرة DOM لتقسيم العقد إلى علاقات هرمية مختلفة، والأكثر شيوعًا هو العلاقة الهرمية بين الوالدين والطفل والأخ.

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

parentNode

• يمكن لسمةparentNode إرجاع العقدة الأصلية للعقدة.
• تُرجع قيمة فارغة إذا كانت العقدة المحددة لا تحتوي على عقدة أصل.

<p class="parent">
        <p class="son"></p>
    </ص>
    <النص البرمجي>
        var son = document.querySelector(".son");
        console.log(son.parentNode);
    </script>

2. العقدة الفرعية

1.node.childNodes (القياسية)

تُرجع العقدة ChildNodes مجموعة تحتوي على العقد الفرعية للعقدة المحددة. هذه المجموعة عبارة عن مجموعة محدثة على الفور.

<ul>
        <li>أنا لي</li>
        <li>أنا لي</li>
        <li>أنا لي</li>
        <li>أنا لي</li>
    </ul>
    <النص البرمجي>
        var ul = document.querySelector('ul');
        // العقد الفرعية ChildNodes جميع العقد الفرعية، بما في ذلك عقد العناصر والعقد النصية وما إلى ذلك.
        console.log(ul.childNodes);
    </script>

لماذا توجد خمس عقد نصية هنا؟ إنها في الواقع تتوافق مع خمسة فواصل أسطر.

فواصل الأسطر الخمسة هذه هي عقد نصية، بالإضافة إلى أربع عقد عناصر li، بإجمالي 9.

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

var ul = document.querySelector('ul');
	for (var i = 0;i<ul.length;i++){
	    إذا (ul.childNodes[i].nodeType == 1){
	        console.log(ul.childNodes[i]);
	    }
	}

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

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

<ul>
        <li>أنا لي</li>
        <li>أنا لي</li>
        <li>أنا لي</li>
        <li>أنا لي</li>
    </ul>
    <النص البرمجي>
       var ul = document.querySelector('ul');
       console.log(ul.children);
    </script>

3. العقدة الفرعية الأولى والعقدة الفرعية الأخيرة

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

3.node.firstElementChild
يقوم firstElementChild بإرجاع عقدة العنصر الفرعي الأولى، أو null إذا لم يتم العثور عليه.
4.node.lastElementChild
تُرجع الدالة lastElementChild آخر عقدة عنصر فرعي، أو تُرجع قيمة فارغة إذا لم يتم العثور عليها.

ملاحظة: هناك مشكلات في هاتين الطريقتين، وهما مدعومتان فقط من خلال IE9 والإصدارات الأحدث.

5.عقدة.الأطفال[0]
5.عقدة.الأطفال[عقدة.الأطفال.طول - 1]
ملحوظة: لا توجد مشكلة توافق مع طريقة كتابة التطوير الفعلية.

<ul>
        <li>أنا لي</li>
        <li>أنا لي</li>
        <li>أنا لي</li>
        <li>أنا لي</li>
    </ul>
    <النص البرمجي>
       var ul = document.querySelector('ul');
       // 1. سواء كانت عقدة نصية أو عقدة عنصر console.log(ul.firstChild);
       console.log(ul.lastChild);
       // 2. قم بإرجاع عقدة العنصر الذاتي المقابلة فقط لـ IE9 والإصدارات الأحدث console.log(ul.firstElementChild);
       console.log(ul.lastElementChild);
       // 3. لا توجد مشكلة في التوافق console.log(ul.children[0]);
       console.log(ul.children[ul.children. length - 1]);
    </script>

4.عقدة الأخوة

1.nextSibling
يقوم nextSibling بإرجاع العقدة الشقيقة التالية للعنصر الحالي، أو null إذا لم يتم العثور عليه. وبالمثل، يتم تضمين كافة العقد.
2.node
PreviousSibling تُرجع العقدة الشقيقة السابقة للعنصر الحالي، أو فارغة إذا لم يتم العثور عليها. وبالمثل، يتم تضمين كافة العقد.
3.node.nextElementSibling
nextElementSibling تُرجع عقدة العنصر الشقيق التالية للعنصر الحالي. إذا لم يتم العثور عليها، تُرجع قيمة null.
4.node.prevenceElementSibling
PreviousElementSibling تُرجع عقدة العنصر الشقيق السابقة للعنصر الحالي، أو فارغة إذا لم يتم العثور عليها.
ملاحظة: هناك مشكلات في هاتين الطريقتين، وهما مدعومتان فقط من خلال IE9 والإصدارات الأحدث.

فكيف يمكن تغليف دالة تلبي التوافق ويمكنها العثور على عقد العناصر الشقيقة

function getNextElementSibling(element){

       var el = element;
       بينما(إل = el.nextSibling){
           إذا (el.nodeType == 1){
               عودة إل؛
           }
       }
       عودة فارغة؛
   }

يمكن حل الكود المغلف أعلاه، لكن لا داعي للتفكير كثيرًا، لأن متصفح IE على وشك التوقف عن الخدمة، لذلك ما عليك سوى تذكر العقدة nextElementSibling، ولا داعي للقلق بشأن التوافق مشاكل.

إنشاء عقدة

document.createElement ('tagName')

تقوم طريقة document.createElenent () بإنشاء عنصر Н TML المحدد بواسطة tagName. نظرًا لأن هذه العناصر لم تكن موجودة في الأصل وتم إنشاؤها ديناميكيًا بناءً على احتياجاتي، فإننا نسميها أيضًا عقد العناصر الديناميكية .

إضافة العقد وإضافة العقد

1.node.appendChild(child)

تضيف طريقة العقدة.appendChild () عقدة إلى نهاية قائمة العقدة الفرعية للعقدة الأصلية المحددة. على غرار العنصر الزائف بعد في CSS.

2.node.insertBefore(الطفل، العنصر المحدد)

<ul></ul>
    <النص البرمجي>
        var ul = document.querySelector("ul");
        var li =document.createElement("li");
        فار سبان = document.createElement("span")
        ul.appendChild(li);
        ul.insertBefore(span,ul.children[0]);
    </script>

حذف العقدة

Node.removeChild(child)

الأسلوبNode.removeChild(child) يحذف عقدة فرعية من DOM ويعيد العقدة المحذوفة.

<ul>
        <li>أنيو</li>
        <li>الزواج</li>
        <li>توم</li>
    </ul>
    <النص البرمجي>
        var ul = document.querySelector("ul");
        ul.removeChild(ul.children[2]);
    </script>

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

cloneNode ()

تقوم طريقة العقدة.cloneNode () بإرجاع نسخة من العقدة التي تسمى هذه الطريقة. وتسمى أيضًا عقدة الاستنساخ/عقدة النسخ
1. إذا كانت معلمة القوس فارغة أو خاطئة، فهي نسخة ضحلة، أي أنه يتم استنساخ العقدة نفسها فقط ولا يتم استنساخ العقد الفرعية الموجودة بالداخل.
2. إذا كانت معلمة القوس صحيحة، فهي نسخة عميقة، والتي ستقوم بنسخ العقدة نفسها وجميع العقد التابعة لها.

<ul>
        <li>أنيو</li>
        <li>الزواج</li>
        <li>توم</li>
    </ul>
    <النص البرمجي>
        var ul = document.querySelector("ul");
        var li1 = ul.children[0].cloneNode(); // نسخة ضحلة var li2 = ul.children[0].cloneNode(true); // نسخة عميقة ul.appendChild(li1);
        ul.appendChild(li2);
    </script>