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 of the simple document in the previous section.Source codeAnd 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:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
