Get started with JS application dom

Introduction to JS application dom (1): Comparison with DHTML Object Models

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 htmlSource code, Calculate the tree structure model of the page, and 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.

 

JavaScript Application Dom entry (2): DOM object attribute Dom provides a set of attributes for navigation, access, and updating document content, including read-only and read-write attributes.

The following table showsRead-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].

JavaScript Application Dom entry (3): simple document Dom structure analysis a simple document Dom Structure Analysis

Next let's analyze a simple document to form its dom structure. The document to be analyzed consists of three paragraphs: HTMLCodeAs follows:

<HTML> <Head> <Title> simple Dom demo </title> </Head> <Body id = "bodynode"> <p id = "p1node"> This is paragraph 1. </P> This is the document body <P id = "p2node"> </P> <P id = "p3node"> </P> </Body> </Html>

Please note that from now on, we will view the entire document in the tree structure and family relationship. <Body> the flag is the root node of the tree. It contains four child nodes: p1node, text item node ("This is the document body"), p2node, and p3node. Each child node is an HTML-tagged node or a text-entry node. The content between a pair of start and end tags belongs to the child node of this tag. For example, "this is paragraph1" is the child node of the p1node node, and it is also a text item node. A text entry node must contain a non-empty character. Therefore, child nodes in section 2nd and section 3rd do not exist.

Here is the DOM tree diagram of the preceding HTML document, which helps us better understand the relationship between nodes:

Some HTML markup does not include closing the Arc. In this case, we can treat the markup of the next person next to it as closing the arc. For example, the <li> flag can use the <li> or <ul> flag of the nearest person as the closing identifier.

Node navigation of simple documents

The DOM tree structure of the document sets a node for each tag and text item. For any node assigned with the ID attribute, it can be used as the starting point to start the "Climb" of the entire tree ". Furthermore, with the powerful functions of Dom attributes, we can address every node in the tree.

Before proceeding, take a look at the HTML source code of the simple document in the previous section and its DOM tree structure. We can know that the arrows in the figure indicate the navigation routes that can reach other nodes in the tree. The value of the ID attribute marked by <body> is bodynode, the ID attribute values of the three <p> tags are p1node, p2node, and p3node. Next, we will illustrate how to address different nodes from each other:

Start Node	Arrival Node	Addressing expression
<Body>	P1node	Bodynode. firstchild or bodynode. childnodes [0]
	Child node of p1node	Bodynode. firstchild. firstchild
	Text Item Node	Bodynode. childnodes [1]
	P3node	Bodynode. childnodes [3] Or bodynode. lastchild
P1node	Text Item Node	P1node. nextsibling
	P2node	P1node. nextsibling. nextsibling
	P3node	P1node. nextsibling
P3node	Child node of p1node	P3node. previussibling. childnodes [0]

All of the above lists the Addressing Expressions from parent to child or child to child. We use the parentnode attribute to introduce another direction: from child to parent. For example, you can use p1node. parentnode, p2node. parentnode, or p3node. parentnode to start addressing each <p> mark to <body> MARK.
To better understand the preceding node navigation expressions, we have written a javascript code that displays the nodename value of each node in the DOM document. Note that in addition to the nodes involved in the simple example above, it also contains a <SCRIPT> label node. In order not to complicate the problem, the lastchild attribute is not used in the code. The Code is as follows:

<HTML> <Head> <Title> simple Dom demo </title> <Style> type = "text/CSS"> <! -- Form. TB {display: inline ;} . Twidth {width: 100%} . Include {font-size: 75%; font-family: verdana, Arial, Helvetica ;} . Includebig {font-family: verdana, Arial, Helvetica ;} . Includebig A: link {color: Blue ;} . Includebig A: visited {color: Purple ;} . Include a: link {color: Blue ;} . Include a: visited {color: Purple ;} . Submitter {font-size: 75%; font-family: verdana, Arial, Helvetica ;} Pre. Code {color: #660099; margin-left: 5%} Address {text-align: right} Body {Background: # ffffff; margin-left: 5%; margin-Right: 5%} --> </Style> </Head> <Body id = "bodynode"> <p id = "p1node"> This is paragraph 1. </P> This is the document body <P id = "p2node"> </P> <P id = "p3node"> </P> <Script language = "JavaScript"> Alert ( "Bodynode. firstchild. nodename =" + bodynode. firstchild. nodename + "\ n" + "Bodynode. firstchild. Data =" + bodynode. firstchild. Data + "\ n" + "Bodynode. childnodes [0]. nodename =" + bodynode. childnodes [0]. nodename + "\ n" + "Bodynode. childnodes [1]. nodename =" + bodynode. childnodes [1]. nodename + "\ n" + "Bodynode. childnodes [1]. Data =" + bodynode. childnodes [1]. Data + "\ n" + "Bodynode. childnodes [3]. nodename =" + bodynode. childnodes [3]. nodename + "\ n" + "Bodynode. childnodes [4]. nodename =" + bodynode. childnodes [4]. nodename + "\ n" + "P1node. nextsibling. nodename =" + p1node. nextsibling. nodename + "\ n" + "P1node. nextsibling. nextsibling. nodename =" + p1node. nextsibling. nextsibling. nodename + "\ n" + "P1node. nextsibling. nodename =" + p1node. nextsibling. nodename + "\ n" + "P3node. previussibling. childnodes [0]. nodename =" + P3node. previussibling. childnodes [0]. nodename + "\ n" + "P1node. parentnode. nodename =" + p1node. parentnode. nodename + "\ n" + "P2node. parentnode. nodename =" + p2node. parentnode. nodename + "\ n" + "P3node. parentnode. nodename =" + p3node. parentnode. nodename + "\ n" + "Bodynode. firstchild. firstchild. parentnode. parentnode. nodename =" + Bodynode. firstchild. firstchild. parentnode. parentnode. nodename + "\ n" ); </SCRIPT> </Body> </Html>

The result is shown as follows: