Home > Developer > JavaScript

Deep Learning of DOM model BASICS (1)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article focuses on the concept and usage of the DOM model. The full name of DOM is the DocumentObjetModule, which is the Document Object Model. on the Web, the HTML representation of the page is treated as an object model with a tree structure, you can use some operation interfaces to access and operate each sub-object node of the Document. This makes it possible for Ajax to change the page display data without refreshing the page.

DOM model Basics

The full name of DOM is DocumentObjetModule, which is the Document Object Model. on the Web, the HTML representation of the page is treated as an object model with a tree structure, you can use some operation interfaces to access and operate each sub-object node of the Document. This makes it possible for Ajax to change the page display data without refreshing the page.

Let's take a look at a simple HTML snippet:

 
 
    
  
  
  1. <Htmlxmlnshtmlxmlns = "http://www.w3.org/1999/xhtml">
    2. 
  
  
  2. <Head> <title> DOM Model </title>  
    3. 
  
  3. <Labeltitlelabeltitle = "title1"> DOM model node </label> </body>  
    4.

There is only one Label control on this HTML page. You can draw a hierarchy chart of this page based on the hierarchy of nodes.

Generally, every tag in an HTML document represents an object node. The tag like <Lable> above is our HTML element node, and the title = "title1" in the tag is an attribute node, text such as "DOM model node" forms a text node.

So how can we operate a node in the DOM model? The first thing we need to do is to reference this node.

1. Reference to document nodes

The following lists some common reference methods for document element nodes.

◆ Document. the GetElementById () method directly references nodes. This is the most common method in our practical application. In the HTML document, each element node can define a unique id attribute, then, you can use the GetElementById method to accurately reference this node.

 
 
    
  
  
  1. <Htmlxmlnshtmlxmlns = "http://www.w3.org/1999/xhtml">
    2. 
  
  
  2. <Head> <title> DOM Model </title>  
    3. 
  
  3. <Labeltitlelabeltitle = "title1"> Dom model node </label> </div> </body>
    4. 
  
  
  4. </Html> <scriptlanguagescriptlanguage = "javascript" type = "text/javascript">
    5. 
  
  
  5. <! -- Var_div1 = document. getElementById ("Div1 ");
    6. 
  
  
  6. Alert (_ div1.innerHTML); // The HTML content in the tag div is displayed in the pop-up warning box.
    7. 
  
  
  7. // <Labeltitlelabeltitle = "title1"> Dom model node </label> --> </script>
    8.

Each element node in the HTML document has the innerHTML attribute. By accessing this attribute, we can obtain or set the HTML content in the element node label, more and more browsers have supported this attribute since IE4.0. Using this attribute makes it easy to dynamically generate HTML in a complicated way. Note that if we read the innerHTML attribute of a single tag, such as , a null string is obtained, and an error is returned when writing.

In addition, the document object has a similar method GetElementByName. We can use the name attribute of the form label to reference the form Element Node, but the returned result is usually an array, because the value of the node name attribute in the form is not unique, you can use the indexer to obtain reference for each element.

◆ Document. getElementByTagName ()

You can obtain an array set referenced by a specified Tag Name node. You can use the indexer to access each node's reference.

 
 
    
  
  
  1. <Htmlxmlnshtmlxmlns = "http://www.w3.org/1999/xhtml">  
    2. 
  
  2. <Title> DOM Model </title>  
    3. 
  
  3. <Dividdivid = "Div1"> node 1 </div> <dividdivid = "Div2"> node 2 </div>
    4. 
  
  
  4. </Body>  
    5. 
  
  5. Type = "text/javascript">
    6. 
  
  
  6. <! -- Var_divs = document. getElementsByTagName ("div ");
    7. 
  
  
  7. For (vari = 0; I <_ divs. length; I ++) alert (_ divs [I]. innerHTML );
    8. 
  
  
  8. // Displays "Node 1" and "Node 2" in sequence --> </script>
    9.

This method is usually used to operate a certain type of element nodes in the entire document. For example, if you add a mouse to all the images, the displacement occurs, this method can be used to reference all nodes in the document.

◆ ParentNode and childNodes. You can access these two attributes to obtain the reference of the parent node and child node set of the current node.

 
 
    
  
  
  1. <Htmlxmlnshtmlxmlns = "http://www.w3.org/1999/xhtml">
    2. 
  
  
  2. <Head> <title> DOM Model </title>  
    3. 
  
  3. <Body> <dividdivid = "Div1"> <spanidspanid = "sp1"> node 1 </span>
    4. 
  
  
  4. <Spanidspanid = "sp2"> node 2 </span> </div> </body>  
    5. 
  
  5. <Scriptlanguagescriptlanguage = "javascript" type = "text/javascript">
    6. 
  
  
  6. <! -- Var_nod = document. getElementById ("sp1 ");
    7. 
  
  
  7. // Obtain the reference var_pNod = _ nod. parentNode of sp1;
    8. 
  
  
  8. // Obtain the reference alert (_ pNod. innerHTML) for Div1 );
    9. 
  
  
  9. // Display the content of the parent node for (vari = 0; I <_ pNod. childNodes. length; I ++)
    10. 
  
  
  10. // Loop subnode alert (_ pNod. childNodes [I]. innerHTML );
    11. 
  
  
  11. // Displays the content of each node in sequence --> </script>
    12. 
  
  
  12.  
    13.

Here the problem occurs. We find that attribute _ pNod is available in IE and FF. childNodes. length, that is, the number of subnodes is interpreted differently. In IE, the number is 4, and in FF, the number is 5. The result is that the two browsers have different interpretations of the text nodes generated by line breaks in the document. IE does not regard the line breaks between the parent node and the child node as a text node, if you want to use this attribute, you have to avoid line breaks when writing HTML documents. You can change the above structure to the following format:

 
 
    
  
  
  1. <Dividdivid = "Div1">
    2. 
  
  
  2.  
    3. 
  
  
  3. <Spanidspanid = "sp1"> node 1 </span>
    4. 
  
  
  4.  
    5. 
  
  
  5. <Spanidspanid = "sp2"> node 2 </span> </div>
    6.

After this writing, FF and IE can be well interpreted as two subnodes, but the aesthetics and accessibility of the document are lost, therefore, it is generally not recommended to reference nodes by accessing subnodes.

Similar previussibling and nextSibling have similar problems. These two attributes are used to reference the previous or next sibling node. When using these two attributes, there is also a blank text node problem. We should also try to avoid using these two attributes.


This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
component object model basics dom document object model deep learning framework java c deep learning library deep learning mlp deep learning library multi gpu deep learning

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More