The DOM and JavaScript
We'll dive deeper into the DOM by discussing DOM data types and the properties and methods used to access DOM elements using JavaScript.
Read this article and locate the methods used with the "window" and "document" objects. For example, when a program uses an alert, it uses the "window.alert" method. JavaScript uses the "window.onload" method when a page is loaded. When a user clicks an element on a page, the "onclick" method is called. Remember that calling a method for an object uses dot (.) notation.
This guide is about the objects and the actual things you can use to manipulate the DOM hierarchy. There are many points where understanding how these work can be confusing. For example, the object representing the HTML form
element
gets its name
property from the HTMLFormElement
interface but its className
property from the HTMLElement
interface.
In both cases, the property you want is in that form object.
But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.
Interfaces and objects
Many objects borrow from several different interfaces. The table object, for example, implements a specialized HTMLTableElement
interface, which includes such methods as createCaption
and
insertRow
. But since it's also an HTML element, table
implements the Element
interface described in the DOM
Element
Reference chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for an HTML or XML page, the table object also
implements the more basic Node
interface, from which Element
derives.
When you get a reference to a table
object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.
const table = document.getElementById("table"); const tableAttrs = table.attributes; // Node/Element interface for (let i = 0; i < tableAttrs.length; i++) { // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // HTMLTableElement interface: summary attribute table.summary = "note: increased border";
Core interfaces in the DOM
This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the DOM Examples chapter at the end of this book.
The document
and window
objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the window
object
represents something like the browser, and the document
object is the root of the document itself. Element
inherits from the generic Node
interface,
and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the table
object
example in the previous section.
The following is a brief list of common APIs in web and XML page scripting using the DOM.
document.querySelector(selector)
document.querySelectorAll(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
GlobalEventHandlers/onload
window.scrollTo()