Topic 14: DOM - getting elements from document(html file): ByID, ByClassName

//Regular lecture 25: 3 Nov 2022

// Topic 14 //* DOM *//getting elements from document(html file)//ByID, ByClassName


html code:

<!DOCTYPE html>
<html>
    <head>
       <title>MyPage</title> 
    </head>
    <body>
        <h1>TCA Skill Lab1</h1>
        <h2 id = "virat" class = "batsman">Virat Kohli</h2>
        <h2 id = "rahul" name = "KL">KL Rahul</h2>
        <h2 id = "rohit" class ="batsman">Rohit Sharma</h2>
        <h2 id = "surya" class = "batsman">Suryakumar</h2>
        <h1>BCCI</h1>

        <script src = "script15.js"></script>
    </body>
</html>


JavaScript Code:

//1) getElementByID

document.getElementById('virat').addEventListener('click',function(){
    document.getElementById('virat').textContent = "I am Virat"
})

document.getElementById('rahul').addEventListener('click',function(){
    document.getElementById('rahul').textContent = "I am Rahul"
})


//2) getElementsByClassName

document.getElementsByClassName('batsman')[1].addEventListener('click',function(){
    document.getElementsByClassName('batsman')[1].textContent = "I am Rohit"
})

document.getElementsByClassName('batsman')[2].addEventListener('click',function(){
    document.getElementsByClassName('batsman')[2].textContent = "I am Suryakumar"
})

टिप्पण्या