Class or Method Description Example
appendChild() An HTML DOM method that after //Creates the element <p> and text “Hello World”.
creating an element, you can use Appends Hello World <p> to the HTML document.
this function to place the element
<head>
in the appropriate location within
the document. The element to <script>
append is the only parameter.
function addPara() {
var newPara = [Link](“p”);
var newText = [Link](“Hello
World!”);
[Link](newText);
[Link](newPara);
</script>
</head>
<body onload=“addPara()”>
</body>
Arrays Created by declaring the array const Beatles = [“Ringo”, “Paul”, “George”, “John”];
elements in [ ]. An array can be
//Here Beatles[0] is “Ringo”.
assigned to a variable, usually
using the keyword const or var.
Class or Method Description Example
Arrays use zero based indexing to
access their elements.
Date() Constructor is new Date([optional //create a new date from a string
parameters]). If the constructor is
var newDate = new Date(“2021-1-17 13:15:30”);
declared with no parameters, it
returns current local date and //create a new date instance representing 17 Jan 2021
time. New dates can be created by 00:00:00
passing parameters to new Date
//note that the month number is zero-based
function.
var newDate = new Date(2021, 0, 17);
[Link]() Takes one tag name parameter and //Creates the element <p> and text “Hello World”.
creates an element with that Appends Hello World <p> to the HTML document.
name. Can place the element
<head>
elsewhere on the page using
functions like insertBefore(), <script>
appendChild(), replaceChild().
function addPara() {
var newPara = [Link](“p”);
var newText = [Link](“Hello
World!”);
[Link](newText);
[Link](newPara);
Class or Method Description Example
</script>
</head>
<body onload=“addPara()”>
</body>
[Link]() Takes a string as input text and //Creates the element <p> and text “Hello World”.
returns a text node with the input Appends Hello World <p> to the HTML document.
text.
<head>
<script>
function addPara() {
var newPara = [Link](“p”);
var newText = [Link](“Hello
World!”);
[Link](newText);
[Link](newPara);
</script>
Class or Method Description Example
</head>
<body onload=“addPara()”>
</body>
[Link]() A method of the DOM that takes //Changes the content of the div to “Hello World!”
an ID value parameter and returns
<div id=“div1”>
an element that matches the id.
<p>Hello</p>
<p>Hello</p>
</div>
<script>
[Link](“div1”).innerHTML =
“<p>Hello World!</p>”;
</script>
[Link]( A method of the DOM that takes a //Gets an array of all elements in a document with the <p>
) tag name parameter and returns tag.
an array called “NodeList” that
var tagNameArray =
contains elements with the
[Link](“p”);
specified tag name.
[Link]() Writes HTML or JavaScript to a //Writes “Hello World” to the output stream.
Class or Method Description Example
document. Note that it overwrites [Link](“Hello World”);
any other text in the document so
is mostly used for testing purposes
only.
[Link]() Returns the value of the specified //Removes the CSS style color blue
attribute. Takes one parameter: the
<div id="div1" style="color: blue"></div>
attribute name whose value is to
be returned. <script>
var div1 =
[Link]("div1").getAttribute(“style”);
</script>
[Link] A property of the Element class //Changes the content of the div to “Hello World!”
that returns or alters contents of
<div id=“div1”>
an HTML element as a text string.
<p>Hello</p>
<p>Hello</p>
</div>
<script>
[Link](“div1”).innerHTML =
“<p>Hello World!</p>”;
Class or Method Description Example
</script>
[Link]() A property of the Element class //Removes the CSS style color blue
that removes all previously set
<div id="div1" style="color: blue"></div>
inline CSS styles for a particular
element. Takes one parameter: the <script>
attribute name that is being
var div1 = [Link]("div1");
removed.
[Link]("style");
</script>
[Link]() A property of the Element class //In all elements named “theImage” sets the name of all
that overwrites all previously set src attributes to “[Link]”
inline CSS styles for a particular
[Link](“theImage”).setAttribute(“src”,
element. Takes two parameters:
“[Link]”);
the attribute name that is being set
and the attribute value the
attribute is set to.
[Link]() A property of the Element class //Changes the CSS style color from blue to red
that returns or alters inline CSS.
<div id="div1" style="color: blue"></div>
Syntax is
[Link] = <script>
value
var div1 = [Link]("div1");
Class or Method Description Example
[Link] = "red";
</script>
Error Objects Instance creates two properties //Catch statement defines a block of code to be executed if
about the error: message that an error occurs in the try block.
contains description of the error
catch (err) {
and the name property identifies
the type of error. Generic error [Link](“myfile”).innerHTML =
plus 6 other core errors: TypeError, [Link];
RangeError, URIError, EvalError,
}
ReferenceError, [Link]
object can be extended to create //Creates custom error message
custom error messages using the
throw new Error(“Only values 1-10 are permitted”);
throw keyword.
History Objects The history object is part of the //Go back two pages if the history exists in the history list.
window object and contains the
[Link](-2);
URLs visited by the user within a
browser window. It exposes useful
methods and properties that let
you navigate back and forth
through the user's history and
manipulate the contents of the
history stack.
Class or Method Description Example
insertBefore() An HTML DOM method that, after //Creates a new <li> element and places it in the
creating an element, places a child elementList before the first child of <ul>
element in the appropriate
let newLI = [Link]("li");
location before an existing child.
The method takes two parameters, [Link] = "new Element";
the node object to be inserted and
let elementList = [Link]("thisList");
the existing node to insert before.
[Link](newLI,
[Link][0]);
Location Objects The location object is part of the //Returns the hostname property
window object and contains
let myhost = [Link];
information about the current URL.
[Link] = "new Element";
Navigator Objects The navigator object is part of the //Retrieves the name of the browser
window object class in the DOM
var browsername = [Link];
that represents the client Internet
browser, also called the user agent.
There is no standard for this object
so what it returns differs from
browser to browser.
onload() A DOM event that starts a method //Executes myFunction after MyHTMLPage has been
when a page is loaded. loaded
Class or Method Description Example
[Link](“MyHTMLPage”).onload =
function () {myFunction};
replaceChild() After creating an element, this //Creates a new node and replaces the second element in
function replaces a child node with “thisList” with the word “blue”
a new node.
let secondBullet = [Link](“blue”);
var myList =
[Link](“thisList”).childNodes[1];
[Link](secondBullet, [Link][1]);
Screen Objects The screen object is part of the //Returns the height and width of the user’s screen
window object class in the DOM
var height=[Link];
that can be used to return
properties about the user’s screen. var width=[Link];
Window Objects The DOM window object is at the //Opens a new browser window with the specified URL
top of the DOM hierarchy and
[Link](“[Link]
serves as the global object.
Everything in the DOM takes place
in a window. The window object
controls the environment that
contains the document.
[Link]() Opens a new window. The first //Opens a new window that opens the IBM home page
Class or Method Description Example
parameter is a path, a URL, or an and has a width of 600 and a height of 800)
empty string, and optional
let thisWindow = [Link](“[Link]
parameters include the window
“myWindow”, “width”=600, “height”=800);
name, features such as the
placement of the window or the
dimensions, and a Boolean replace
value. The feature parameter is a
comma separated string of name-
value pairs and the replace
parameter is an optional Boolean.
This parameter has been
deprecated so modern browsers
may not support it. This method
returns a reference to the new
window object.
[Link]() Scrolls to a particular place in a //Scrolls the window to the pixel located at the coordinate
window. Parameters include the x- (20, 200)
coordinate which is the left-most
[Link](20, 200);
pixel and the y-coordinate which is
the upper-most pixel.
Wrapper Objects Primitive types can be converted to //Enables the use of properties and methods of the String
objects using wrapper objects. class such as the property [Link]
They are the same name as the
Class or Method Description Example
primitive except they start with let n = new String (“abc”);
uppercase letter.
//Returns string
The typeof keyword returns a
string indicating the data type of typeof “abc”;
the operand.
//Returns object
typeof new String(“abc”);