Document Object Model (DOM) [reprint]

The file object model (DOM) is an application interface (API) that represents the various elements of a document (such as HTML and XML) and accesses and operations ). Generally, all browsers that support Javascript support DOM. The DOM involved in this article refers to the standard Document Object Model defined by W3C. It represents HTML and XML documents in a tree structure, defines the methods and attributes for traversing the tree and checking and modifying the node of the tree.

7.4.1. HTML document in DOM eye: Tree
In the eyes of DOM, HTML is a tree-like document like XML.

　　

Is this a bit similar to the XML structure. The difference is that the tree structure of HTML documents mainly contains the expression elements, Mark And nodes that represent text strings.

7.4.2 HTML document Node
In DOM, each Node of the HTML document is considered as a Node object of various types. Each Node object has its own attributes and methods. These attributes and methods can be used to traverse the entire document tree. Due to the complexity of HTML documents, DOM defines nodeType to represent the node type. The following lists several common Node types of a Node:

Interface	NodeType constant	NodeType Value	Remarks
Element	Node. ELEMENT_NODE	1	Element Node
Text	Node. TEXT_NODE	3	Text Node
Document	Node. DOCUMENT_NODE	9	Document
Comment	Node. COMMENT_NODE	8	Annotated text
DocumentFragment	Node. DOCUMENT_FRAGMENT_NODE	11	Document parts
Attr	Node. ATTRIBUTE_NODE	2	Node attributes

The root node of the DOM tree is a Document object. The documentElement attribute reference of this object indicates the Element Object of the Document root Element (for HTML documents, this is the

Most of the methods defined by Document are production methods, which are mainly used to create various types of nodes that can be inserted into documents. Common Document methods include:

Method	Description
CreateAttribute ()	Create a new Attr node with the specified name.
CreateComment ()	Creates a Comment node with the specified string.
CreateElement ()	Create an Element node with the specified tag name.
CreateTextNode ()	Creates a TextNode with the specified text.
GetElementById ()	Return the Element node with the specified id attribute in the document.
GetElementsByTagName ()	Returns all Element nodes with the specified tag name in the document.

For Element nodes, you can call the getAttribute (), setAttribute (), and removeAttribute () Methods to query, set, or delete the nature of an Element node, such as the border attribute marked by <table>. Common attributes of an Element are listed below:

Attribute	Description
TagName	The tag name of the element. For example, the <p> element is P. TabName returned by the HTML document is in uppercase.

Common Methods of Element:

Method	Description
GetAttribute ()	Returns the value of a specified attribute in string format.
GetAttributeNode ()	Returns the value of a specified attribute in the form of an Attr node.
GetElementsByTabName ()	Returns an array of nodes that contain the child nodes of all the Element nodes with the specified tag name. The sequence is the order in which the elements appear in the document.
HasAttribute ()	If the element has a property with the specified name, true is returned.
RemoveAttribute ()	Deletes a specified attribute from an element.
RemoveAttributeNode ()	Deletes the specified Attr node from the attribute list of the element.
SetAttribute ()	Set the specified attribute to the specified string value. If the attribute does not exist, add a new attribute.
SetAttributeNode ()	Add the specified Attr node to the attribute list of the element.

The Attr object represents the attributes of the document Element, including the name and value attributes. It can be obtained through the attributes attribute of the Node interface or the getAttributeNode () method of the Element interface. However, in most cases, the simplest method to use Element attributes is getAttribute () and setAttribute (), rather than the Attr object.

7.4.3. Use DOM to operate HTML documents
The Node object defines a series of attributes and methods to facilitate traversing the entire document. You can use the parentNode attribute and the childNodes [] array to move up and down in the document tree. You can traverse the childNodes [] array or use the firstChild and nextSibling attributes to perform cyclic operations, you can also use lastChild and previussibling to perform reverse loop operations, or enumerate the child nodes of a specified node. The appendChild (), insertBefore (), removeChild (), and replaceChild () methods can be called to change the child nodes of a node and thus change the document tree.

It should be noted that the value of childNodes [] is actually a NodeList object. Therefore, you can enumerate all subnodes of a given node by traversing each element of the childNodes [] array. By recursion, You can enumerate all nodes in the tree. The following table lists some common attributes and methods of a Node object:

Common attributes of Node objects:

Attribute	Description
Attributes	If the node is an Element, the attribute of the Element is returned in the form of NamedNodeMap.
ChildNodes	Store the subnodes of the current Node in the form of Node. If no child node exists, an empty array is returned.
FirstChild	Return the first subnode of the current Node as a Node. If no subnode exists, the value is null.
LastChild	Return the last subnode of the current Node as a Node. If no subnode exists, the value is null.
NextSibling	Return the sibling Node of the current Node in the form of Node. If no such node exists, null is returned.
NodeName	The name of the node. The Element node represents the Tag Name of the Element.
NodeType	Indicates the node type.
ParentNode	Return the parent Node of the current Node in the form of Node. If no parent node exists, the value is null.
Previussibling	Return the sibling Node next to the current Node and before it in the form of Node. If no such node exists, null is returned.

Common Methods for Node objects:

Method	Description
AppendChild ()	Add a node to the childNodes [] Group of the current node to add a node to the document tree.
CloneNode ()	Copy the current node or all its child nodes.
HasChildNodes ()	If the current node has a subnode, true is returned.
Insertbefore ()	Insert a node to the document tree before the specified child node of the current node. If the node already exists, delete it and insert it to its location.
Removechild ()	Delete the child node from the document tree and return the specified child node.
ReplaceChild ()	Delete the child node from the document tree, return the specified child node, and replace it with another node.

 

DOM provides a set of attributes for navigation, accessing, and updating document content, including read-only and read-write attributes. The following table shows Read-Only TypeProperties:

DOM object attributes	Return Value
Firstchild	An object is returned, indicating the first child node ).
Lastchild	An object is returned, indicating the last child node ).
Nextsibling	An object is returned, indicating the next adjacent sibling node.
Nodename	Returns the HTML Tag corresponding to the node. For example, P and script. Corresponding to the text item node, # text is returned.
Nodetype	Type of the returned node, 1 indicates that this node is a tag ), 2 indicates attribute ), 3 indicates a text item.
Parentnode	An object is returned, indicating the parent node of the current node ).
Previussibling	An object is returned, indicating the previous adjacent sibling node.
Specified	Returns a Boolean variable, indicating whether attribute is set ).

The following table showsRead/write typeProperties:

DOM object attributes	Return Value
Data	Returns a string that represents the value of a text item node. If it is a node of another type, undefined is returned.
NodeValue	Returns a string that represents the value of a text item node. If it is a node of another type, null is returned.

The following table showsRelated attributesSet:

DOM object attributes	Return Value
Attributes	Indicates the attribute set of the node, which is accessed by id, such as attributes. id.
ChildNodes	Indicates the child node set of a node, which is accessed through an array index, for example, childNodes [2].

DOM structure analysis of documents containing tables

Generally, the DOM structure accurately reflects the content contained in HTML documents. That is to say, each HTML tag is represented as a tag node ), each text item is represented as a text item node ). This form is generally called WYSIWYG, that is, WYSIWYG. However, the <TABLE> flag is an exception. When there is a <TABLE> tag, we can imagine that it also contains a pair of <TBODY> tags. Let's take a look at the following code:

<Table id = "tableNode">
<TR> <td bgcolor = "yellow"> This is row 1, cell 1 </TD> <td bgcolor = "orange"> This is row 1, cell 2 </TD> </TR>
<TR> <td bgcolor = "red"> This is row 2, cell 1 </TD> <td bgcolor = "magenta"> This is row 2, cell 2 </TD> </TR>
<TR> <td bgcolor = "lightgreen"> This is row 3, cell 1 </TD> <td bgcolor = "beige"> This is row 3, cell 2 </TD> </TR>
</TABLE>

Before analyzing its DOM structure, we need to add the previous <TBODY> tag for this Code:

<Table id = "tableNode">
<TBODY>
Intermediate Code omitted
</TBODY>
</TABLE>

After such processing, the DOM structure can be analyzed as follows: the root of the Tree is the <TABLE> MARK node, which only contains one child node <TBODY>; <TBODY> the tag node contains three child nodes, each of which corresponds to a table row <TR>. Each <TR> tag node contains two child nodes, each node corresponds to a unit of table rows <TD>. Each <TD> label node contains a child node, which is also a text item node, which indicates the content of a cell.

On the right is the DOM Tree icon of the preceding HTML document. You can click to enlarge it.

Node Navigation containing table documents

Now let's take a look at how to navigate DOM nodes in documents that contain tables. Similarly, a correct understanding of the DOM Tree graph shown above helps us to clearly understand the navigation node expression.

 

Introduction to JS application DOM: Comparison with DHTML Object Model

DOM is short for Document Object Model. Developers who have used DHTML Object models will be very skilled in operating each TAG content on HTML pages. However, if DOM technology is used, we can achieve the same goal in a more direct and simple way.

　　Summary

DOM is supported by browsers of Internet Explorer 5.0 and later versions. It uses a very intuitive and consistent method to model HTML documents, it also provides simple programming interfaces for accessing, navigation, and Operation pages. With DOM technology, we can not only access and update the content and structure of pages, but also manipulate style styles of documents. DOM is advocated by W3C organizations, so that most browsers will eventually support this technology.

　　Comparison Between DOM and DHTML Object Models

In this case, DOM is developed from the DHTML Object Model. But more accurately, DOM is more like the product of fundamental changes to the DHTML Object Model.

With the help of DHTML Object Model technology, we can independently access and update the objects on the HTML page. Each HTML Tag is manipulated by its ID and NAME attributes, each object has its own attributes, methods, and events. It uses methods to manipulate objects and triggers causal processes through events.

DOM is more comprehensive than the DTHML object model. It provides an access model for the entire document, not just within a single HTML Tag range. DOM depicts a document as a Tree structure. Each node of the Tree is represented as a text item in an HTML Tag or HTML Tag. The tree structure accurately describes the associations between tags in HTML documents and text items. These associations include the child type, parent type, and sibling type.

When you use the DHTML Object Model to access and update HTML page content, you must query related technical manuals. Because there are many HTML objects, each HTML object has many attributes, methods, and events. However, when DOM technology is used to access and update HTML page content, any manual can be put aside. First, check the HTML source code to calculate the Tree structure model of the page. Then, manipulate the required attributes according to the hierarchical relationship. For example, to update the text item content on the page, if you use the DTHML object model, you need to use the innerHTML attribute, but note that not all HTML Objects support the innerHTML attribute; if DOM technology is used, you only need to modify the nodeValue attribute values of the related Tree nodes.

DOM technology allows us to easily perform node navigation at the top, bottom, and one side of the tree structure of the document, starting from anywhere on the page, an expression consisting of child, parent, or sibling is used to represent another part of the page. The DTHML object model does not contain the Tree structure, so it does not have the mutual navigation function of page objects. When we start with a tag object, we cannot use association expressions to express close tags. Although some tags, such as <TABLE>, the DHTML Object model can provide special attributes and methods to access related content, the implementation methods and effects are far less consistent and visualized than the DOM technology. When using the DTHML object model to access the cell content in <TABLE>, you must first query the manual to determine the coordinate values of the cell I and j, and then use the expression tableObj. rows [I]. cells [j]. access through innerHTML. However, for the DOM, accessing the content of each TABLE unit becomes very simple. You only need to create a node navigation expression.

In addition, DOM technology allows us to manipulate the Tree structure of documents, including creating new nodes (nodes), deleting existing nodes, and moving nodes in the Tree. In fact, this is the process of creating a new tag, deleting an existing tag, and moving the tag in the document. The DTHML object model does not allow you to change the document structure. We can only manipulate existing objects.

Compared with the DHTML Object Model, DOM has only one defect: DOM cannot support event processing, while the DTHML object model has a wide range of event processing functions for document objects.