Scribd
Upload
1 views32 pages

HTML Dom

The document explains the HTML Document Object Model (DOM), which is a tree structure representing HTML elements as objects, allowing JavaScript to manipulate them dynamically. It covers methods for finding, changing, adding, and deleting HTML elements, as well as handling events such as clicks and form submissions. Additionally, it provides examples of JavaScript code to demonstrate these concepts in action.

Uploaded by

thelamborginisian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
1 views32 pages

HTML Dom

The document explains the HTML Document Object Model (DOM), which is a tree structure representing HTML elements as objects, allowing JavaScript to manipulate them dynamically. It covers methods for finding, changing, adding, and deleting HTML elements, as well as handling events such as clicks and form submissions. Additionally, it provides examples of JavaScript code to demonstrate these concepts in action.

Uploaded by

thelamborginisian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 32

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>

You might also like