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>