Javascript HTML DOM Document

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>

Leave a Reply