JS / التنقل بين العناصر

الناشر :كودا فوكس -

التنقل بين العناصر

مفهوم التنقل بين العناصر

التنقل بين عناصر الصفحة (DOM Navigation) يقصد به القدرة على الوصول المباشر إلى العناصر القريبة من العنصر الحالي.

أي عنصر موجود في الصفحة يملك خصائص تجعله قادر على الوصول إلى العناصر الأخرى الموجودة بالقرب منه مما يعني أنك تستطيع الإنتقال إلى العناصر الموجودة بجانبه و التي تعتبر شقيقة له (Siblings Elements)، النزول إلى العناصر الموجودة بداخله و التي تعتبر أبناء له (Children Elements)، و حتى الصعود إلى العنصر الذي هو موجود فيه و الذي يعتبر بمثابة أب له (Parent Element).

JS - التنقل بين العناصر


أي وسم موجود في DOM يسمى عنصر ( Element ) أو عقدة ( Node ) و هذا معناها ما يلي:

  • سواء قلت Parent Element أو Parent Node فالمقصود هو العنصر الأب.
  • سواء قلت Child Element أو Child Node فالمقصود هو العنصر الإبن.
  • سواء قلت Sibling Element أو Sibling Node فالمقصود هو العنصر الشقيق.

الوصول للعنصر الأب

يمكنك استخدام الخاصية parentNode من أي عنصر للصعود إلى العنصر الأب له.
العنصر الأب الذي تصل له يمكنك تخزينه في متغير أو التعامل معه بشكل مباشر.

في المثال التالي قمنا بإظهار حدود للعنصر الذي يُعتبر بمثابة أب للعنصر الذي يملك id يساوي demo.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JS Move To Parent Element</h1>
    <p>You can use the "parentNode" property to move up the parent element.</p>
    
    <!-- العنصر التالي هو العنصر الأب الذي أظهرنا له حدود -->
    <div>
        <p id="demo">This is a paragraph.</p>
        <p>This is another paragraph.</p>
    </div>

    <script>
        // element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var element = document.getElementById('demo');

        // و أظهرنا له حدود element هنا قمنا بالصعود للعنصر الأب للعنصر الذي يمثله المتغير
        element.parentNode.style.border = '2px solid red';
    </script>
</body>
</html>

الوصول للعنصر الشقيق التالي

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

في المثال التالي قمنا بإظهار حدود للعنصر التالي الموجود بعد العنصر الذي يملك id يساوي demo.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JS Move To Next Element</h1>
    <p>You can use the "nextElementSibling" property to move to the next element.</p>
    
    <div>
        <p>This is a paragraph.</p> 
        <p id="demo">This is a paragraph.</p>
        <p>This is a paragraph.</p> <!-- هذا هو العنصر الذي أظهرنا له حدود -->
    </div>

    <script>
        // element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var element = document.getElementById('demo');

        // و أظهرنا له حدود element هنا قمنا بالإنتقال للعنصر التالي الموجود بعد العنصر الذي يمثله المتغير
        element.nextElementSibling.style.border = '2px solid red';
    </script>
</body>
</html>

الوصول للعنصر الشقيق السابق

يمكنك استخدام الخاصية previousElementSibling من أي عنصر للوصول للعنصر السابق الموجود قبله مباشرةً و الذي يعتبر بمثابة شقيق له.
العنصر السابق تصل له يمكنك تخزينه في متغير أو التعامل معه بشكل مباشر.

في المثال التالي قمنا بإظهار حدود للعنصر السابق الموجود قبل العنصر الذي يملك id يساوي demo.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JS Move To Next Element</h1>
    <p>You can use the "previousElementSibling" property to move to the previous element.</p>
    
    <div>
        <p>This is a paragraph.</p> <!-- هذا هو العنصر الذي أظهرنا له حدود -->
        <p id="demo">This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div>

    <script>
        // element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var element = document.getElementById('demo');

        // و أظهرنا له حدود element هنا قمنا بالإنتقال للعنصر السابق الموجود قبل العنصر الذي يمثله المتغير
        element.previousElementSibling.style.border = '2px solid red';
    </script>
</body>
</html>

الوصول للعنصر الذي يعتبر الإبن الأول

يمكنك استخدام الخاصية firstChildElement من أي عنصر للوصول لأول عنصر موجود فيه و الذي يعتبر بمثابة الإبن الأول له.
العنصر الذي تصل له يمكنك تخزينه في متغير أو التعامل معه بشكل مباشر.

في المثال التالي قمنا بإظهار حدود لأول عنصر موجود في العنصر الذي يملك id يساوي demo.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JS Move To First Child Element</h1>
    <p>You can use the "firstElementChild" property to move to the first child element.</p>
    
    <div id="demo">
        <p>This is a paragraph.</p> <!-- هذا هو العنصر الذي أظهرنا له حدود -->
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div>

    <script>
        // element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var element = document.getElementById('demo');

        // و أظهرنا له حدود element هنا قمنا بالإنتقال للعنصر الذي يُعتبر الإبن الأول في العنصر الذي يمثله المتغير
        element.firstElementChild.style.border = '2px solid red';
    </script>
</body>
</html>

الوصول للعنصر الذي يعتبر الإبن الأخير

يمكنك استخدام الخاصية lastChildElement من أي عنصر للوصول لآخر عنصر موجود فيه و الذي يعتبر بمثابة الإبن الأخير له.
العنصر الذي تصل له يمكنك تخزينه في متغير أو التعامل معه بشكل مباشر.

في المثال التالي قمنا بإظهار حدود لأول عنصر موجود في العنصر الذي يملك id يساوي demo.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JS Move To Last Child Element</h1>
    <p>You can use the "lastElementChild" property to move to the last child element.</p>
    
    <div id="demo">
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p> <!-- هذا هو العنصر الذي أظهرنا له حدود -->
    </div>

    <script>
        // element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var element = document.getElementById('demo');

        // و أظهرنا له حدود element هنا قمنا بالإنتقال للعنصر الذي يُعتبر الإبن الأخير في العنصر الذي يمثله المتغير
        element.lastElementChild.style.border = '2px solid red';
    </script>
</body>
</html>

الوصول لجميع العناصر التي تعتبر أبناء للعنصر

يمكنك استخدام الخاصية children من أي عنصر للوصول لجميع العناصر الموجودة فيه مباشرةً و التي تعتبر بمثابة أبناء له.
العناصر التي ترجع لك كمصفوفة يمكنك تخزينها في متغير أو التعامل معها بشكل مباشر.

في المثال التالي قمنا بإظهار حدود لأول و ثالث عنصر موجود في العنصر الذي يملك id يساوي demo.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JS Access Children Elements</h1>
    <p>You can use the "children" property to move to access all children elements.</p>
    
    <div id="demo">
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p> <!-- هذا هو العنصر الذي أظهرنا له حدود -->
    </div>

    <script>
        // element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var element = document.getElementById('demo');
        
        // و أظهرنا له حدود element هنا قمنا بالإنتقال للعنصر الذي يُعتبر الإبن الأول في العنصر الذي يمثله المتغير
        element.children[0].style.border = '2px solid red';

        // و أظهرنا له حدود element هنا قمنا بالإنتقال للعنصر الذي يُعتبر الإبن الثالث في العنصر الذي يمثله المتغير
        element.children[2].style.border = '2px solid red';
    </script>
</body>
</html>

الإنتقال بحرية بين عناصر DOM

عندما تنطلق من عنصر محدد في الصفحة فإنك قادر على الإنتقال أكثر من مرة في ذات الوقت و إليك بضعة أمثلة.

في المثال التالي قمنا بالإنتقال من العنصر الذي يملك id يساوي demo إلى العنصر الأب له و من ثم إلى العنصر الأب و من بعدها قمنا بإظهار حدود له.

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<!-- هذا هو العنصر الذي أظهرنا له حدود -->
<body>
    <h1>JS DOM Navigation</h1>
    <p>In this example we move up twice.</p>
    
    <div>
        <p id="demo">This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div>

    <script>
        // element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var element = document.getElementById('demo');

        // ثم أظهرنا له حدود <body> و بعدها صعدنا للوسم <div> هنا صعدنا للوسم
        element.parentNode.parentNode.style.border = '2px solid red';
    </script>
</body>
</html>

في المثال التالي قمنا بالإنتقال من العنصر الذي يملك id يساوي demo إلى العنصر الأب له و من ثم إلى العنصر الذي يعتبر العنصر الأخير بالنسبة للأب و من بعدها قمنا بإظهار حدود له.

المثال الثاني

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JS DOM Navigation</h1>
    <p>In this example we move up to the parent element and
        then select the last child element inside it.</p>
    
    <div>
        <p id="demo">This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p> <!-- هذا هو العنصر الذي أظهرنا له حدود -->
    </div>

    <script>
        // element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var element = document.getElementById('demo');

        // فيه ثم أظهرنا له حدود <p> و بعدها نزلنا لآخر وسم <div> هنا صعدنا للوسم
        element.parentNode.lastElementChild.style.border = '2px solid red';
    </script>
</body>
</html>

في المثال التالي قمنا بالإنتقال من العنصر الذي يملك id يساوي demo إلى العنصر التالي بعده و من ثم العنصر الذي يليه أيضاً و من بعدها قمنا بإظهار حدود له.

المثال الثالث

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JS DOM Navigation</h1>
    <p>In this example we move to the next element and 
		then selecting the next element again.</p>
    
    <div>
        <p id="demo">This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p> <!-- هذا هو العنصر الذي أظهرنا له حدود -->
    </div>

    <script>
        // element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var element = document.getElementById('demo');

        // و أظهرنا له حدود element هنا قمنا بالإنتقال إلى العنصر التالي و من ثم الذي يليه نسبةً للعنصر الذي يمثله المتغير
		element.nextElementSibling.nextElementSibling.style.border = '2px solid red';
    </script>
</body>
</html>
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال