Task Using Traversing Elements in DOM

Task 1 : In the below task find all the next sibling of “spl” id H1 Tag 

<div id=”demo”>

                <h1>This is Heading 1</h1>

                <h1 id=”spl”>This is Heading 1</h1>

                <h2>This is a Heading 2</h2>

                <h2>This is a Heading 2</h2>

                <h2>This is a Heading 2</h2>

                </div>

Solution of Task 1

                 <script>

        let content = document.getElementById(‘spl’);

                                let nextSibling = content.nextElementSibling;

                                while(nextSibling)

                                {

                                console.log(nextSibling);

                                nextSibling = nextSibling.nextElementSibling;

                                }

    </script>

Task 2 Find the following in below code

• First find the h2 using query selector

• Through this h2 find div of id demo

• Then find all the elements of this div

• At last find h4 via children

 <div id=”demo”>

                <h1>This is a Heading 1</h1>

                <h2>This is a Heading 2</h2>

                <h3>This is a Heading 3</h3>

                <h4>This is a Heading 4</h4>

                <h5>This is a Heading 5</h5>

                <h6>This is a Heading 6</h6>

</div>

Solution of Task 2

<script>

const content = document.querySelector(‘h2’);
const parentElement = content.parentElement;
const children = parentElement.children;
const fourthItem = parentElement.children[3]
console.log(content);
console.log(parentElement);
console.log(children);
console.log(fourthItem);

</script>

Task 3 Find the following in below code

• Select .HouseHold with document.querySelector
• Select .vegetables from .HouseHold
• Select all vegetables with querySelectorAll, starting from .vegetables
• Select all fruits with children
• Select the Banana from fruit

<div class=”HouseHold”>

  <ul class=”fruits”>

    <li value=”Apple”>Apple</li>

    <li value=”Mango”>Mango</li>

    <li value=”Banana”>Banana</li>

    <li value=”Litchi”>Litchi</li>

  </ul>

  <ul class=”vegetables”>

    <li value=”Tomato”>Tomato</li>

    <li value=”Potato”>Potato</li>

    <li value=”Ginger”>Ginger</li>

    <li value=”Onion”>Onion</li>

  </ul>

</div>

Solution of Task 3

<script>

                               const output1 = document.querySelector(‘div’);

                                console.log(output1);                   

                                const content = output1.firstElementChild;

                                const output2= content.nextElementSibling;

                                console.log(output2);                               

                                const output3 = output2.querySelectorAll(‘*’);

                                console.log(output3);                               

                                const output4 = content.children;

                                console.log(output4);                               

                                const output5 = content.children[2];

                                console.log(output5);                           

    </script>