Example Steps for js to Implement Class Selector and name Property Selector

The emergence of jQuery, Greatly improve the efficiency of operating dom, Make our development to a higher level, such as jQuery selector is a very powerful function, which includes class selector, id selector, attribute selector, element selector, level selector, content filter selector, etc. It is very convenient and fast, and the compatibility of these selectors is very good. It can be said that the operation of dom uses jq selector 1 when it is cool, 1 when it is straight! However, at present, the emergence of Vue, React and Angular3 frameworks has greatly reduced the use frequency of JQuery, and JQuery does have certain performance problems and various pits when operating dom and binding data, but it still cannot erase the powerful existence of jq in operating dom!

Having said so many awesome things about JQuery, how are many of its internal principles realized? Today, let's simply implement an jQuery-like class selector and an name attribute selector.

Class selector:

function getElementsByClass(className) {
   var classArr = [];
   var tags = document.getElementsByTagName("*");

   for (var i = 0; i < tags.length; i++) {
    if (tags[i].nodeType == 1) {
     if (tags[i].getAttribute("class") == className) {
      classArr.push(tags[i]);
     }
    }
   }
   return classArr;
}

In fact, the name attribute selector is the same as the class selector 1, except that the judgment condition has changed slightly by 1 time:

function getElementsByName(name) {
   var nameArr = [];
   var num = 0;
   var tags = document.getElementsByTagName("*");

   for (var i = 0; i < tags.length; i++) {
    if (tags[i].nodeType == 1) {
     if (tags[i].getAttribute("name") == name) {
      nameArr.push(tags[i]);
     }
    }
   }

   return nameArr;
}

The name property selector is mostly used for form manipulation.

In the above code, there is an attribute of nodeType, which is used to judge the type of node. nodeType has 12 values, 1 represents the node element, 2 represents the attribute, and 3 represents the text content in the element or attribute. These three values are used more, while the other nine are not used much. If you want to know, you can look at API. Here, we need to get the element node, so we will determine whether the nodeType of the current element is 1.

Next, use recursion to get all child nodes (including grandchild nodes) of the element:

  /** 
   *  Recursively get all child nodes 
   * 
   node Represents the parent node that wants to get all the child nodes 

   type Value :
   1  Element          Representative element 
   2  Attr           Representative attribute 
   3  Text           Represents the text content in an element or attribute 
   4  CDATASection       Represents the  CDATA  Part (text that will not be parsed by the parser) 
   5  EntityReference      Represents entity references 
   6  Entity          Representative entity 
   7  ProcessingInstruction   Represents processing instructions 
   8  Comment          Representative notes 
   9  Document         Represents the entire document ( DOM  Root node of the tree) 
   10 DocumentType       Providing interfaces to entities defined for documents 
   11 DocumentFragment     Represents lightweight  Document  Object that can hold a part of a document 
   12 Notation         Representative  DTD  Symbols declared in 
  */
  var allChildNodes = function (node, type) {
   // 1. Create an array of all nodes 
   var allCN = [];

   // 2. Recursively get all nodes 
   var getAllChildNodes = function (node, type, allCN) {
    //  Gets all the child nodes of the current element nodes
    var nodes = node.childNodes;
    //  Get nodes Child nodes of 
    for (var i = 0; i < nodes.length; i++) {
     var child = nodes[i];
     //  Determine whether it is a node of the specified type 
     if (child.nodeType == type) {
      allCN.push(child);
     }
     getAllChildNodes(child, type, allCN);
    }
   }
   getAllChildNodes(node, type, allCN);
   // 3. Returns an array of all nodes 
   return allCN;
  }

  //  Call: 
  //  Get body All nodes in 
  allChildNodes(document.querySelector('body'), 1);
  
  // Get body All plain text nodes in 
  allChildNodes(document.querySelector('body'), 3)

Author: Xiao Bad

Source: http://tnnyang.cnblogs.com

The above is the js implementation class selector and name attribute selector sample steps details, more about js implementation class selector and name attribute selector information please pay attention to other related articles on this site!