Javascript HTML DOM Methods

General terminology is:

Objects – HTML elements themselves are referred to as objects.

Property – is a value than can be ‘set’, or ‘get’ a value of that property. Like the HTML elements themselves.

Method – these are actions that you can do; like changing a html element.

Example 1

Changing the inner html of the <p> tag (i.e. the space between the <p> … </p> with some text.

In the code below;

getElementById is a method

innerHTML is a property.

<html>
<body>

<p id="pTag"></p>

<script>
document.getElementById("pTag").innerHTML = "I'm inside the html paragraph tags";
</script>

</body>
</html>

Example 2

Playing with this concept, let’s make some text, that when you click it, this calls a function that changes some other text on the page.

<!DOCTYPE html>
<html>
<body>

  <h1 onclick="changetheText()">My Button</h1>
  <div id="myDivTag">Some text that will change</div>

</body>
</html>

<script>
  function changetheText() {
    myDivTag.innerHTML = "I changed!";
  }
</script>

Example 3

<!DOCTYPE html>
<html>
<body>

  <h1 onclick="changetheText(this)">My Button</h1>

  <div>I'm in a div tag</div>
  <span>I'm in a span tag</span>
  <div>I'm in another div tag</div>


</body>
</html>

<script>
  function changetheText(id) {
    document.getElementsByTagName("div")[1].innerHTML = "Content of the second DIV tag changed!";
  }
</script>

Leave a Reply