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>
