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 page tries to describe the various objects and types in simple terms. But there are a number of different data types being passed around the API that you should be aware of.

Note: Because the vast majority of code that uses the DOM revolves around manipulating HTML documents, it's common to refer to the nodes in the DOM as elements, although strictly speaking not every node is an element.

The following table briefly describes these data types.


Data type (Interface)	Description
`Document`	When a member returns an object of type `document` (e.g., the `ownerDocument` property of an element returns the `document` to which it belongs), this object is the root `document` object itself. The DOM `document` Reference chapter describes the `document` object.
`Node`	Every object located within a document is a node of some kind. In an HTML document, an object can be an element node but also a text node or attribute node.
`Element`	The `element` type is based on `node`. It refers to an element or a node of type `element` returned by a member of the DOM API. Rather than saying, for example, that the `document.createElement()` method returns an object reference to a `node`, we just say that this method returns the `element` that has just been created in the DOM. `element` objects implement the DOM `Element` interface and also the more basic `Node` interface, both of which are included together in this reference. In an HTML document, elements are further enhanced by the HTML DOM API's `HTMLElement` interface as well as other interfaces describing capabilities of specific kinds of elements (for instance, `HTMLTableElement` for `<table>` elements).
`NodeList`	A `nodeList` is an array of elements, like the kind that is returned by the method `document.querySelectorAll()`. Items in a `nodeList` are accessed by index in either of two ways: list.item(1) list[1] These two are equivalent. In the first, `item()` is the single method on the `nodeList` object. The latter uses the typical array syntax to fetch the second item in the list.
`Attr`	When an `attribute` is returned by a member (e.g., by the `createAttribute()` method), it is an object reference that exposes a special (albeit small) interface for attributes. Attributes are nodes in the DOM just like elements are, though you may rarely use them as such.
`NamedNodeMap`	A `namedNodeMap` is like an array, but the items are accessed by name or index, though this latter case is merely a convenience for enumeration, as they are in no particular order in the list. A `namedNodeMap` has an `item()` method for this purpose, and you can also add and remove items from a `namedNodeMap`.

There are also some common terminology considerations to keep in mind. It's common to refer to any Attr node as an attribute, for example, and to refer to an array of DOM nodes as a nodeList. You'll find these terms and others to be introduced and used throughout the documentation.