JavaScript

Manipulating DOM Elements Part 2

<div class="content">
    <h2>How Machines Work</h2>
    <p>Machines make our lives easier by helping us with tasks. They use simple tools to perform jobs, like lifting heavy things or moving objects.</p>
    <p>For example, a bicycle is a machine that helps us travel faster. It uses wheels and pedals to move and carry us from one place to another.</p>
    <div>Machines are everywhere! They help us at home, school, and even in games.</div>
    <span>Understanding how machines work can be fun and exciting!</span>
</div>

.content * {
    padding: 10px;
    margin: 5px;
}

.border {
    border: 4px double #007bff;
}

const contentDiv = document.querySelector('.content');
const children = contentDiv.children;
for (let i = 0; i < children.length; i++) {
    children[i].classList.add('border');
}

const contentDiv = document.querySelector('.content');
const children = contentDiv.children;
for (let i = 0; i < children.length; i++) {
    if (children[i].tagName === 'P') {
        children[i].classList.add('border');
    }
}