Programming Example

How to select all li at once using JavaScript

👁 184 Views

💻 Practical Program

📘 Step by Step Learning

In this section you will learn that how to select all li or any tag at once using JavaScript

Program Code

<!DOCTYPE html>
<html>
    <body>
        <ul>
            <li> Hello </li>
            <li> Hello </li>
            <li> Hello </li>
            <li> Hello </li>
            <li> Hello rumman </li>
        </ul>
    </body> 
</html>


<!- Script Code -->
<script>
    let elementLi = document.getElementsByTagName('li');
    Array.from(elementLi).forEach(element =>{
        console.log(elementLi);
        element.style.color = 'blue';
        element.style.boxShadow = '2px 5px #888888';
        element.style.border = '1px solid';
        element.style.padding = '10px';
    });
</script>

Output

Copy above code and run it in your environment to see the output.

Explanation

How to learn from this program

First read the algorithm, then study the program code line by line. After that, compare the code with the output and finally go through the explanation. This approach helps learners understand both the logic and the implementation properly.

Practice suggestion

After understanding this example, try to rewrite the same program without looking at the code. Then change some values or logic and run it again. This helps improve confidence and keeps learners engaged on the page for longer.