Finding HTML elements using javascript
document.getElementByID : finds an element with an id attribute
document.getElementsByClassName : finds an element by its class name (this is HTML5 specific)
document.getElementsByTagName : finds an element my it’s HTML tag name
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changetheText()">My Button</h1>
<div>I'm in a div tag</div>
<span id="mySpanID">I'm in a span tag</span>
<p class="myParagraphClass">I'm in a p tag</p>
</body>
</html>
<script>
function changetheText() {
document.getElementsByTagName("div")[0].innerHTML = "DIV tag changed!";
document.getElementById("mySpanID").innerHTML = "Span Changed!";
document.getElementsByClassName("myParagraphClass")[0].innerHTML = "Changed 'myParagraphClass' class";
}
</script>

Important note: you cannot do something like document.getElementById(“mySpanID”)[1] if there are several HTML elements with the same Id because ids are suppost to be unique.
Changing HTML element contents
As we’ve seen,
element.innerHTML : makes new html content
i.e.
document.getElementById(“mySpanID”).innerHTML = “Span Changed!”;
Changing HTML elements attribute
element.setAttribute : is able to change an attribute
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changetheText()">My Button</h1>
<p>
<font id="myName">hello</font>
</p>
</body>
</html>
<script>
function changetheText(){
document.getElementById("myName").setAttribute("size",50);
document.getElementById("myName").innerHTML = "Bingo";
}
</script>
