23.3. More DOM Methods and Properties

The following sections are a summary of some DOM classes, methods, and properties. A more complete list can be found in the reference links below. You do NOT need to memorize everything on these reference pages. We are providing them to you as a guide for your future studies of the DOM.

1. W3Schools DOM reference

2. MDN DOM reference

23.3.1. Window

The global variable window is an instance of the Window class. The Window class represents the browser window. In the case of multi-tabbed browsers, the global window variable represents the specific tab in which the JavaScript code is running.

Window Properties and Methods

Method or Property	Syntax	Description
alert	window.alert("String message")	Displays a dialog box with a message and an "ok" button to close the box.
confirm	window.confirm("String message")	Displays a dialog box with a message and returns true if user clicks "ok" and false if user clicks "cancel".
location	window.location	Object that represents and alters the web address of the window or tab.
console	window.console	Represents the debugging console. Most common and basic use is window.console.log().

Note

When using JavaScript in the browser environment, methods and properties defined on the Window class are exposed as global functions and variables. An example of this is window.console.log() is accessible by referencing console.log() directly.

23.3.2. Document

The global document variable is an instance of the Document class. The Document class represents the HTML web page that is read and displayed by the browser. The Document class provides properties and methods to find, add, remove, and alter HTML elements inside on the web page.

Document Properties and Methods

Method or Property	Syntax	Description
title	document.title	Read or set the title of the document.
getElementById	document.getElementById("example-id")	Returns a reference to the element that's id attribute matches the given string value.
querySelector	document.querySelector("css selector")	Returns the first element that matches the given CSS selector.
querySelectorAll	document.querySelectorAll("css selector")	Returns a list of elements that match the given CSS selector.

Note

querySelector and querySelectorAll use the CSS selector pattern to find matching elements. The pattern passed in must be a valid CSS selector. Elements will be found and returned the same way that elements are selected to have CSS rules applied.

23.3.3. Element

HTML documents are made up of a tree of elements. The Element class represents an HTML element.

Element Properties and Methods

Method or Property	Syntax	Description
getAttribute	element.getAttribute("id")	Returns the value of the attribute.
setAttribute	element.setAttribute("id", "string-value")	Sets the attribute to the given value.
style	element.style.color	Object that allows reading and setting INLINE CSS properties.
innerHTML	element.innerHTML	Reads or sets the HTML inside an element.

23.3.4. Check Your Understanding

Question

What value will response have if the user clicks Cancel?

let response = window.confirm("String message");

Question

Which of these are TRUE about selecting DOM elements?

1. You can select elements by CSS class name

2. You can select elements by id attribute value

3. You can select elements by tag name

4. All of the above