The DOM api--selection element for the jquery selector

English Original: http://blog.garstasio.com/you-dont-need-jquery/selectors/Fools Wharf Note:

• The original author's intention to write this article is to let us abandon jquery,you Don ' t need jquery! advocates that we use native JavaScript, so we collect and collate the DOM API corresponding to the jQuery syntax;
• The reason for the original author parameter can be seen here: http://blog.garstasio.com/you-dont-need-jquery/why-not/, individual agree with his point of view, simple page or application, can abandon jquery completely But for development efficiency and development costs, I prefer jquery.
• I translate or copy this article reason is: a part of the front end will only use jquery, what all online find plug-ins, and even misuse of jquery, a little native JavaScript will not write. On QQ, micro-blog private messages often receive similar basic problems. The front end is to toss the life, to learn from the basic system. So translated this article, hope to novice and do not write native script students have a little help.

Select element

How many times have you seen a Web application or library use jquery to perform simple trivial element selection? How many times have you written this way: $(#myElement‘) ? $(‘.myElement‘) You don't need to select elements with jquery! This is also easy to do with the DOM API.

1. Ids
2. CSS Classes
3. Tag Names
4. Attributes
5. Pseudo-classes
6. Children
7. Descendants
8. Exclusion selectors
9. Multiple selectors
10. See a Pattern?
11. Filling in the Gaps
12. Next in the This Series

by Idjquery

1. Returns a jQuery obj w/0-1 elements
2. $(' #myElement ');

DOM API

1. IE 5.5+
2. Document. getElementById(' myelement ');

... Or...

1. IE 8+
2. Document. Queryselector(' #myElement ');

Both of these methods return one Element (element). It is important to note that use is getElementById querySelector more efficient than use.

Does the jquery syntax provide any benefit? I didn't see one. What about you?

by CSS Classjquery

1. Returns a jQuery obj w/all matching elements
2. $('. myelement ');

DOM API

1. IE + +
2. Document. Getelementsbyclassname(' myelement ');

... Or...

1. IE 8+
2. Document. Queryselectorall('. myelement ');

The first method returns HTMLCollection , and the most efficient is the second method. querySelectorAllalways returns one NodeList (node list).

Again, it's really a simple thing here. Why use jquery?

by Tag Name

For example, select all the elements on a page <div> :

Jquery

1. $(' div ');

DOM API

1. IE 5.5+
2. Document. getElementsByTagName(' div ');

... Or...

1. IE 8+
2. Document. Queryselectorall(' div ');

As expected, the querySelectorAll (return) is NodeList getElementsByTagName less efficient than (return HTMLCollection ).

by Attribute (properties)

Select all elements with "Data-foo-bar" value of "Someval":

Jquery

1. $(' [data-foo-bar= ' someval '] ');

DOM API

1. IE 8+
2. Document. Queryselectorall(' [data-foo-bar= ' someval '] ');

The DOM API is very similar to the jquery syntax.

by Pseudo-class (Pseudo class)

Selects all the currently invalid (: invalid pseudo-Class) fields in the specified form. Let's say our form ID is "MyForm".

Jquery

1. $(' #myForm: Invalid ');

DOM API

1. IE 8+
2. Document. Queryselectorall(' #myForm: Invalid ');

Children (child Element)

Selects all child elements of a particular element. Let's say our specific element ID is "myparent".

Jquery

1. $(' #myParent '). Children();

DOM API

1. IE 5.5+
2. Note:this would include comment and text nodes as well.
3. Document. getElementById(' myparent '). ChildNodes;

... Or...

1. IE + + (ignores comment & text nodes).
2. Document. getElementById(' myparent '). Children;

But what if we just want to find a specific child element? For example, are there child elements of the "Ng-click" attribute?

Jquery

1. $(' #myParent '). Children(' [Ng-click] ');

... Or...

1. $(' #myParent > [Ng-click] ');

DOM API

1. IE 8+
2. Document. Queryselector(' #myParent > [Ng-click] ');

Descendants (descendant elements)

Find all the "a" elements below #myparent.

Jquery

1. $(' #myParent A ');

DOM API

1. IE 8+
2. Document. Queryselectorall(' #myParent A ');

Excluding Elements (excluding elements)

Select all <div> elements to exclude those with the "ignore" style class <div> element.

Jquery

1. $(' DIV '). Not('. Ignore ');

... Or...

1. $(' div:not (. Ignore) ');

DOM API

1. IE + +
2. Document. Queryselectorall(' div:not (. Ignore) ');

Multiple selectors (multiple selection)

Select All <div> , <a> and <script> elements.

Jquery

1. $(' DIV, A, SCRIPT ');

DOM API

1. IE 8+
2. Document. Queryselectorall(' DIV, A, SCRIPT ');

See a Pattern?

If we focus on the support of selectors and do not need to deal with browsers below IE8, we only need to replace jquery with this:

2. Window. $ = function(selector) {
4. var selectortype = ' queryselectorall ';
8. if (selector. IndexOf(' # ') = = = 0) {
10. Selectortype = ' getElementById ';
12. Selector = selector. Substr(1, selector. Length);
14. }
18. return document[selectortype] (selector);
20. };

But I want more!

for the vast majority of projects, the selector support to the Web API is sufficient. But if you unfortunately need to support IE7? In this case, you may need some third-party code to provide some help.

Of course, you just need to introduce jquery, but why use such a large codebase when you only need to support today's advanced selectors? Instead, try Micro-library (Tiny library) to focus entirely on element selection. Consider, Sizzle, which happens to be the selection library used by jquery. Selectivizr is another very small selection library that can support the CSS3 selector on very old browsers.

The DOM api--selection element for the jquery selector