DOM 基础

What is the DOM?

With JavaScript you can restructure an entire HTML document. You can add, remove, change, or reorder items on a page.

To change anything on a page, JavaScript needs access to all elements in the HTML document. This access, along with methods and properties to add, move, change, or remove HTML elements, is given through the Document Object Model (DOM).

In 1998, W3C published the Level 1 DOM specification. This specification allowed access to and manipulation of every single element in an HTML page.

All browsers have implemented this recommendation, and therefore, incompatibility problems in the DOM have almost disappeared.

The DOM can be used by JavaScript to read and change HTML, XHTML, and XML documents.

The DOM is separated into different parts (Core, XML, and HTML) and different levels (DOM Level 1/2/3):

Core DOM - defines a standard set of objects for any structured document XML DOM - defines a standard set of objects for XML documents HTML DOM - defines a standard set of objects for HTML documents

Everything in an HTML document is a node.

Nodes

According to the DOM, everything in an HTML document is a node.

The DOM says that:

The entire document is a document node Every HTML tag is an element node The texts contained in the HTML elements are text nodes Every HTML attribute is an attribute node Comments are comment nodes

 Node Hierarchy

Nodes have a hierarchical relationship to each other.

All nodes in an HTML document form a document tree (or node tree). The tree starts at the document node and continues to branch out until it has reached all text nodes at the lowest level of the tree.

The following figure represents a document tree (node tree):