HTML DOM
HTML DOM
• 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:
HTML DOM tree of objects
Dynamic HTML
• With the object model, JavaScript gets all the power it
needs to create dynamic HTML
• JavaScript can change all the HTML elements in the page
• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and
attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the page
• JavaScript can create new HTML events in the page
HTML DOM
• The HTML DOM is a standard object model
and programming interface for HTML. It
defines:
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements
• The HTML DOM is a standard for how to get,
change, add, or delete HTML elements.
• HTML DOM methods are actions you can
perform (on HTML Elements).
• HTML DOM properties are values (of HTML
Elements) that you can set or change.
Change the content of <p> element
• <html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello
World!";
</script>
</body>
</html>
Finding HTML Elements
Method Description
document.getElementById(id) Find an element by element id
document.getElementsByTagName(name) Find elements by tag name
document.getElementsByClassName(nam Find elements by class name
e)
Changing HTML Elements
Property Description
element.innerHTML = new html content Change the inner HTML of an element
element.attribute = new value Change the attribute value of an HTML
element
element.style.property = new style Change the style of an HTML element
Method Description
element.setAttribute(attribute, value) Change the attribute value of an HTML
element
Adding and Deleting Elements
Method Description
document.createElement(element) Create an HTML element
document.removeChild(element) Remove an HTML element
document.appendChild(element) Add an HTML element
document.replaceChild(new, old) Replace an HTML element
document.write(text) Write into the HTML output stream
Adding Events Handlers
Method Description
document.getElementById(id).onclick = Adding event handler code to an onclick
function(){code} event
HTML DOM to change the src attribute of
image
• <img id="image" src="smiley.gif">
• <script>
document.getElementById("image").src=
"pic_mountain.jpg";
• </script>
Changing the Value of an Attribute
• document.getElementById(id).attribute = new
value
Changing the value of style attribute
• <html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
DOM Events
• <script>
document.getElementById("myBtn").onclick =
displayDate;
</script>
•
a function named displayDate is assigned to
an HTML element with the id="myBtn".
Events
Events are things that happen, actions, that are
associated with an object.
• onLoad - occurs when a page loads in a browser
• onUnload - occurs just before the user exits a page
• onMouseOver - occurs when you point to an
object
• onMouseOut - occurs when you point away from
an object
• onSubmit - occurs when you submit a form
• onClick - occurs when an object is clicked
Examples of HTML events:
• An HTML web page has finished loading
• An HTML input field was changed
• An HTML button was clicked
onchange
<html>
<body>
Enter some text: <input type="text" name="txt" value="Hello"
onchange="myFunction(this.value)">
<script>
function myFunction(val) {
alert("The input value has changed. The new value is: " + val);
}
</script>
</body>
onclick
<script>
function inform(){
alert("You have activated me by clicking the grey button!
Note that the event handler is added within the event
that it handles, in this case, the form button event tag")
}
</script>
<form>
<input type="button" name="test" value="Click me"
onclick="inform()">
</form>
onsubmit
<html> <head>
<script type="text/javascript">
<!-- function validation()
{ all validation goes here ......... return either true or
false } //-->
</script>
</head> <body>
<form method="POST" onsubmit="return
validate()">
<input type="submit" value="Submit" />
onload
<html>
<head><title>Body onload example</title>
</head>
<body onload="alert('This page has finished
loading!')">
Welcome to my page
</body>
</html>
onmouseover
<html>
<head>
<script type="text/javascript">
function over() {
document.write ("Mouse Over");
}
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()">
<h2> This is inside the division </h2>
</div>
</body>
onreset
<html><body>
<p>When you reset the form, a function is triggered which
alerts some text.</p>
<form onreset="myFunction()">
Enter name: <input type="text">
<input type="reset"></form>
<script>
function myFunction() {
alert("The form was reset");
}
</script>
Javascript to show browser information
• <html>
• <head>
• <title> Browser Information </title>
• <script language=javascript>
• function show()
• {
• document.write("Name "+navigator.appName+"<br>");
• document.write("Version "+navigator.appVersion +"<br>");
• document.write("Codename " +navigator.appCodeName +"<br>");
• document.write("Cookie enable"+navigator.cookieEnabled +"<br>");
• document.write("Java Enable"+navigator.javaEnabled +"<br>");
• document.write("Mime type"+navigator.mimeTypes +"<br>");
• document.write("Platform"+navigator.platform +"<br>");
• document.write("Plug ins"+navigator.plugins +"<br>");
• document.write("System Language"+navigator.systemLanguage +"<br>");
• document.write("User language"+navigator.userAgent +"<br>");
• document.write("User Agent"+navigator.userAgent +"<br>");
• }
• </script>
• </head>
• <body>
• <form id="form1">
• <div>
• <input id="Button1" type="button" value="Click me"
onclick="show()" />
• </div>
• </form>
• </body>
• </html>
