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:
Features
• 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
What is a DOM
• The DOM is a W3C (World Wide Web Consortium) standard.
• The DOM defines a standard for accessing documents:
• "The W3C Document Object Model (DOM) is a platform and
language-neutral interface that allows programs and scripts to
dynamically access and update the content, structure, and style of a
document."
• The W3C DOM standard is separated into 3 different parts:
• Core DOM - standard model for all document types
• XML DOM - standard model for XML documents
• HTML DOM - standard model for HTML documents
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
Example
Example 2
Draw DOM tree for the given HTML document.
<html>
<head>
<title> Link file </title></head>
<body>
<p><a href="red.html" target="_blank">RED</a>
<a href="green.html" target="right">GREEN</a>
<a href ="blue.html" target="right">BLUE</a></p>
</body>
</html>
HTML DOM Methods
• 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.
• The DOM Programming Interface
• The HTML DOM can be accessed with JavaScript (and with other
programming languages).
• 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).
<!DOCTYPE html>
<html>
<body>
<h1>My First Page</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
The getElementById Method
• The most common way to access an HTML element is to use the id of the
element.
• In the example above the getElementById method used id="demo" to find
the element.
• The innerHTML Property
• The easiest way to get the content of an element is by using
the innerHTML property.
• The innerHTML property is useful for getting or replacing the content of
HTML elements.
• The innerHTML property can be used to get or change any HTML element,
including <html> and <body>.
HTML DOM Document
• The document object represents your web page.
• If you want to access any element in an HTML page, you always start
with accessing the document object.
HTML DOM Elements
• Finding HTML Elements
• Finding HTML elements by id
• Finding HTML elements by tag name
• Finding HTML elements by class name
• Finding HTML elements by CSS selectors
• Finding HTML elements by HTML object collections
Finding HTML Element by Id
• Finding HTML Element by Id
• The easiest way to find an HTML element in the DOM, is by using the
element id.
• This example finds the element with id="intro":
• Example
• var myElement = document.getElementById("intro");
• If the element is found, the method will return the element as an
object (in myElement).
• If the element is not found, myElement will contain null.
Finding HTML Elements by Tag Name
• This example finds all <p> elements:
• var x = document.getElementsByTagName("p");
Finding HTML Elements by Class Name
• If you want to find all HTML elements with the same class name, use
getElementsByClassName().
• This example returns a list of all elements with class="intro".
• var x = document.getElementsByClassName("intro");
Changing HTML Content
• The easiest way to modify the content of an HTML element is by using
the innerHTML property.
• To change the content of an HTML element, use this syntax:
• document.getElementById(id).innerHTML = ”hi”;
• document.getElementByTagName("p1").innerHTML = "New text!";
Changing the Value of an Attribute
• To change the value of an HTML attribute, use this syntax:
• document.getElementById(id).attribute = new value
• This example changes the value of the src attribute of an <img>
element:
• document.getElementsByTagName("H1")[0].setAttribute("class",
"democlass");
<html>
<head>
<style>
.democlass {
color: red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Click the button to add a class attribute with the value of "democlass" to the h1
element.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");
}
</script>
</body>
</html>
Changing HTML Style
• To change the style of an HTML element, use this syntax:
• document.getElementById(id).style.property = new style
• The following example changes the style of a <p> element:
• document.getElementById("p2").style.color = "blue";
<html>
<body>
<h1 id="myH1">How to change the style of a header</h1>
<p>Click the button to add a color to the H1 element.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myH1").style.color = "red";
}
</script>
</body>
</html>
<html>
<head>
<style>
body {
background-color: yellow;
color: red;
font-size: 15px;
}
</style>
</head>
<body>
<p>Click the button to display the style properties of this document.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementsByTagName("STYLE")[0];
document.getElementById("demo").innerHTML = x.innerHTML;
}
</script>
</body>
</html>
<html>
<body>
<p id="myP" style="border-top: 5px solid red;">Click the button to get the
value of my top border.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myP").style.borderTop;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Using Events
• The HTML DOM allows you to execute code when an event occurs.
• Events are generated by the browser when "things happen" to HTML
elements:
• An element is clicked on
• The page has loaded
• Input fields are changed
• This example changes the style of the HTML element with id="id1",
when the user clicks a button:
<body>
<p id="id1">Hello welcome </p>
<button
onclick="document.getElementById('id1').style.color='red'">Click Me!
</button>
</body>
• A JavaScript can be executed when an event occurs, like when a user clicks
on an HTML element.
• To execute code when a user clicks on an element, add JavaScript code to
an HTML event attribute:
• When a user clicks the mouse
• When a web page has loaded
• When an image has been loaded
• When the mouse moves over an element
• When an input field is changed
• When an HTML form is submitted
• When a user strokes a key
• To assign events to HTML elements you can use event attributes.
• Example
• Assign an onclick event to a button element:
• <button onclick="displayDate()">Try it</button>
• The onchange Event
• The onchange event is often used in combination with validation of
input fields.
• Below is an example of how to use the onchange. The upperCase()
function will be called when a user changes the content of an input
field.
• Example
• <input type="text" id="fname" onchange="upperCase()">
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected
car.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onchange" event to an input element.</p>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper
case.</p>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
<html>
<body>
<p>Modify the text in the input field, then click outside the field to fire the
onchange event.</p>
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>
</html>
<html>
<body>
<p onclick="myFunction(this, 'red')">Click me to change my text color.</p>
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>
</body>
</html>
<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br>
<button onclick="myFunction()">Copy Text</button>
<p>A function is triggered when the button is clicked. The function copies the text
from Field1 into Field2.</p>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
</body>
</html>
<html><body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</form><br>
<p>Click the button to add a "Kiwi" option at the end of the dropdown list.</p>
<button type="button" onclick="myFunction()">Insert option</button>
<script>
function myFunction() {
var x = document.getElementById("mySelect");
var op = document.createElement("option");
op.text = "Kiwi";
x.add(op);
}
</script></body></html>
<html><body>
<form id="f1">
<select id="mySelect" onchange="myFunction()">
<option value=“apple”>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</form><br>
<script>
function myFunction() {
var x = document.getElementById("f1");
var sel = document.createElement("select");
sel.id="x";
x.appendChild(sel);
var op=document.createElement("option");
op.text="A";
sel.add(op);
}
</script></body></html>
Window Object
The window object represents an open window in a browser.
window.alert()
window.confirm()
window.prompt()
<!DOCTYPE html>
<html>
<body>
<p>Click the button to open a new browser window.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
window.open("https://www.google.com");
}
</script>
</body>
</html>
<html>
<body>
<p>Click the button to open an about:blank page in a new browser window that is
200px wide and 100px tall.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var myWindow = window.open("", "", "width=200,height=100");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Open a new window, and resize the width and height to 500px:</p>
<button onclick="openWin()">Create window</button>
<button onclick="resizeWin()">Resize window</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=100, height=100");
}
function resizeWin() {
myWindow.resizeTo(250, 250);
myWindow.focus();
}
</script>
</body>
</html>
<html>
<body>
<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "myWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
}
function closeWin() {
myWindow.close();
}
</script>
</body>
</html>
<html>
<body>
<p>Click the first button to alert "Hello" after waiting 3 seconds.</p>
<p>Click the second button to prevent the first function to execute. (You must click it before the 3 seconds are
up.)</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myStopFunction()">Stop the alert</button>
<script>
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
</script>
</body>
</html>
<html>
<body>
<p>In this example, the setInterval() method executes the setColor() function once every 300 milliseconds,
which will toggle between two background colors.</p>
<button onclick="stopColor()">Stop Toggling</button>
<script>
var myVar = setInterval(setColor, 300);
function setColor() {
var x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
clearInterval(myVar);
}
</script>
</body>
</html>
