JavaScript Core API and Browser Object Model (BOM)
SE-2840
Dr. Mark L. Hornick
1
D
y
n
a
m
i
c
H
T
M
L
Making web pages interactive with
JavaScript
J
a
v
a
S
c
r
i
p
t
“
c
o
r
e
A
P
I
”
d
e
f
i
n
e
s
o
n
l
y
a
f
e
w
n
a
t
i
v
e
o
b
j
e
c
t
s
–
t
h
e
r
e
m
a
i
n
d
e
r
c
o
m
e
f
r
o
m
t
h
e
h
o
s
t
i
n
g
e
n
v
i
r
o
n
m
e
n
t
(
i
.
e
.
t
h
e
b
r
o
w
s
e
r
)
String
– similar to the Java String class
Array
– generic container/collection class
Math
- like the Java Math class
Number, Boolean
– wrapper classes similar to Java
wrapper classes (Integer, Double etc)
var x = 123; // x is treated as a Number
var y = “123”; // y is treated as a String
var z = new Number(“123”); // z is a Number
Date
– represents dates and times
CS-422
Dr. Mark L. Hornick
2
P
a
r
t
1
:
T
h
e
B
r
o
w
s
e
r
O
b
j
e
c
t
M
o
d
e
l
(
B
O
M
)
SE-2840
Dr. Mark L. Hornick
3
T
h
e
B
O
M
i
s
a
s
e
t
o
f
J
a
v
a
S
c
r
i
p
t
-
a
c
c
e
s
s
i
b
l
e
o
b
j
e
c
t
s
t
h
a
t
c
o
m
p
r
i
s
e
v
a
r
i
o
u
s
e
l
e
m
e
n
t
s
o
f
a
B
r
o
w
s
e
r
These are instances of classes defined by
the Browser
i.e. they are not native to Javascript like String,
Date, etc
That is, not part of the JavaScript core API objects
The BOM today has been standardized across
current versions of browsers
Until very recently different browsers implemented
BOM objects differently
SE-2840
Dr. Mark L. Hornick
4
w
i
n
d
o
w
i
s
t
h
e
t
o
p
-
l
e
v
e
l
o
b
j
e
c
t
i
n
t
h
e
B
O
M
h
i
e
r
a
r
c
h
y
SE-2840
Dr. Mark L. Hornick
5
prompt(), and alert()
are methods of the
browser’s
window
object
You can call alert either with:
window.alert(“Hello”);
Or just:
alert(“Hello”);
window
is a
global object
, which means you
don’t need to use its name to access its
properties and methods
Also: every global variable and
function you define becomes part
of the window object due to
JavaScript object extension.
SE-2840
Dr. Mark L. Hornick
6
S
o
m
e
w
i
n
d
o
w
m
e
t
h
o
d
s
a
n
d
a
t
t
r
i
b
u
t
e
s
Methods:
alert() – posts a message dialog
confirm("question") - returns true or false
prompt("question", "default") - returns a String
open() - open a new browser window
close() – close a window
Properties (attributes)
defaultStatus – text in status bar
name – name of the window
opener – window that created this window
outerwidth, outerheight – window extents
Note: The window object contains many other methods and properties for
various purposes – view them from within the browser debugger
O
t
h
e
r
B
O
M
o
b
j
e
c
t
s
a
r
e
c
h
i
l
d
r
e
n
o
f
t
h
e
w
i
n
d
o
w
o
b
j
e
c
t
SE-2840
Dr. Mark L. Hornick
7
Represents information about the Browser and
the underlying OS
Information about the display capabilities of
the client PC running the Browser
Information on recently visited sites
Information on current URL
Represents the current web page – the DOM
Note: This list is not complete
SE-2840
Dr. Mark L. Hornick
8
S
o
m
e
n
a
v
i
g
a
t
o
r
m
e
t
h
o
d
s
a
n
d
a
t
t
r
i
b
u
t
e
s
Methods:
javaEnabled
() – returns true or false
Geolocation – new HTML5
Properties (attributes)
appCodeName –
code name of the browser
appName -
name of the browser
appVersion-
platform and version of browser
cookieEnabled –
true if cookies are enabled
userAgent –
user-agent header sent to server
SE-2840
Dr. Mark L. Hornick
9
S
o
m
e
s
c
r
e
e
n
m
e
t
h
o
d
s
a
n
d
a
t
t
r
i
b
u
t
e
s
Methods:
none
Properties (attributes)
availHeight, availWidth, height, width –
metrics of
display screen size
bufferDepth, colorDepth, pixelDepth –
metrics of the
color palette
deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI -
number of dots per inch of the display screen
updateInterval –
refresh interval
SE-2840
Dr. Mark L. Hornick
10
S
o
m
e
h
i
s
t
o
r
y
m
e
t
h
o
d
s
a
n
d
a
t
t
r
i
b
u
t
e
s
Methods:
back() –
loads the previous URL in the history list
forward() –
loads the next URL in the history list
go() –
loads specific page in the history list
Properties (attributes)
length –
number of elements in the history list
SE-2840
Dr. Mark L. Hornick
11
S
o
m
e
l
o
c
a
t
i
o
n
m
e
t
h
o
d
s
a
n
d
a
t
t
r
i
b
u
t
e
s
Methods:
assign() –
loads a new document
reload() –
reloads the current document
replace() –
Replaces the current document with a new one
Properties (attributes)
host, hostname, href, pathname, port –
hostname/port
number/path/port/URL information
protocol –
protocol of the current URL
hash, search –
URL from the hash sign/question mark
M
a
i
n
h
e
a
d
a
c
h
e
s
w
i
t
h
B
O
M
Differences between browsers
Implementations of respective BOM models and
the functions or attributes supported by the
respective objects
Each new release of IE or Firefox has new
features supported
Not every feature available in one browser will be
supported in the other
Encouraging news:
IE and Firefox are complying with standards more
than ever
SE-2840
Dr. Mark L. Hornick
12
As of 2013, the info on this
page is obsolete!
P
a
r
t
2
:
T
h
e
D
o
c
u
m
e
n
t
O
b
j
e
c
t
M
o
d
e
l
SE-2840
Dr. Mark L. Hornick
13
Note: The Document Object Model (DOM)
is a child/subset of the BOM
T
h
e
D
o
c
u
m
e
n
t
O
b
j
e
c
t
M
o
d
e
l
(
D
O
M
)
r
e
p
r
e
s
e
n
t
s
t
h
e
o
b
j
e
c
t
s
t
h
a
t
c
o
m
p
r
i
s
e
a
w
e
b
p
a
g
e
d
o
c
u
m
e
n
t
SE-2840
Dr. Mark L. Hornick
14
The hierarchical structure of the DOM below the
<body> element depends on the current web page
content
What SE2811 pattern
Does this remind you of?
SE-2840
Dr. Mark L. Hornick
15
A
l
l
n
o
d
e
s
h
a
v
e
r
e
l
a
t
i
o
n
s
h
i
p
s
t
o
e
a
c
h
o
t
h
e
r
E
v
e
r
y
n
o
d
e
h
a
s
a
p
a
r
e
n
t
e
x
c
e
p
t
f
o
r
t
h
e
d
o
c
u
m
e
n
t
n
o
d
e
Most elements have descendant
nodes
p
em
Here is an
word
emphasized
id=“em1”
id=“par1”
Element node
Text node
Attribute node
document
html
title
body
My title
head
<p id=“par1”>
Here is an
<em id=“em1”>
emphasized
</em>
word
</p>
Here is an
emphasized
word
SE-2840
Dr. Mark L. Hornick
16
L
o
o
k
i
n
g
c
l
o
s
e
r
a
t
a
n
E
l
e
m
e
n
t
o
b
j
e
c
t
w
i
t
h
i
n
t
h
e
<
b
o
d
y
>
:
T
e
x
t
a
n
d
A
t
t
r
i
b
u
t
e
d
e
s
c
e
n
d
e
n
t
s
p
em
Element
Here is an
Text
word
emphasized
Attribute
id=“em1”
id=“par1”
<p id=“par1”>
Here is an
<em id=“em1”>
emphasized
</em>
word
</p>
Here is an
emphasized
word
SE-2840
Dr. Mark L. Hornick
17
E
a
c
h
E
l
e
m
e
n
t
,
A
t
t
r
i
b
u
t
e
,
o
r
T
e
x
t
f
r
a
g
m
e
n
t
i
n
a
n
H
T
M
L
d
o
c
u
m
e
n
t
i
s
r
e
p
r
e
s
e
n
t
e
d
b
y
a
c
o
r
r
e
s
p
o
n
d
i
n
g
o
b
j
e
c
t
i
n
t
h
e
D
O
M
h
i
e
r
a
r
c
h
y
The DOM objects are programmatically accessible via
Javascript
T
h
e
s
e
o
b
j
e
c
t
s
a
r
e
c
a
l
l
e
d
n
o
d
e
s
Nodes can be dynamically
accessed, added,
deleted, or modified
p
em
Here is an
word
emphasized
id=“em1”
id=“par1”
Note: There is also a
Comment
node.
Element node
Text node
Attribute node
SE-2840
Dr. Mark L. Hornick
18
T
h
e
D
O
M
i
m
p
l
e
m
e
n
t
e
d
b
y
m
o
d
e
r
n
w
e
b
b
r
o
w
s
e
r
s
a
l
l
o
w
s
y
o
u
t
o
c
h
a
n
g
e
v
i
r
t
u
a
l
l
y
a
n
y
t
h
i
n
g
o
n
a
w
e
b
p
a
g
e
p
em
Element
Here is an
Text
word
emphasized
Attribute
id=“em1”
id=“par1”
<p id=“par1”>
Here is an
<em id=“em1”>
emphasized
</em>
word
</p>
Here is an
emphasized
word
Every element of a webpage can be accessed as a DOM object
SE-2840
Dr. Mark L. Hornick
19
S
o
m
e
d
o
c
u
m
e
n
t
m
e
t
h
o
d
s
a
n
d
a
t
t
r
i
b
u
t
e
s
f
o
r
a
c
c
e
s
s
i
n
g
v
a
r
i
o
u
s
s
u
b
n
o
d
e
s
document
Methods:
getElementById(id) –
gets the Element in the document with a specified id
getElementsByTagName(tagName) –
gets a collection of Elements with the
specified tag name (e.g. “h1”)
getElementsByClassName(className) –
gets a collection of Elements with the
specified class name (e.g. “highlights”)
getElementByName() –
gets a collection of Elements with the specified name (ex
of named element: <form name=“form1"><input type="text"></form> )
querySelectorAll() –
gets a collection of Elements with the specified selector
pattern (e.g. “p em”)
querySelector() –
gets the first Element with the specified selector pattern (e.g. “p
em”)
2013 Note: Seems to be limited support for this method (fails on FF)
document
Properties
anchors[ ], forms[ ], images[ ], links[ ] –
collections of all objects of this type within
the current document
body –
the <body> Element object
documentElement–
the <html> Element object
Note: The document object contains many other methods and properties
for various other purposes – view them from within the browser debugger
SE-2840
Dr. Mark L. Hornick
20
J
a
v
a
S
c
r
i
p
t
a
c
c
e
s
s
t
o
D
O
M
n
o
d
e
s
let pars = document.getElementsByTagName(“p”);
//array of all <p> nodes
let e = pars.item(0);
// first <p>
e = pars[0];
// also first <p>
e = document.getElementById(“em1”);
// specific element with #em1 id
getElementByID is one of the easiest ways to
access an individual element
p
em
Here is an
word
emphasized
id=“em1”
id=“par1”
Element node
Text node
Attribute node
SE-2840
Dr. Mark L. Hornick
21
N
a
v
i
g
a
t
i
n
g
a
m
o
n
g
n
o
d
e
s
(
t
h
i
s
i
s
t
e
d
i
o
u
s
)
let p1 = document.getElementById(“par1”);
// <p> node with id=“par1”
let first = p1.firstChild;
// first child node: “Here is an”
let next = first.nextSibling;
// next child: “em”
let last = p1.lastChild;
// last child: “word”
let prev = last.prevSibling;
// previous child: “em”
let parent = p1.parentNode;
// whatever element contained <p>
p
em
Here is an
word
emphasized
id=“em1”
id=“par1”
Element node
Text node
Attribute node
SE-2840
Dr. Mark L. Hornick
22
B
e
s
i
d
e
s
c
h
a
n
g
i
n
g
t
h
e
e
x
i
s
t
i
n
g
H
T
M
L
m
a
r
k
u
p
w
i
t
h
i
n
a
n
o
d
e
,
w
e
c
a
n
s
c
r
i
p
t
t
h
e
D
O
M
t
o
c
r
e
a
t
e
e
n
t
i
r
e
l
y
n
e
w
n
o
d
e
s
let elm = document.createElement("p"); // creates free-standing <p>
let txt = document.createTextNode("Hello");elm.appendChild(txt);
elm.setAttribute("id", “hellopar");txt = document.createTextNode(" there.");elm.appendChild(txt);
document.body.appendChild(elm);
// put in <body>
p
Hello
there.
id=“par1”
body
<body>
<p id=“par1”>Hello there.</p>
</body>
SE-2840
Dr. Mark L. Hornick
23
G
e
t
t
i
n
g
/
S
e
t
t
i
n
g
t
h
e
H
T
M
L
w
i
t
h
i
n
a
n
o
d
e
let p1 = document.getElementById(“par1”);
// <p> node with id=“par1”
let markup = p1.innerHTML;
//
“Here is an<em id=“black>emphasized</em> word”
p1.innerHTML = “Here is some <em>new</em> text!”;
Use this approach whenever possible to modify
the content of an html element!
p
em
Here is an
word
emphasized
id=“em1”
id=“par1”
Element node
Text node
Attribute node
SE-2840
Dr. Mark L. Hornick
24
T
h
e
i
d
o
r
c
l
a
s
s
o
f
a
n
e
x
i
s
t
i
n
g
e
l
e
m
e
n
t
c
a
n
b
e
c
h
a
n
g
e
d
d
y
n
a
m
i
c
a
l
l
y
i
n
o
r
d
e
r
t
o
m
o
d
i
f
y
t
h
e
e
l
e
m
e
n
t
’
s
a
p
p
e
a
r
a
n
c
e
let elm = document.getElementById(“par1”);
elm.setAttribute("id", “par2");p
Hello
there.
id=“par1”
body
<body>
<p id=“par1”>Hello there.</p>
</body>
<body>
<p id=“par2”>Hello there.</p>
</body>
id=“par2”
<style type=“text/css”>
#par1{ color:blue;} #par2{ color:red;}</style>
…
A
l
l
m
o
d
e
r
n
b
r
o
w
s
e
r
s
i
m
p
l
e
m
e
n
t
t
h
e
e
l
e
m
e
n
t
’
s
s
t
y
l
e
o
b
j
e
c
t
The
style
object contains the element’s CSS
properties
You can use the
style
object to change any CSS
property the element supports
S
t
y
l
e
p
r
o
p
e
r
t
y
n
a
m
e
s
g
e
n
e
r
a
l
l
y
c
o
r
r
e
s
p
o
n
d
t
o
C
S
S
p
r
o
p
e
r
t
y
n
a
m
e
s
,
w
i
t
h
a
f
e
w
e
x
c
e
p
t
i
o
n
s
In the case of CSS property names that contain a
hyphen, remove the hyphen and capitalize the next
letter for the corresponding style property
CSS property: “background-color”
Style
object property: “backgroundColor”
SE-2840
Dr. Mark L. Hornick
25
SE-2840
Dr. Mark L. Hornick
26
O
r
s
t
y
l
e
a
t
t
r
i
b
u
t
e
s
c
a
n
b
e
m
o
d
i
f
i
e
d
d
i
r
e
c
t
l
y
v
i
a
t
h
e
s
t
y
l
e
o
b
j
e
c
t
p
Hello
there.
id=“par1”
body
The <p> element’s id remains “par1”,
but the style object is more specific
than the CSS rule, so the CSS rule is
overridden.
<style type=“text/css”>
#par1{ color:blue;} #par2 { color:red;}</style>
…
<script>
let elm = document.getElementById(“par1”);
elm.style.color=“green”;
</script>
…
SE-2840
Dr. Mark L. Hornick
27
T
h
e
v
i
s
i
b
i
l
i
t
y
a
n
d
d
i
s
p
l
a
y
s
t
y
l
e
a
t
t
r
i
b
u
t
e
s
a
f
f
e
c
t
w
h
e
t
h
e
r
t
h
e
e
l
e
m
e
n
t
i
s
s
e
e
n
o
r
n
o
t
,
b
u
t
i
n
d
i
f
f
e
r
e
n
t
w
a
y
s
var elm = document.getElementById(“error”);
// gets error message
elm.style.display = “none”;
// removes element from display process
elm.style.display = “block”;
// includes element
elm.style.visibility = “hidden”;
// hides
elm.style.visibility = “visible”;
// shows
The
display
attribute, when set to “
none
”, causes the element to be
removed from the display. Other elements will fill in the space left
behind.
The
visibility
attribute, when set to “
hidden
”, causes the element to
be kept in the display, but not shown. An empty space will appear
where the element would otherwise appear.
This is a common approach to displaying
or hiding web page error messages
Explore the fundamentals of JavaScript Core API and the Browser Object Model (BOM) in this informative content. Learn about native objects, host environment elements, global objects like window, BOM hierarchy, object extension in JavaScript, and essential window methods and attributes for interactive web development.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Dynamic HTML Making web pages interactive with JavaScript SE-2840 1 Dr. Mark L. Hornick
JavaScript core API defines only a few native objects the remainder come from the hosting environment (i.e. the browser) String similar to the Java String class Array generic container/collection class Math - like the Java Math class Number, Boolean wrapper classes similar to Java wrapper classes (Integer, Double etc) var x = 123; // x is treated as a Number var y = 123 ; // y is treated as a String var z = new Number( 123 ); // z is a Number Date represents dates and times CS-422 2 Dr. Mark L. Hornick
Part 1: The Browser Object Model (BOM) SE-2840 3 Dr. Mark L. Hornick
The BOM is a set of JavaScript- accessible objects that comprise various elements of a Browser These are instances of classes defined by the Browser i.e. they are not native to Javascript like String, Date, etc That is, not part of the JavaScript core API objects The BOM today has been standardized across current versions of browsers Until very recently different browsers implemented BOM objects differently SE-2840 4 Dr. Mark L. Hornick
window is the top-level object in the BOM hierarchy prompt(), and alert() are methods of the browser s window object You can call alert either with: window.alert( Hello ); Or just: alert( Hello ); window is a global object, which means you don t need to use its name to access its properties and methods Also: every global variable and function you define becomes part of the window object due to JavaScript object extension. SE-2840 5 Dr. Mark L. Hornick
Some window methods and attributes Methods: alert() posts a message dialog confirm("question") - returns true or false prompt("question", "default") - returns a String open() - open a new browser window close() close a window Properties (attributes) defaultStatus text in status bar name name of the window opener window that created this window outerwidth, outerheight window extents Note: The window object contains many other methods and properties for various purposes view them from within the browser debugger SE-2840 6 Dr. Mark L. Hornick
Other BOM objects are children of the window object Note: This list is not complete Represents information about the Browser and the underlying OS Information about the display capabilities of the client PC running the Browser Information on recently visited sites Information on current URL Represents the current web page the DOM SE-2840 7 Dr. Mark L. Hornick
Some navigator methods and attributes Methods: javaEnabled() returns true or false Geolocation new HTML5 Properties (attributes) appCodeName code name of the browser appName - name of the browser appVersion- platform and version of browser cookieEnabled true if cookies are enabled userAgent user-agent header sent to server SE-2840 8 Dr. Mark L. Hornick
Some screen methods and attributes Methods: none Properties (attributes) availHeight, availWidth, height, width metrics of display screen size bufferDepth, colorDepth, pixelDepth metrics of the color palette deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI - number of dots per inch of the display screen updateInterval refresh interval SE-2840 9 Dr. Mark L. Hornick
Some history methods and attributes Methods: back() loads the previous URL in the history list forward() loads the next URL in the history list go() loads specific page in the history list Properties (attributes) length number of elements in the history list SE-2840 10 Dr. Mark L. Hornick
Some location methods and attributes Methods: assign() loads a new document reload() reloads the current document replace() Replaces the current document with a new one Properties (attributes) host, hostname, href, pathname, port hostname/port number/path/port/URL information protocol protocol of the current URL hash, search URL from the hash sign/question mark SE-2840 11 Dr. Mark L. Hornick
Main headaches with BOM Obsolete! Differences between browsers Implementations of respective BOM models and the functions or attributes supported by the respective objects Each new release of IE or Firefox has new features supported Not every feature available in one browser will be supported in the other Encouraging news: IE and Firefox are complying with standards more than ever SE-2840 Dr. Mark L. Hornick As of 2013, the info on this page is obsolete! 12
Part 2: The Document Object Model Note: The Document Object Model (DOM) is a child/subset of the BOM SE-2840 13 Dr. Mark L. Hornick
The Document Object Model (DOM) represents the objects that comprise a web page document What SE2811 pattern Does this remind you of? The hierarchical structure of the DOM below the <body> element depends on the current web page content SE-2840 14 Dr. Mark L. Hornick
All nodes have relationships to each other Every node has a parent except for the document node Most elements have descendant nodes document html head <p id= par1 > Here is an<em id= em1 >emphasized</em> word</p> body Here is an emphasized word title p My title Element node em Here is an word id= par1 Text node id= em1 emphasized Attribute node SE-2840 15 Dr. Mark L. Hornick
Looking closer at an Element object within the <body>: Text and Attribute descendents <p id= par1 > Here is an<em id= em1 >emphasized</em> word</p> Here is an emphasized word p Element em Here is an word Text id= par1 Attribute id= em1 emphasized SE-2840 16 Dr. Mark L. Hornick
Each Element, Attribute, or Text fragment in an HTML document is represented by a corresponding object in the DOM hierarchy The DOM objects are programmatically accessible via Javascript These objects are called nodes Element node Text node Nodes can be dynamically accessed, added, deleted, or modified p Attribute node em Here is an word id= par1 Note: There is also a Comment node. id= em1 emphasized SE-2840 17 Dr. Mark L. Hornick
The DOM implemented by modern web browsers allows you to change virtually anything on a webpage <p id= par1 > Here is an<em id= em1 >emphasized</em> word</p> Here is an emphasized word p Element em Here is an word Text id= par1 Attribute id= em1 emphasized Every element of a webpage can be accessed as a DOM object SE-2840 18 Dr. Mark L. Hornick
Some document methods and attributes for accessing various subnodes document Methods: getElementById(id) gets the Element in the document with a specified id getElementsByTagName(tagName) gets a collection of Elements with the specified tag name (e.g. h1 ) getElementsByClassName(className) gets a collection of Elements with the specified class name (e.g. highlights ) getElementByName() gets a collection of Elements with the specified name (ex of named element: <form name= form1"><input type="text"></form> ) querySelectorAll() gets a collection of Elements with the specified selector pattern (e.g. p em ) querySelector() gets the first Element with the specified selector pattern (e.g. p em ) 2013 Note: Seems to be limited support for this method (fails on FF) document Properties anchors[ ], forms[ ], images[ ], links[ ] collections of all objects of this type within the current document body the <body> Element object documentElement the <html> Element object Note: The document object contains many other methods and properties for various other purposes view them from within the browser debugger SE-2840 19 Dr. Mark L. Hornick
JavaScript access to DOM nodes let pars = document.getElementsByTagName( p );//array of all <p> nodes let e = pars.item(0); e = pars[0]; e = document.getElementById( em1 );// specific element with #em1 id // first <p> // also first <p> getElementByID is one of the easiest ways to access an individual element p Element node em Here is an word id= par1 Text node id= em1 emphasized Attribute node SE-2840 20 Dr. Mark L. Hornick
Navigating among nodes (this is tedious) Avoid; use ids! let p1 = document.getElementById( par1 ); // <p> node with id= par1 let first = p1.firstChild; // first child node: Here is an let next = first.nextSibling; // next child: em let last = p1.lastChild; let prev = last.prevSibling; // previous child: em // last child: word let parent = p1.parentNode; // whatever element contained <p> p Element node em Here is an word id= par1 Text node id= em1 emphasized Attribute node SE-2840 21 Dr. Mark L. Hornick
Besides changing the existing HTML markup within a node, we can script the DOM to create entirely new nodes </body>Complex; Avoid! let elm = document.createElement("p"); // creates free-standing <p> let txt = document.createTextNode("Hello"); elm.appendChild(txt); elm.setAttribute("id", hellopar"); txt = document.createTextNode(" there."); elm.appendChild(txt); document.body.appendChild(elm); // put in <body> body id= par1 p Hello there. <body> <p id= par1 >Hello there.</p> SE-2840 22 Dr. Mark L. Hornick
Getting/Setting the HTML within a node let p1 = document.getElementById( par1 ); // <p> node with id= par1 let markup = p1.innerHTML; // Here is an<em id= black>emphasized</em> word p1.innerHTML = Here is some <em>new</em> text! ; Use this approach whenever possible to modify the content of an html element! p Element node em Here is an word id= par1 Text node id= em1 emphasized Attribute node SE-2840 23 Dr. Mark L. Hornick
The id or class of an existing element can be changed dynamically in order to modify the element s appearance let elm = document.getElementById( par1 ); elm.setAttribute("id", par2"); <style type= text/css > #par1{ color:blue;} #par2{ color:red;} </style> body id= par1 p <body> <p id= par1 >Hello there.</p> </body> id= par2 Hello there. <body> <p id= par2 >Hello there.</p> </body> SE-2840 24 Dr. Mark L. Hornick
All modern browsers implement the element s style object The style object contains the element s CSS properties You can use the style object to change any CSS property the element supports Style property names generally correspond to CSS property names, with a few exceptions In the case of CSS property names that contain a hyphen, remove the hyphen and capitalize the next letter for the corresponding style property CSS property: background-color Style object property: backgroundColor SE-2840 25 Dr. Mark L. Hornick
Or style attributes can be modified directly via the style object <style type= text/css > #par1{ color:blue;} #par2 { color:red;} </style> <script> let elm = document.getElementById( par1 ); elm.style.color= green ; </script> body p id= par1 The <p> element s id remains par1 , but the style object is more specific than the CSS rule, so the CSS rule is overridden. Hello there. SE-2840 26 Dr. Mark L. Hornick
The visibility and display style attributes affect whether the element is seen or not, but in different ways var elm = document.getElementById( error ); // gets error message elm.style.display = none ; // removes element from display process elm.style.display = block ; // includes element elm.style.visibility = hidden ; // hides elm.style.visibility = visible ; // shows The displayattribute, when set to none , causes the element to be removed from the display. Other elements will fill in the space left behind. The visibilityattribute, when set to hidden , causes the element to be kept in the display, but not shown. An empty space will appear where the element would otherwise appear. This is a common approach to displaying or hiding web page error messages SE-2840 27 Dr. Mark L. Hornick
