Home > Developer > JavaScript

Node nodes in JavaScript DOM (1)

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

In the DOM Document Object Model), the HTML document hierarchy is represented as a tree structure. The tree structure of the HTML document mainly consists of nodes that represent elements or tags and nodes that identify text strings. In JavaScript DOM, Node is often translated into a Node. Next we will use an instance to learn about Node attributes and methods.

BKJIA recommended reading: An in-depth explanation of BOM and DOM in JavaScript

Node attributes:

 
 
    
  
  
  1. NodeType: displays the node type.
    2. 
  
  
  2. NodeName: displays the node name.
    3. 
  
  
  3. NodeValue: displays the value of a node.
    4. 
  
  
  4. Attributes: Get an attribute node
    5. 
  
  
  5. FirstChild: indicates the first node of a node.
    6. 
  
  
  6. LastChild: The last subnode of a node.
    7. 
  
  
  7. ChildNodes: indicates all the subnodes of the node.
    8. 
  
  
  8. ParentNode: indicates the parent node of the node.
    9. 
  
  
  9. NextSibling: next to the current node
    10. 
  
  
  10. Previussibling: next to the previous node of the current node
    11.

Node has a variety of nodes. We will spend some time to get to know them and learn about the nodeType, nodeName, and nodeValue attributes at the same time:

Name: Element Node

◆ NodeType: ELEMENT_NODE

◆ NodeType value: 1

◆ NodeName: Element Tag Name

◆ NodeValue: null

 
 
    
  
  
  1. <Body>
    2. 
  
  
  2. <Div id = "t"> <span> </div>
    3. 
  
  
  3. </Body>
    4. 
  
  
  4. <Script>
    5. 
  
  
  5. Var d = document. getElementById ("t ");
    6. 
  
  
  6. Document. write (d. nodeType );
    7. 
  
  
  7. Document. write (d. nodeName );
    8. 
  
  
  8. Document. write (d. nodeValue );
    9. 
  
  
  9. // Display 1 DIV null
    10. 
  
  
  10. </Script>
    11.

Name: attribute node

◆ NodeType: ATTRIBUTE_NODE

◆ NodeType value: 2

◆ NodeName: attribute name

◆ NodeValue: Attribute Value

 
 
    
  
  
  1. <Body>
    2. 
  
  
  2. <Div id = "t" name = "aaa"> <span> </div>
    3. 
  
  
  3. </Body>
    4. 
  
  
  4. <Script>
    5. 
  
  
  5. Var d = document. getElementById ("t"). getAttributeNode ("name ");
    6. 
  
  
  6. Document. write (d. nodeType );
    7. 
  
  
  7. Document. write (d. nodeName );
    8. 
  
  
  8. Document. write (d. nodeValue );
    9. 
  
  
  9. // Display 2 name aaa
    10. 
  
  
  10. </Script>
    11.

Name: text node

◆ NodeType: TEXT_NODE

◆ NodeType value: 3

◆ NodeName: # text

◆ NodeValue: Text Content

 
 
    
  
  
  1. <Body>
    2. 
  
  
  2. <Div id = "t"> bbb </div>
    3. 
  
  
  3. </Body>
    4. 
  
  
  4. <Script>
    5. 
  
  
  5. Var d = document. getElementById ("t"). firstChild;
    6. 
  
  
  6. Document. write (d. nodeType );
    7. 
  
  
  7. Document. write (d. nodeName );
    8. 
  
  
  8. Document. write (d. nodeValue );
    9. 
  
  
  9. // Display 3 # text bbb
    10. 
  
  
  10. </Script>
    11.

Name: Format of text transmitted in CDATA text node XML)

◆ NodeType: CDATA_SECTION_NODE

◆ NodeType value: 4

◆ NodeName: # cdata-section

◆ NodeValue: CDATA text content

Attributes attribute to directly obtain an attribute node. Note that [] should be used here to maintain compatibility between IE and FF.

 
 
    
  
  
  1. <Body name = "ddd">
    2. 
  
  
  2. <Div id = "t" name = "aaa"> <span> aaa </span> <span> bbb </span> <span> ccc </span> </div>
    3. 
  
  
  3. </Body>
    4. 
  
  
  4. <Script>
    5. 
  
  
  5. Var d = document. getElementById ("t"). attributes ["name"];
    6. 
  
  
  6. Document. write (d. name );
    7. 
  
  
  7. Document. write (d. value );
    8. 
  
  
  8. // Display name aaa
    9. 
  
  
  9. </Script>
    10.

The firstChild and lastChild attributes indicate the first and last subnodes of a node:

 
 
    
  
  
  1. <Body>
    2. 
  
  
  2. <Div id = "t"> <span> aaa </span> <span> bbb </span> <span> ccc </span> </div>
    3. 
  
  
  3. </Body>
    4. 
  
  
  4. <Script>
    5. 
  
  
  5. Var d = document. getElementById ("t ");
    6. 
  
  
  6. Document. write (d. firstChild. innerHTML );
    7. 
  
  
  7. Document. write (d. lastChild. innerHTML );
    8. 
  
  
  8. // Display aaa ccc
    9. 
  
  
  9. </Script>
    10.

The childNodes and parentNode attributes indicate all the child nodes of the node and the parent nodes of the node. The childNodes here is an array:

 
 
    
  
  
  1. <Body name = "ddd">
    2. 
  
  
  2. <Div id = "t"> <span> aaa </span> <span> bbb </span> <span> ccc </span> </div>
    3. 
  
  
  3. </Body>
    4. 
  
  
  4. <Script>
    5. 
  
  
  5. Var d = document. getElementById ("t ");
    6. 
  
  
  6. Document. write (d. childNodes [1]. innerHTML );
    7. 
  
  
  7. Document. write (d. parentNode. getAttribute ("name "));
    8. 
  
  
  8. // Display bbb ddd
    9. 
  
  
  9. </Script>
    10.

The nextSibling and previussibling attributes indicate that, in the childNodes [] array of parentNode, they are next to the previous and next nodes of the current node:

 
 
    
  
  
  1. <Body name = "ddd">
    2. 
  
  
  2. <Div id = "t"> <span> aaa </span> <span> bbb </span> <span> ccc </span> </div>
    3. 
  
  
  3. </Body>
    4. 
  
  
  4. <Script>
    5. 
  
  
  5. Var d = document. getElementById ("t"). childNodes [1];
    6. 
  
  
  6. Document. write (d. nextSibling. innerHTML );
    7. 
  
  
  7. Document. write (d. previussibling. innerHTML );
    8. 
  
  
  8. // Display ccc aaa
    9. 
  
  
  9. </Script>
    10.


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.

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.

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