When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:
In the DOM, all HTML elements are defined as objects.
The programming interface is the properties and methods of each object.
A property is a value that you can get or set (like changing the content of an HTML element).
A method is an action you can do (like add or deleting an HTML element).
The programming interface is the properties and methods of each object.
A property is a value that you can get or set (like changing the content of an HTML element).
A method is an action you can do (like add or deleting an HTML element).
<html>
<body>
<p id="sample"></p>
<script>
document.getElementById("sample").innerHTML = "Hello World!";
</script>
</body>
</html>
In the example above,
getElementById is a method, while innerHTML is a property.|
Method |
Description |
|
document.getElementById(id) |
Find an element by element id |
|
document.getElementsByTagName(name) |
Find elements by tag name |
|
document.getElementsByClassName(name) |
Find elements by class
name |
The easiest way to find an HTML element in the DOM, is
by using the element id.
Example
<!DOCTYPE html>
<html>
<body>
<p id="intro">Prasanjeet Ghosh!</p>
<p id="sample"></p>
<html>
<body>
<p id="intro">Prasanjeet Ghosh!</p>
<p id="sample"></p>
<script>
var myElement = document.getElementById("intro");
document.getElementById("sample").innerHTML =
"The name is " + myElement.innerHTML;
</script>
</body>
</html>
Output
<html>
<body>
<script type="text/javascript" >
function showcommentform() {
var data="Name:<br><input type='text' name='name'><br>Comment:<br><textarea rows='5' cols='50'></textarea><br><input type='submit' value='comment'>";
document.getElementById('commentform').innerHTML=data;
}
</script>
<form name="myForm">
<input type="button" value="comment" onclick="showcommentform()">
<div id="commentform"></div>
</form>
</body>
</html>
Output
<!DOCTYPE html>
<html>
<body>
<p>My name is Prasanjeet Ghosh.</p>
<p>Dept-BCA.</p>
<p id="sample"></p>
<script>
var element = document.getElementsByTagName("p");
document.getElementById("sample").innerHTML = 'The text in first paragraph (index 1) is: ' + element[1].innerHTML;
</script>
</body>
</html>
Output
Find HTML Elements by Class Name
<!DOCTYPE html>
<html>
<body>
<p class="info">My name is Prasanjeet Ghosh.</p>
<p class="info">Dept-BCA.</p>
<p id="sample"></p>
<script>
var element = document.getElementsByClassName("info");
document.getElementById("sample").innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML;
</script>
</body>
</html>
Show/Hide Comment Form Example using innerHTML
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
<script type="text/javascript" >
var flag=true;
function commentform() {
var data="<form action='Comment'>Enter Name:<br><input type='text' name='name'/><br/> Enter Email:<br><input type='email' name='email'/><br>Enter Comment:<br/> <textarea rows='5' cols='70'></textarea><br><input type='submit' value='Post Comment'/></form>";
if(flag){
document.getElementById("comment_form").innerHTML=data;
flag=false;
}
else{
document.getElementById("comment_form").innerHTML="";
flag=true;
}
}
</script>
</head>
<body>
<button onclick="commentform()">Comment</button>
<div id="comment_form"></div>
</body>
</html>
Find HTML Elements by Tag Name
<!DOCTYPE html>
<html>
<script>
function func()
{
var elements = document.getElementsByTagName("p");
elements[0].style.display="block";
elements[1].style.display="block";
}
</script>
<head>
</head>
<body>
<p style="display: none">DOM getElementByTagName()</p>
<p style ="display:none">Hello ! Now you can see me.</p>
<button onclick="func();">Click me</button>
</body>
</html>
How to show value in Textbox
<!DOCTYPE html>
<html>
<script>
function func()
{
var ele = document.getElementById("give").value;
document.getElementById("result").value=ele;
}
</script>
<head>
</head>
<body>
<input type="text" id="give" onkeyup="func()" />
<input type="text" id="result" />
</body>
</html>
Some useful examples
Add two numbers Using getElementsByClassName method
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function addNumbers() {
var inputs = document.getElementsByClassName("number-input");
var num1 = parseInt(inputs[0].value);
var num2 = parseInt(inputs[1].value);
var sum = num1 + num2;
document.getElementById("result").innerHTML = "Result: " + sum;
}
</script>
</head>
<body>
<input type="text" class="number-input">
<input type="text" class="number-input">
<button onclick="addNumbers()">Add</button>
<p id="result"></p>
</body>
</html>
Add two numbers Using getElementsByTagName method
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<Script type="text/javascript">
function addNumbers() {
var inputs = document.getElementsByTagName("input");
var num1 = parseInt(inputs[0].value);
var num2 = parseInt(inputs[1].value);
var sum = num1 + num2;
document.getElementById("result").innerHTML = "Result: " + sum;
}
</Script>
</head>
<body>
<input type="text" id="number1">
<input type="text" id="number2">
<button onclick="addNumbers()">Add</button>
<p id="result"></p>
</body>
</html>
No comments:
Post a Comment