Create a $ () file similar to JQuery for obtaining DOM objects ()

In dom operations, a single object is sometimes obtained based on the id, and multiple objects are sometimes obtained based on the className.

In dom operations, a single object is sometimes obtained based on the id, and multiple objects are sometimes obtained based on the className. Normally, we may use two functions to implement these two functions. However, I have integrated them. The current usage is good. The function is as follows:

// Obtain one or more elements based on selector. // when obtaining multiple elements, you can specify the tag type and parent element function $ (selector, tag, parent) of the element) {var ret = []; // if (! Selector) {return null;} // selector is a dom element and returns it // if it is a text element, return null if (selector. nodeType) {return selector. nodeType = 3? Null: selector;} // if it is an array composed of elements or a nodeList object // such as [dom1, dom2, dom3] or node. if (selector. length & selector. constructor! = String) {ret = Array. prototype. slice. call (selector, 0, selector. length); // filter out non-elements, text nodes, and nodes whose tagnames are not tags (var I = 0; I <ret. length; I ++) {if (! Ret [I]. nodeType | ret [I]. nodeType = 3) {ret. splice (I, 1); I --;} else if (tag & ret [I]. tagName. toLowerCase ()! = Tag. toLowerCase () {ret. splice (I, 1); I --;} return ret;} // if selector is a string if (selector. constructor = String) {// If the String is. indicates to obtain the element if (/^ \. \ w + /. test (selector) {parent = parent | document; tag = tag | "*"; nodes = parent. getElementsByTagName (tag); var className = selector. replace (". "," "); var reg = new RegExp (" (^ | \ B) "+ className +" (\ B | $ )"); for (var I = 0; I <nodes. length; I ++) {if (reg. test (nodes [I]. className) {ret. push (nodes [I]) ;}} return ret ;}// otherwise, the return document Object is obtained by ID. getElementById (selector);} // The input selector has an error return null ;}

Below is how to use it. In order to cooperate with the demo, please first prepare the following HTML Combined Code:

 
 
    
  
  
Hello, world!
    
  
  
Hello, world!
    
  
  
Afasdfsa
    
  
  
Sfk
    
  
  
Sdklfajsfjk
    
  
  
End
    
  
  
Of
 
 
 
 
    
  
  
Additional first item
    
  
  
Additional item 2
    
  
  
Additional third item
 
 

The above code structure is only written for testing, so it is an alternative ...... No !!!

Returns to the $ function, which has the following functions:

1. $ (): Return null;
2. $ ("Id"): returns a single object, as follows: alert ($ ("test"); // object HTMLUListElement
3. $ (". T "): returns an array composed of all elements whose className is t, as follows: alert ($ (". t "). length); // 7. The className of a total of 7 elements is t?
4. $ (". T ", 'lil'): return the li tag object whose className is t, as follows: alert ($ (". t ", 'lil '). length); // 6, there is

   The class style is t, but is excluded

5. $ (". T", "li", $ ("test"): returns
6. And the class style is t, as follows: alert ($ (". t ", 'lil', $ (" test ")). length); // 3, the value range is within test.
7. $ ("Test "). childNodes): combines the child elements of test into an array and filters out text nodes, as follows: alert ($ ("test "). childNodes ). length); // a total of 7
8. $ ("Test"). childNodes, 'P '):

   Alert ($ ("test"). childNodes, 'P'). length); // 2, just two

9. You can also pass an array as follows:

Var arr = [1, 2, 3, document, document. body]; alert ($ (arr). length); // 2. 1, 2, 3 ignored

In addition, it is more convenient to use $ and $ in combination. The above is just a function that I personally use and is for reference only.

This article is available at http://www.nowamagic.net/librarys/veda/detail/1278.