Differences between js Form Verification and childNodes and children, jschildnodes

Source: Internet
Author: User

Differences between js Form Verification and childNodes and children, jschildnodes
1. Perform null verification on the submitted Form

Html code:

1   <form action="#"onsubmit="return validate_form(this);" method="post">2         Email: <input type="text" name="emails" size="30"><br>3         Phone: <input type="text" name="phone" size="30"><br>4                <input type="submit" value="Submit"> 5     </form>


1 function validate_required (field, alerttxt) {2 with (field) {3/* if the input box value is null, false is returned */4 if (value = null | value = "") {5 alert (name + alerttxt ); 6 return false 7} else {8 return true 9} 10} 11} 12 13/* Form Verification */14 function validate_form (thisform) {15 with (thisform) {16 for (I = 0; I <elements. length-1; I ++) {17/* traverse the form content */18 if (validate_required (elements [I], "must be filled out! ") = False) {19 elements [I]. focus (); // highlighted blank input box 20 return false21} 22} 23} 24 return true; 25}
Ii. Differences between childNodes and children

1. childNodes: it is a standard attribute. It returns a set of child nodes of the specified element, including HTML nodes, all attributes, and text nodes (including line breaks and spaces, which are also considered as one node ).

    • When nodeType = 1, it indicates that this node is an element node,
    • NodeType = 2 indicates that the node is an attribute node,
    • When nodeType = 3, it indicates that the node is a text node,

For example, the head label node of the following html code:



I want to obtain the title content of the page and modify it by obtaining the subnode, using the following js method:

1 var h = document. getElementsByTagName ("head") [0]. childNodes; // subnode set for obtaining the head label 2 for (I = 0; I 

The running result is as follows:


On the left side is the html source code structure, and on the right side is the running result. The actual node type code of the first node is 3, which indicates that it is a text node (actually a line break ), the type code of the second node is 1, indicating that it is an html Tag node. (The red arrow in the figure indicates the text node, and the yellow arrow indicates the html Tag node)

When we change the html code to the following (write all the nodes in one line, there is no space or line feed between the html nodes), then we can view the running result again:


Running result:


There are only three nodes left, which are exactly three HTML Tag nodes. Therefore, we can see that childnodes is relatively strict in searching nodes, and both spaces and line breaks are included in nodes, it traverses the entire source code structure.

2. children: it is a non-standard attribute. It returns only the HTML node set of the child node of the specified element.

In the first case of the above example, we will change the method of getting the node set to chrildren, and the others will not change. Check the running result:


It can be found that only HTML nodes are saved, without interference from other text nodes.




Related Article

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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