The document discusses the JavaScript Document Object Model (DOM) and regular expressions. It defines the DOM as a programming interface for HTML and XML documents that defines the logical structure and allows manipulation. It describes how the DOM represents an HTML document as a tree of nodes that can be accessed and modified with JavaScript. It provides examples of how to select elements, modify attributes and content, add and remove nodes, and handle events. Regular expressions are also mentioned as a topic.
What is the 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
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.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
What is the 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
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.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
XML Document Object Model (DOM) is a standard for accessing and navigating XML code. All structured documents have a DOM system. The DOM simply defines the objects and properties in code, so parsers can identify and understand the individual parts. The DOM presents an XML document as a tree-structure. Knowing the XML DOM is a must for anyone working with XML.
This slide show is from my presentation on what JSON and REST are. It aims to provide a number of talking points by comparing apples and oranges (JSON vs. XML and REST vs. web services).
XML Document Object Model (DOM) is a standard for accessing and navigating XML code. All structured documents have a DOM system. The DOM simply defines the objects and properties in code, so parsers can identify and understand the individual parts. The DOM presents an XML document as a tree-structure. Knowing the XML DOM is a must for anyone working with XML.
This slide show is from my presentation on what JSON and REST are. It aims to provide a number of talking points by comparing apples and oranges (JSON vs. XML and REST vs. web services).
DOM(Document Object Model) in javascriptRashmi Mishra
Title: Mastering JavaScript: From Basics to Advanced
Description:
Enhance your JavaScript skills with our comprehensive presentation designed for both beginners and advanced learners. This detailed guide covers essential topics, including:
JavaScript Fundamentals: Variables, data types, functions, and loops
DOM Manipulation: Accessing and modifying HTML elements
Advanced Concepts: Closures, promises, async/await
Practical Examples: Real-world applications and coding exercises
Key Features:
Clear, concise explanations of key JavaScript concepts
High-quality visuals to aid understanding
Practical code examples and exercises
Links to additional resources and full study materials
Why You’ll Love This Presentation:
Perfect for self-learners and students
Great reference for developers at all levels
Continuously updated content to stay current with industry trends
Get the Full Study Materials:
Visit our website [YourWebsite.com] for the complete JavaScript study guide, detailed cheat sheets, and exclusive tutorials.
Join our newsletter for updates and special offers on our educational products.
Anchor object
Document object
Event object
Form and Form Input object
Frame, Frameset, and IFrame objects
Image object etc
Dom hiearchy,managing events
onload and onunload
Using the Onclick Event Handler
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdffxintegritypublishin
Advancements in technology unveil a myriad of electrical and electronic breakthroughs geared towards efficiently harnessing limited resources to meet human energy demands. The optimization of hybrid solar PV panels and pumped hydro energy supply systems plays a pivotal role in utilizing natural resources effectively. This initiative not only benefits humanity but also fosters environmental sustainability. The study investigated the design optimization of these hybrid systems, focusing on understanding solar radiation patterns, identifying geographical influences on solar radiation, formulating a mathematical model for system optimization, and determining the optimal configuration of PV panels and pumped hydro storage. Through a comparative analysis approach and eight weeks of data collection, the study addressed key research questions related to solar radiation patterns and optimal system design. The findings highlighted regions with heightened solar radiation levels, showcasing substantial potential for power generation and emphasizing the system's efficiency. Optimizing system design significantly boosted power generation, promoted renewable energy utilization, and enhanced energy storage capacity. The study underscored the benefits of optimizing hybrid solar PV panels and pumped hydro energy supply systems for sustainable energy usage. Optimizing the design of solar PV panels and pumped hydro energy supply systems as examined across diverse climatic conditions in a developing country, not only enhances power generation but also improves the integration of renewable energy sources and boosts energy storage capacities, particularly beneficial for less economically prosperous regions. Additionally, the study provides valuable insights for advancing energy research in economically viable areas. Recommendations included conducting site-specific assessments, utilizing advanced modeling tools, implementing regular maintenance protocols, and enhancing communication among system components.
About
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
• Remote control: Parallel or serial interface.
• Compatible with MAFI CCR system.
• Compatible with IDM8000 CCR.
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
• Easy in configuration using DIP switches.
Technical Specifications
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
Key Features
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
• Remote control: Parallel or serial interface
• Compatible with MAFI CCR system
• Copatiable with IDM8000 CCR
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
Application
• Remote control: Parallel or serial interface.
• Compatible with MAFI CCR system.
• Compatible with IDM8000 CCR.
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
• Easy in configuration using DIP switches.
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptxR&R Consult
CFD analysis is incredibly effective at solving mysteries and improving the performance of complex systems!
Here's a great example: At a large natural gas-fired power plant, where they use waste heat to generate steam and energy, they were puzzled that their boiler wasn't producing as much steam as expected.
R&R and Tetra Engineering Group Inc. were asked to solve the issue with reduced steam production.
An inspection had shown that a significant amount of hot flue gas was bypassing the boiler tubes, where the heat was supposed to be transferred.
R&R Consult conducted a CFD analysis, which revealed that 6.3% of the flue gas was bypassing the boiler tubes without transferring heat. The analysis also showed that the flue gas was instead being directed along the sides of the boiler and between the modules that were supposed to capture the heat. This was the cause of the reduced performance.
Based on our results, Tetra Engineering installed covering plates to reduce the bypass flow. This improved the boiler's performance and increased electricity production.
It is always satisfying when we can help solve complex challenges like this. Do your systems also need a check-up or optimization? Give us a call!
Work done in cooperation with James Malloy and David Moelling from Tetra Engineering.
More examples of our work https://www.r-r-consult.dk/en/cases-en/
Saudi Arabia stands as a titan in the global energy landscape, renowned for its abundant oil and gas resources. It's the largest exporter of petroleum and holds some of the world's most significant reserves. Let's delve into the top 10 oil and gas projects shaping Saudi Arabia's energy future in 2024.
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)MdTanvirMahtab2
This presentation is about the working procedure of Shahjalal Fertilizer Company Limited (SFCL). A Govt. owned Company of Bangladesh Chemical Industries Corporation under Ministry of Industries.
NO1 Uk best vashikaran specialist in delhi vashikaran baba near me online vas...Amil Baba Dawood bangali
Contact with Dawood Bhai Just call on +92322-6382012 and we'll help you. We'll solve all your problems within 12 to 24 hours and with 101% guarantee and with astrology systematic. If you want to take any personal or professional advice then also you can call us on +92322-6382012 , ONLINE LOVE PROBLEM & Other all types of Daily Life Problem's.Then CALL or WHATSAPP us on +92322-6382012 and Get all these problems solutions here by Amil Baba DAWOOD BANGALI
#vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore#blackmagicformarriage #aamilbaba #kalajadu #kalailam #taweez #wazifaexpert #jadumantar #vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore #blackmagicforlove #blackmagicformarriage #aamilbaba #kalajadu #kalailam #taweez #wazifaexpert #jadumantar #vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore #Amilbabainuk #amilbabainspain #amilbabaindubai #Amilbabainnorway #amilbabainkrachi #amilbabainlahore #amilbabaingujranwalan #amilbabainislamabad
1. JAVASCRIPT DOM AND REGULAR
EXPRESSIONS
By
Dr.Smitha.P.S
Associate Professor
Velammal Engineering College
2. • The Document Object Model (DOM) is a
programming API for HTML and XML documents.
• It defines the logical structure of documents and
the way a document is accessed and
manipulated.
• With the Document Object Model, programmers
can create and build documents, navigate their
structure, and add, modify, or delete elements
and content.
• Anything found in an HTML or XML document
can be accessed, changed, deleted, or added
using the Document Object Mode
3. • 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
4. • 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.
5. • With the HTML DOM, JavaScript can access and change
all the elements of an HTML document.
• 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
6. • HTML DOM Nodes
• In the HTML DOM (Document Object Model),
everything is a node:
• The document itself is a document node
• All HTML elements are element nodes
• All HTML attributes are attribute nodes
• Text inside HTML elements are text nodes
• Comments are comment nodes
7.
8. • consider this table, taken from an HTML document:
• <TABLE>
• <ROWS>
• <TR>
• <TD>Shady Grove</TD>
• <TD>Aeolian</TD>
• </TR>
• <TR>
• <TD>Over the River, Charlie</TD>
• <TD>Dorian</TD>
• </TR>
• </ROWS>
• </TABLE>
9.
10. • The Element Object
• In the HTML DOM, the Element object represents
an HTML element.
• Element objects can have child nodes of type
element nodes, text nodes, or comment nodes.
• A NodeList object represents a list of nodes, like
an HTML element's collection of child nodes.
• Elements can also have attributes. Attributes are
attribute nodes
11. • The Attr Object
• In the HTML DOM, the Attr object represents
an HTML attribute.
• An HTML attribute always belongs to an HTML
element.
• The NamedNodeMap Object
• In the HTML DOM, the NamedNodeMap
object represents an unordered collection of
an elements attribute nodes.
• Nodes in a NamedNodeMap can be accessed
by name or by index (number).
12. • With the HTML DOM, the document object is
your web page.
• The HTML DOM Document
• In the HTML DOM object model, the document
object represents your web page.
• The document object is the owner of all other
objects in your web page.
• If you want to access objects in an HTML page,
you always start with accessing the document
object.
• Below are some examples of how you can use
the document object to access and manipulate
HTML.
13.
14.
15.
16.
17. • Finding HTML Elements
• Often, with JavaScript, you want to manipulate HTML
elements.
• To do so, you have to find the elements first. There are
a couple of ways to do this:
• 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
18. 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":
19. • <html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
• In the example above, getElementById is a method, while innerHTML is a
property.
• 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 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>.
20. • <!DOCTYPE html>
• <html>
• <body>
• <p>Hello World!</p>
• <p>The DOM is very useful.</p>
• <p>This example demonstrates the <b>getElementsByTagName</b> method</p>
• <p id="demo"></p>
• <script>
• var x = document.getElementsByTagName("p");
• document.getElementById("demo").innerHTML =
• 'The first paragraph (index 0) is: ' + x[0].innerHTML;
• </script>
• </body>
• </html>
21. • <!DOCTYPE html>
• <html>
• <body>
• <p>Hello World!</p>
• <p class="intro">The DOM is very useful.</p>
• <p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>
• <p id="demo"></p>
• <script>
• var x = document.getElementsByClassName("intro");
• document.getElementById("demo").innerHTML =
• 'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
• </script>
• </body>
• </html>
22. • <!DOCTYPE html>
• <html>
• <body>
• <p>Hello World!</p>
• <p class="intro">The DOM is very useful.</p>
• <p class="intro">This example demonstrates the <b>querySelectorAll</b>
method.</p>
• <p id="demo"></p>
• <script>
• var x = document.querySelectorAll("p.intro");
• document.getElementById("demo").innerHTML =
• 'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
• </script>
• </body>
• </html>
23. • The following HTML objects (and object collections) are
also accessible:
• document. Anchors
• document. body
• document.documentElement
• document. Embeds
• document. forms
• document. Head
• document. Images
• document. Links
• document. scripts
• document. Title
24. JavaScript HTML DOM - Changing HTML
• In JavaScript, document.write() can be used to write
directly to the HTML output stream:
• Example
• <!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
25. • 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 =
new HTML
26. This example changes the content of a
<p> element:
• <html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML =
"New text!";
</script>
</body>
</html>
27. This example changes the content of
an <h1> element:
• <!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>
• Example explained:
– The HTML document above contains an <h1> element with id="header"
– We use the HTML DOM to get the element with id="header"
• A JavaScript changes the content (innerHTML) of that element
28. 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:
• Example
• <!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
• Example explained:
– The HTML document above contains an <img> element with id="myImage"
– We use the HTML DOM to get the element with id="myImage"
– A JavaScript changes the src attribute of that element from "smiley.gif" to "landscape.jpg"
29. JavaScript HTML DOM - Changing CSS
• The HTML DOM allows JavaScript to change
the style of HTML elements.
• Changing HTML Style
• To change the style of an HTML element, use
this syntax:
– document.getElementById(id).style.property=new
style
30. 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
31. • 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:
• onclick=JavaScript
• Examples of HTML events:
– 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
32. JavaScript Output
• JavaScript can "display" data in different ways:
• Writing into an alert box, using
window.alert().
• Writing into the HTML output using
document.write().
• Writing into an HTML element, using
innerHTML.
• Writing into the browser console, using
console.log().
33. Using window.alert()
• You can use an alert box to display data:
• Example
• <!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
34. Using document.write()
• For testing purposes, it is convenient to use document.write():
• Example
• <!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
35. Using innerHTML
• To access an HTML element, JavaScript can use the document.getElementById(id)
method.
• The id attribute defines the HTML element. The innerHTML property defines the
HTML content:
• Example
• <!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
36. Using console.log()
• In your browser, you can use the console.log() method to display data.
• Activate the browser console with F12, and select "Console" in the menu.
• Example
• <!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
37. Document tree
• The entire document is a document node
• Every HTML element is an element node
• The text inside HTML elements are text nodes
• Every HTML attribute is an attribute node
• Comments are comment nodes
Node Parents, Children, and Siblings
• The nodes in the node tree have a hierarchical relationship to each other.
• The terms parent, child, and sibling are used to describe the relationships.
Parent nodes have children. Children on the same level are called siblings
(brothers or sisters).
• In a node tree, the top node is called the root
• Every node has exactly one parent, except the root (which has no parent)
• A node can have any number of children
• Siblings are nodes with the same parent
39. HTML DOM Node Tree
Look at the following HTML fragment:
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
From the HTML above:
• The <html> node has no parent node; it is the root node
• The parent node of the <head> and <body> nodes is the <html> node
• The parent node of the "Hello world!" text node is the <p> node
and:
• The <html> node has two child nodes: <head> and <body>
• The <head> node has one child node: the <title> node
• The <title> node also has one child node: the text node "DOM Tutorial"
• The <h1> and <p> nodes are siblings and child nodes of <body>
and:
• The <head> element is the first child of the <html> element
• The <body> element is the last child of the <html> element
• The <h1> element is the first child of the <body> element
• The <p> element is the last child of the <body> element
40. Document Tree
• The HTML DOM can be accessed with JavaScript (and
other programming languages).
• All HTML elements are defined as objects, and the
programming interface is the object methods and
object properties .
• A method is an action you can do (like add or modify
an element).
• A property is a value that you can get or set (like the
name or content of a node).
The getElementById() Method
– The getElementById() method returns the element with
the specified ID:
41.
42. Creating New HTML Elements (Nodes)
• To add a new element to the HTML DOM, you must create the
element (element node) first, and then append it to an existing
element.
– Example
• <div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
43. <!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
44. • This code creates a new <p> element:
• var para = document.createElement("p");
• To add text to the <p> element, you must create a text node first. This
code creates a text node:
• var node = document.createTextNode("This is a new paragraph.");
• Then you must append the text node to the <p> element:
• para.appendChild(node);
• Finally you must append the new element to an existing element.
• This code finds an existing element:
• var element = document.getElementById("div1");
• This code appends the new element to the existing element:
• element.appendChild(para);
•
45. Creating new HTML Elements - insertBefore()
• The appendChild() method in the previous example, appended the new
element as the last child of the parent.
• If you don't want that you can use the insertBefore() method:
• Example
• <div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
46. <!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script>
</body>
</html>
47. Removing Existing HTML Elements
• To remove an HTML element, you must know the
parent of the element:
• Example
• <div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
48. <!DOCTYPE html>
<html>
<body>
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<button onclick="myFunction()">Remove Element</button>
<script>
function myFunction() {
var elmnt = document.getElementById("p1");
elmnt.remove();
}
</script>
</body>
</html>
49. Replacing HTML Elements
• To replace an element to the HTML DOM, use the replaceChild() method:
• Example
• <div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
</script>
50. <!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>
</body>
</html>
55. JavaScript HTML DOM Collections
• The getElementsByTagName() method returns
an HTMLCollection object.
• An HTMLCollection object is an array-like list
(collection) of HTML elements.
56. <!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Hello World!</p>
<p>Hello Norway!</p>
<p id="demo"></p>
<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
"The innerHTML of the second paragraph is: " +
myCollection[1].innerHTML;
</script>
</body>
</html>
57. HTML HTMLCollection Length
• The length property defines the number of elements in an HTMLCollection:
• <!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Hello World!</p>
<p>Hello Norway!</p>
<p id="demo"></p>
<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
"This document contains " + myCollection.length + " paragraphs.";
</script>
</body>
</html>
58. <!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Hello World!</p>
<p>Hello Norway!</p>
<p>Click the button to change the color of all p elements.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}
}
</script>
</body>
</html>
59. JavaScript Date Objects
• Creating Date Objects
• Date objects are created with the new Date() constructor.
• There are 4 ways to create a new date object:
• new Date()
• new Date(year, month, day, hours, minutes, seconds,
milliseconds)
• new Date(milliseconds)
• new Date(date string)
60. <!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>Using new Date(), creates a new date object with the current date
and time:</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
61. 1. 7 numbers specify year, month, day, hour,
minute, second, and millisecond (in that order):
• Example
• var d = new Date(2018, 11, 24, 10, 33, 30, 0);
2. 6 numbers specify year, month, day, hour,
minute, second:
• Example
• var d = new Date(2018, 11, 24, 10, 33, 30);
62. 3. 5 numbers specify year, month, day, hour, and
minute:
Example
var d = new Date(2018, 11, 24, 10, 33);
4. 4 numbers specify year, month, day, and hour:
Example
var d = new Date(2018, 11, 24, 10);
5. 3 numbers specify year, month, and day:
Example
var d = new Date(2018, 11, 24);
63. • 6. 2 numbers specify year and month:
• Example
• var d = new Date(2018, 11);
64. <!DOCTYPE html>
<html>
<body>
<h2>JavaScript new Date()</h2>
<p>One parameter will be interpreted as new Date(milliseconds).</p>
<p id="demo"></p>
<script>
var d = new Date(2018);
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
65. Date Methods
• When a Date object is created, a number of methods allow you to
operate on it.
• Displaying Dates:
• JavaScript will (by default) output dates in full text string format:
• Wed Mar 25 2015 05:30:00 GMT+0530 (India Standard Time)
• When you display a date object in HTML, it is automatically
converted to a string, with the toString() method.
• Example
• d = new Date();
• document.getElementById("demo").innerHTML = d;
• Same as:
• d = new Date();
• document.getElementById("demo").innerHTML = d.toString();
66. • The toUTCString() method converts a date to a UTC string (a date
display standard).
• Example
• var d = new Date();
• document.getElementById("demo").innerHTML = d.toUTCString();
• The toDateString() method converts a date to a more readable
format:
• Example
• var d = new Date();
• document.getElementById("demo").innerHTML = d.toDateString();
67. JavaScript Date Formats
Type Example
ISO Date "2015-03-25" (The International Standard)
Short Date "03/25/2015"
Long Date "Mar 25 2015" or "25 Mar 2015"
68. JavaScript Get Date Methods
Method Description
getFullYear() Get the year as a four digit number (yyyy)
getMonth() Get the month as a number (0-11)
getDate() Get the day as a number (1-31)
getHours() Get the hour (0-23)
getMinutes() Get the minute (0-59)
getSeconds() Get the second (0-59)
getMilliseconds() Get the millisecond (0-999)
getTime() Get the time (milliseconds since January 1,
1970)
getDay() Get the weekday as a number (0-6)
Date.now() Get the time. ECMAScript 5.
69. <!DOCTYPE html>
<html>
<body>
<h2>JavaScript Get Date Methods</h2>
<p>The internal clock in JavaScript counts from midnight January 1,
1970.</p>
<p>The getTime() function returns the number of milliseconds since
then:</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
document.write(d.getFullYear());
document.write("<br>");
71. JavaScript Set Date Methods
Method Description
setDate() Set the day as a number (1-31)
setFullYear() Set the year (optionally month and day)
setHours() Set the hour (0-23)
setMilliseconds() Set the milliseconds (0-999)
setMinutes() Set the minutes (0-59)
setMonth() Set the month (0-11)
setSeconds() Set the seconds (0-59)
setTime() Set the time (milliseconds since January 1,
1970)
72. The setFullYear() method sets the year of a date object. In this example to
2020:
Example
<script>
var d = new Date();
d.setFullYear(2020);
document.getElementById("demo").innerHTML = d;
</script>
The setMonth() method sets the month of a date object (0-11):
Example
<script>
var d = new Date();
d.setMonth(11);
document.getElementById("demo").innerHTML = d;
</script>
73. The setDate() Method
The setDate() method sets the day of a date object (1-31):
Example
<script>
var d = new Date();
d.setDate(15);
document.getElementById("demo").innerHTML = d;
</script>
The setDate() method can also be used to add days to a date:
Example
<script>
var d = new Date();
d.setDate(d.getDate() + 50);
document.getElementById("demo").innerHTML = d;
</script>
74. The setHours() Method
The setHours() method sets the hours of a date object (0-23):
Example
<script>
var d = new Date();
d.setHours(22);
document.getElementById("demo").innerHTML = d;
</script>
The setMinutes() Method
The setMinutes() method sets the minutes of a date object (0-59):
Example
<script>
var d = new Date();
d.setMinutes(30);
document.getElementById("demo").innerHTML = d;
</script>
75. JS OBJECTS
• Objects are variables too. But objects can contain
many values.
• This code assigns many values (Fiat, 500, white)
to a variable named car:
• var car = {type:"Fiat", model:"500",
color:"white"};
• The values are written as name:value pairs
(name and value separated by a colon).
• JavaScript objects are containers for named
values called properties or methods.
76. • In JavaScript, almost "everything" is an object.
• Booleans can be objects (if defined with the new keyword)
• Numbers can be objects (if defined with the new keyword)
• Strings can be objects (if defined with the new keyword)
• Dates are always objects
• Maths are always objects
• Regular expressions are always objects
• Arrays are always objects
• Functions are always objects
• Objects are always objects
• All JavaScript values, except primitives, are objects.
77. • JavaScript Primitives
• A primitive value is a value that has no properties or methods.
• A primitive data type is data that has a primitive value.
• JavaScript defines 5 types of primitive data types:
• string
• number
• boolean
• null
• undefined
• Primitive values are immutable (they are hardcoded and therefore
cannot be changed).
78. Creating a JavaScript Object
• With JavaScript, you can define and create your own objects.
• There are different ways to create new objects:
• Define and create a single object, using an object literal.
• var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
• Define and create a single object, with the keyword new.
• var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
• Define an object constructor, and then create objects of the
constructed type.
79. • Accessing Object Properties
• You can access object properties in two ways:
objectName.propertyName
or
objectName["propertyName"]
80. <!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>There are two different ways to access an object property.</p>
<p>You can use person.property or person["property"].</p>
<p id="demo"></p>
<script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>
81. Object Methods
• Objects can also have methods.
• Methods are actions that can be performed
on objects.
• Methods are stored in properties as function
definitions.
The this Keyword
• In a function definition, this refers to the
"owner" of the function.
82. <!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>An object method is a function definition, stored as a property value.</p>
<p id="demo"></p>
<script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
83. JavaScript Arrays
• JavaScript arrays are used to store multiple values in a single
variable.
• Example
• var cars = ["Saab", "Volvo", "BMW"];
• Arrays are Objects
• Arrays are a special type of objects. The typeof operator in
JavaScript returns "object" for arrays.
• Arrays use numbers to access its "elements".
• In this example, person[0] returns John:
• Array:
• var person = ["John", "Doe", 46];
85. JavaScript Math Object
• Math.E // returns Euler's number
Math.PI // returns PI
Math.SQRT2 // returns the square root of 2
Math.SQRT1_2 // returns the square root of 1/2
Math.LN2 // returns the natural logarithm of 2
Math.LN10 // returns the natural logarithm of
10
Math.LOG2E // returns base 2 logarithm of E
Math.LOG10E // returns base 10 logarithm of E
86. Math Methods
Math.round(x) Returns x rounded to its nearest integer
Math.ceil(x) Returns x rounded up to its nearest integer
Math.floor(x) Returns x rounded down to its nearest integer
Math.trunc(x) Returns the integer part of x (new in ES6)
87. ⦿ var list = [2, 4, 6, 8, 10]
⚫slice() – returns part of an array: list.slice(1,3) => array [4, 6]
⚫concat( ) – concatenates new elements to the end of the array;
returns new array: list.concat(12) => [2, 4, 6, 8, 10, 12]
⚫join( ) – creates a string from the array elements, separated by
commas (or specified delimiter): list.join(“ : ”) => “2 : 4 : 6 : 8: 10”
⚫reverse( ) – reverses order of the array elements; affects calling
array
⚫sort( ) – converts elements to strings, sorts them alphabetically
(or you can specify another order as a function); affects calling
array
⚫push( ), pop( ) – add/delete elements to the high end of array
⚫unshift( ), shift( ) – add/delete elements at the beginning of the
array
88.
89.
90.
91.
92.
93. Splice() method
• Syntax
• array.splice(index, howmany, item1, ....., itemX)
• Parameter Values
• ParameterDescription
• indexRequired. An integer that specifies at what
position to add/remove items, Use negative values to
specify the position from the end of the array
• howmanyOptional. The number of items to be
removed. If set to 0, no items will be removed
• item1, ..., itemXOptional. The new item(s) to be added
to the array
94.
95.
96.
97.
98.
99.
100. Deleting Elements
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<p>Deleting elements leaves undefined holes in an array.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];
</script>
</body>
</html>
Output:
JavaScript Array Methods
Deleting elements leaves undefined holes in an array.
The first fruit is: Banana
The first fruit is: undefined