Scribd
Upload
25 views46 pages

Module - 3 Javascript Part 2 DOM

The document discusses the Document Object Model (DOM) and how it allows JavaScript to dynamically access and update the content, structure, and style of an HTML document. The DOM represents an HTML document as nodes and objects. This allows JavaScript to change all HTML elements via properties and methods. For example, JavaScript can select element(s), modify attributes and styles, assign event handlers, and add/remove elements and content.

Uploaded by

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

Module - 3 Javascript Part 2 DOM

The document discusses the Document Object Model (DOM) and how it allows JavaScript to dynamically access and update the content, structure, and style of an HTML document. The DOM represents an HTML document as nodes and objects. This allows JavaScript to change all HTML elements via properties and methods. For example, JavaScript can select element(s), modify attributes and styles, assign event handlers, and add/remove elements and content.

Uploaded by

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

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>

You might also like