CL1000
ICT
Maham Saleem
DEPARTMENT OF COMPUTER
SCIENCE
[email protected]
HTML DOM Tree
The HTML DOM (Document Object Model)
• 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:
What JS can do with HTML/CSS
So that precisely means
• We change/access the content of HTML
elements
• We can change/access the style (CSS) of HTML
elements
• We can react to HTML DOM events
• We can add and delete HTML elements
What is 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
• In other words: The HTML DOM is a standard for
how to get, change, add, or delete HTML
elements.
Finding HTML Elements using JS
Changing HTML Elements
Changing HTML content and Value of an
attribute
<!DOCTYPE html>
<!DOCTYPE html> <html>
<html> <body>
<body>
<h2>JavaScript HTML DOM</h2>
<h1 id="id01">Old Heading</h1> <img id="image" src="smiley.gif"
width="160" height="120">
<script>
const element = <script>
document.getElementById("id01"); document.getElementById("image").src =
element.innerHTML = "New Heading"; "landscape.jpg";
</script> </script>
<p>JavaScript changed "Old Heading" to <p>The original image was smiley.gif, but
"New Heading".</p> the script changed it to landscape.jpg</p>
</body> </body>
</html> </html>
Dynamic HTML content
<!DOCTYPE html>
<html>
<body> Date : Mon Nov 11 2024 09:18:11
GMT+0500 (Pakistan Standard Time)
<p id="demo"></p>
<script>
document.getElementById("demo").
innerHTML = "Date : " + Date();
</script>
</body>
</html>
Without JS example
With JS example
In this example both value of textbox and color of textbox(style)
was changed with help of JS
Onclick Handler
• Onclick handler enable us to run any javascript
function if a click is performed on any html
element
• <input type=“button” onclick=“my_fun();” />
• So whenever user will click on this above
button a js function defined in script tag will
be run
Onclick Handler
Reacting to Events
Onclick Handler
• In previous example we add an onclick event
and which will run the function with name
js_function(); when button will be clicked
• In script we define that function with keyword
function js_function
• And in function we simple output a message
in form of alert. You can do any task in that
function
Form Validation
<script>
function validateForm()
{
let x=document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
<form name="myForm" onsubmit="return validateForm()">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
Accessing the value of HTML element
In this example the value of textbox with id=num was accessed using js
through documen.getElementById(“num”).value and stored it into a js
variable with name value
Accessing the value of HTML element
What should be the output of this code??
Accessing the value of HTML element
Output should be 23 because we inputted 22 and in js we increment it by
1 and then we are displaying it but why it is showing 221?
Accessing the value of HTML element
• The previous output was wrong because JS
access every HTML element value as String.
• So when anything in JS is string it will perform
operators with respect to string type i.e
addition on string will perform append
operation instead of addition.
• What’s the solution?
Accessing the value of HTML element
• To convert string into integer or float ,you
need to perform parseInt function
<html>
<body>
<div>
<label> Number: </label>
<input type="number" id="num" />
</div>
<br>
<div>
<input type="button“ value="click me"
onclick="my_js_function();" id="result" />
</div>
<br>
</body>
<script>
function my_js_function()
{
var value =parseInt(document.getElementById("num").value);
value = value + 1;
Accessing the value of HTML element
Now after converting the input into integer with help of parseInt the variable will now be
treated as integer and we can accurately get any result by applying appropriate operator
Adding two field values using JS
Adding two field values using
JS(output)
