[Original] jquery source code analysis-11 Dom traversal-Traversing-dom Traversal method

Author: nuysoft/high cloud QQ: 47214707 Email: nuysoft@gmail.com
Disclaimer: This article is an original article. If you need to reprint it, please indicate the source and retain the original article link.

Jquery source code analysis series (Continuous updates)

 

1. Attributes childnodes vs attributes children

Childnodes	Retrieves a collection of HTML elements and textnode objects that are direct descendants of the specified object. Standard, including HTML elements and text
Children	Retrieves a collection of DHTML objects that are direct descendants of the object. Non-standard, only contains HTML elements

 

2. Method children vs method Contents

Jquery. FN. Children (ELEM)	Contains only element
Jquery. FN. Contents (ELEM)	Including element, text, and comment

 

3. complete source code analysis (highlights are sorted and de-duplicated)

Jquery. Each ({parent: function (ELEM) {// parent element var parent = ELEM. parentnode; return parent & parent. nodetype! = 11? Parent: NULL; // documentfragment 11, documenttype 10}, parents: function (ELEM) {// return jquery, the ancestor element. dir (ELEM, "parentnode"); // retrieve all parent elements until document}, parentsuntil: function (ELEM, I, until) {// return jquery. dir (ELEM, "parentnode", until) ;}, next: function (ELEM) {// return jquery, the next sibling element. nth (ELEM, 2, "nextsibling"); // starts counting from 1. Currently, there are 1st. Why should we create another inconsistent index method ?}, PREV: function (ELEM) {// return jquery, the last elder brother element. nth (ELEM, 2, "previussibling") ;}, nextall: function (ELEM) {// all the sibling elements return jquery. dir (ELEM, "nextsibling") ;}, prevall: function (ELEM) {// All elder brother elements return jquery. dir (ELEM, "previussibling");}, nextuntil: function (ELEM, I, until) {// All sibling elements, but not including untilreturn jquery. dir (ELEM, "nextsibling", until) ;}, prevuntil: function (ELEM, I, ){ // All elder brother elements, but do not include untilreturn jquery. dir (ELEM, "previussibling", until) ;}, siblings: function (ELEM) {// all siblings, excluding the current element return jquery. sibling (ELEM. parentnode. firstchild, ELEM); // all the sibling elements of the first child element of the parent element, excluding the current element ELEM // take the child element childnodes and then filter ELEM for higher efficiency}, children: function (ELEM) {// all child nodes, including only elementreturn jquery. sibling (ELEM. firstchild); // all the sibling elements of the first child element // Why not directly retrieve the child element? Isn't childnodes more efficient ?}, Contents: function (ELEM) {// all child nodes, including element, text, commentreturn jquery. nodename (ELEM, "iframe ")? ELEM. contentdocument | elem.content+doc ument: // if it is an IFRAME, use documentjquery. makearray (ELEM. childnodes); // converts childnodes to an array. childnodes is a pseudo array. When traversing the array after conversion, you can avoid checking childnodes to improve performance.}, function (name, FN) {jquery. FN [name] = function (until, selector) {var ret = jquery. map (this, FN, until), // process the elements in this with FN, and finally return the real array, until for filtering // The variable 'args' was introduced in // https://github.com/jque Ry/jquery/commit/52a0238 // to work around a bug in chrome 10 (Dev) and shocould be removed when the bug is fixed. // http://code.google.com/p/v8/issues/detail? Id = 1050 ARGs = slice. Call (arguments); // copy arguments and convert it into an array if (! Runtil. test (name) {// does not end with until selector = until; // The parameter until is not required. There is only one parameter selector, util only ends here} If (selector & typeof selector = "string") {ret = jquery. filter (selector, RET); // use selector to filter the RET array, leaving only matching elements. // jquery. filter calls jquery. find. matches> sizzle. matches> sizzle, the sizzle search and filtering results have been sorted, de-duplicated}/*** sort and de-duplicated * first, you must know that this is sorted, and there are no duplicates * If the length is greater than 1, to determine whether deduplication is required * if the name is one of children contents next Prev Sort To remove duplicates, because these four methods do not produce unordered and repeated results. Why? * Because the elements in this are ordered and deduplicated, its subnodes, siblings, and siblings, they are also ordered and non-duplicated. * But parent Parents parentsuntil nextall prevall nextuntil prevuntil siblings may generate duplicate and unordered elements. ** we can see that the optimization is performed here, otherwise, this encoding habit is very exquisite and awesome, but: * even if you do not need to sort or deduplicate the codes, it must go through these long judgments, it is a waste of * the complexity and unnecessary performance consumption caused by this type of function. It is everywhere in jquery * although no detailed performance test is done, it is not necessary, but it gave me a little bit of a feeling that "the machine is too intelligent to pay for your life" * from the beginning when I read the source code, I was amazed and admired, gradually, we can identify the essence and the author's balance. jquery's greatness is undeniable. * but when we write code, we should learn from it for reference, you should also consider the trade-off ** the above feelings are for reference only, and I am still able to understand and analyze jquer In the phase of Y source code, there is no way to create a set of class libraries. * Maybe jquery cannot satisfy me with a higher level. When I look back, it may be another sentiment. */Ret = This. length> 1 &&! Guaranteedunique [name]? Jquery. Unique (RET): ret; // deduplication // rparentsprev =/^ (?: Parents | prevuntil | prevall) // The result returned by the front edge is returned in the order of the element's position in the document. In the case of rparentsprev, The result needs to be reversed to facilitate the use of IF (this. length> 1 | rmultiselector. test (selector) & rparentsprev. test (name) {ret = ret. reverse (); // reverse} return this. pushstack (Ret, name, argS. join (","); // construct a jquery object };})