How to access HTML Elements in JavaScript

// 1. Access Element By Id
/*
function tnwFun(){
    var txt = "Welcome to TNW(Web Service & ICT Solutions)

TNW Provides The Best ICT Solutions For Your Business By The Reasonable Price.";
    document.getElementById("tnwId").innerHTML = txt;
}*/

// 2. Access Elements By ClassName

/*
function tnwBlue(){
    var i;
    var x = document.getElementsByClassName("tnwPage");
    for(i = 0; i < x.length; i++){
        x[i].style.backgroundColor = "blue";
        x[i].style.color = "white";
    }
}

function tnwRed(){
    var i;
    var x = document.getElementsByClassName("tnwPage");
    for(i = 0; i < x.length; i++){
        x[i].style.backgroundColor = "red";
        x[i].style.color = "white";
    }
} */

// 3. Access Elements By Name
/*
function tnwBlue(){
    var i;
    var x = document.getElementsByName("tnwName");
    for(i = 0; i < x.length; i++){
        x[i].style.backgroundColor = "blue";
        x[i].style.color = "white";
    }
}

function tnwRed(){
    var i;
    var x = document.getElementsByName("tnwName");
    for(i = 0; i < x.length; i++){
        x[i].style.backgroundColor = "red";
        x[i].style.color = "white";
    }
} */

// 4. Access Elements By tagName
/*
function tnwFun(){
    var i;
    var x = document.getElementsByTagName("li");
    for(i = 0; i < x.length; i++){
        x[i].style.color = "red";
    }
}*/

// 5. Access Element By CSS Selector

function tnwFun(){
    var i;
    var x = document.querySelectorAll(".tnwClass");
    for (i = 0; i < x.length; i++){
        x[i].style.color = "red";
    }
}