Home > Developer > JavaScript

Introduction to node-related content in Javascript

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

 

Http://www.zj-blog.com/html/2007/04/200704101145040237.htm.

Node is often translated as a node. In an object (which can be simply understood as an HTML page), an attribute name = "AAA" can be a node, A <Div id = "AAA"> ...... </Div> can also be a node ...... </Body> is also a large node. The following are some node attributes and methods that are not compatible with IE and ff.

Node attributes:

Nodetype: displays the node type.
Nodename: displays the node name.
Nodevalue: displays the value of a node.
Attributes: Get an attribute node
Firstchild: indicates the first node of a node.
Lastchild: The last subnode of a node.
Childnodes: indicates all the subnodes of the node.
Parentnode: indicates the parent node of the node.
Nextsibling: next to the current node
Previussibling: next to the previous node of the current node
Ownerdocument: (unknown)

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

<Body>
<Div id = "T"> <span> </div>
</Body>
<SCRIPT>
VaR d = Document. getelementbyid ("T ");
Document. Write (D. nodetype );
Document. Write (D. nodename );
Document. Write (D. nodevalue );
// Display 1 Div null
</SCRIPT>

Name: attribute node
Nodetype: attribute_node
Nodetype value: 2
Nodename: attribute name
Nodevalue: Attribute Value

<Body>
<Div id = "T" name = "AAA"> <span> </div>
</Body>
<SCRIPT>
VaR d = Document. getelementbyid ("T"). getattributenode ("name ");
Document. Write (D. nodetype );
Document. Write (D. nodename );
Document. Write (D. nodevalue );
// Display 2 Name aaa
</SCRIPT>

Name: text node
Nodetype: text_node
Nodetype value: 3
Nodename: # text
Nodevalue: Text Content

<Body>
<Div id = "T"> BBB </div>
</Body>
<SCRIPT>
VaR d = Document. getelementbyid ("T"). firstchild;
Document. Write (D. nodetype );
Document. Write (D. nodename );
Document. Write (D. nodevalue );
// Display 3 # text bbb
</SCRIPT>

Name: CDATA text node (format of text transmitted in XML)
Nodetype: cdata_section_node
Nodetype value: 4
Nodename: # CDATA-Section
Nodevalue: CDATA text content

(The author omitted eight attributes, which must be technically supplemented)

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

<Body name = "DDD">
<Div id = "T" name = "AAA"> <span> AAA </span> <span> BBB </span> <span> CCC </span> </Div>
</Body>
<SCRIPT>
VaR d = Document. getelementbyid ("T"). attributes ["name"];
Document. Write (D. Name );
Document. Write (D. value );
// Display name aaa
</SCRIPT>

The firstchild and lastchild attributes indicate the first and last subnodes of a node:

<Body>
<Div id = "T"> <span> AAA </span> <span> BBB </span> <span> CCC </span> </div>
</Body>
<SCRIPT>
VaR d = Document. getelementbyid ("T ");
Document. Write (D. firstchild. innerhtml );
Document. Write (D. lastchild. innerhtml );
// Display AAA ccc
</SCRIPT>

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:

<Body name = "DDD">
<Div id = "T"> <span> AAA </span> <span> BBB </span> <span> CCC </span> </div>
</Body>
<SCRIPT>
VaR d = Document. getelementbyid ("T ");
Document. Write (D. childnodes [1]. innerhtml );
Document. Write (D. parentnode. getattribute ("name "));
// Display BBB ddd
</SCRIPT>

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:

<Body name = "DDD">
<Div id = "T"> <span> AAA </span> <span> BBB </span> <span> CCC </span> </div>
</Body>
<SCRIPT>
VaR d = Document. getelementbyid ("T"). childnodes [1];
Document. Write (D. nextsibling. innerhtml );
Document. Write (D. previussibling. innerhtml );
// Display CCC aaa
</SCRIPT>

Ownerdocument attributes (I do not know how to use them)

Node Method Introduction:

Haschildnodes (): determines whether a node has subnodes.
Removechild (): Remove a node
Appendchild (): Add a node
ReplaceChild (): replace a node
Insertbefore (): Insert a node at the specified node location
Clonenode (): copy a node
Normalize (): (unknown)

Haschildnodes () method: determines whether a node has subnodes. If yes, true is returned. If no, false is returned.

<Body name = "DDD">
<Div id = "T"> <span> AAA </span> <span> BBB </span> <span> CCC </span> </div>
<Div id = "M"> </div>
</Body>
<SCRIPT>
Alert (document. getelementbyid ("T"). haschildnodes ());
Alert (document. getelementbyid ("M"). haschildnodes ());
// The first is true, and the second is false.
</SCRIPT>

Removechild () method: Remove a node

<Body name = "DDD">
<Div id = "T"> <span> AAA </span> <span> BBB </span> <span> CCC </span> </div>
</Body>
<SCRIPT>
VaR d = Document. getelementbyid ("T"). firstchild;
Document. getelementbyid ("T"). removechild (d );
// <Span> AAA </span> removed
</SCRIPT>

Appendchild () method: Add a node. If the node already exists in the Document Tree, delete it and insert it in the new position.

<Body name = "DDD">
<Div id = "T"> <span> AAA </span> <span> BBB </span> <span> CCC </span> </div>
</Body>
<SCRIPT>
VaR d = Document. getelementbyid ("T"). firstchild;
Document. getelementbyid ("T"). appendchild (d );
// <Span> AAA </span> is the last node.
</SCRIPT>

ReplaceChild () method: delete (and return) the specified child node from the document tree and replace it with another node.

<Body name = "DDD">
<Div id = "T"> <span> AAA </span> <span> BBB </span> <span> CCC </span> </div>
</Body>
<SCRIPT>
VaR newd = Document. createelement ("span ");
Newd. innerhtml = "eee ";
VaR oldd = Document. getelementbyid ("T"). lastchild;
Document. getelementbyid ("T"). replaceChild (newd, oldd );
// The last item is EEE.
</SCRIPT>

Insertbefore () method: Insert a node before the specified node. if it already exists, delete the original one and insert it in the new location.

<Body name = "DDD">
<Div id = "T"> <span> AAA </span> <span> BBB </span> <span> CCC </span> </div>
</Body>
<SCRIPT>
VaR newd = Document. createelement ("span ");
Newd. innerhtml = "eee ";
VaR where = Document. getelementbyid ("T"). lastchild;
Document. getelementbyid ("T"). insertbefore (newd, where );
// An Eee is added before the last item.
</SCRIPT>

Clonenode () method: copy a node. This method has a parameter. "True" indicates that all child nodes are copied at the same time. "false" indicates that the current node is copied near.

<Body name = "DDD">
<Div id = "T"> <span> AAA </span> <span> BBB </span> <span> CCC </span> </div> <Div id = "M"> </div>
</Body>
<SCRIPT>
VaR what = Document. getelementbyid ("T"). clonenode (false). innerhtml;
Document. getelementbyid ("M"). innerhtml = what;
// Added an aaabbbccc
</SCRIPT>

 

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:
how to get file content in javascript how to get html content in javascript eloquent javascript modern introduction to programming introduction to oops in java introduction to socket programming in c introduction to stack in data structure introduction to data science in python coursera

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