getElementsByTagName: To access elements and attributes using tag name. This method will return an array of all the items with the same tag name.
<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h3>Welcome</h3>
<p>This is the welcome message.</p>
<h3>Technology</h3>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
document.getElementById("second").innerHTML = "The orginal message is changed.";
</script>
</body>
</html>
Event handler Example
- createElement: To create new element
- removeChild: Remove an element
- you can add an event handler to a particular element like this
document.getElementById(id).onclick=function()
{
lines of code to be executed
}
OR
document.getElementById(id).addEventListener("click", functionname)
Example:
<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<input type="button" id="btnClick" value="Click Me!!" />
<script type="text/javascript">
document.getElementById("btnClick").addEventListener("click", clicked);
function clicked()
{
alert("You clicked me!!!");
}
</script>
</body>
</html>
anand.johari1994