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