Native JavaScript Equivalents of jQuery Methods: the DOM and Forms

Core points

• jQuery is a useful tool for developers who need to support legacy Internet Explorer or write libraries like jQuery longer than developing applications. However, for most other cases, using native JavaScript is more efficient because it does not require loading large libraries like jQuery.
• Native JavaScript equivalents of commonly used jQuery methods such as DOM selectors and DOM operations are usually executed faster and more efficiently than their jQuery counterparts. For example, using document.getElementsByClassName or document.getElementById may be much faster than using jQuery's $() wrapper.
• HTML5 provides built-in support for a variety of common input types without adding additional JavaScript or jQuery code for form validation. Old browsers that do not support these new types will be restored to standard text input fields and require server-side verification.

About my recent "Do you really need jQuery? 》 article, the debate continues, but in short, there are two reasons to use jQuery: 1. You need to support IE6/7/8 (remember you can't migrate to jQuery 2.0), or 2. Without jQuery, you will spend more than development The application takes longer to write a library like jQuery.

Please be pragmatic for all other situations. jQuery is a 270KB universal library. It's unlikely that you need all the functionality it provides, even if you omit certain modules, it's still a big chunk of code. You may load a minified version of 30KB from the CDN, but the browser must stop processing and parse the code on each page before doing any other actions. This is the first in a series of articles that showcase native JavaScript equivalents to commonly used jQuery methods. While you may want to wrap some of these in shorter, similar aliased functions, you certainly don't need to create your own jQuery-like library.

DOM selector

jQuery allows DOM node selection using CSS selector syntax, for example:

<code class="language-javascript">// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");</code>

Native equivalent:

<code class="language-javascript">var n = document.querySelectorAll("article#first p.summary");</code>

document.querySelectorAll is implemented in all modern browsers and IE8 (although this only supports CSS2.1 selectors). jQuery provides additional support for more advanced selectors, but for the most part it runs within the $() wrapper. Native JavaScript also offers four alternatives, which are almost certainly faster than document.querySelectorAll if you can use them: querySelectorAll

1. document.querySelector(selector) — Get only the first matching node
2. document.getElementById(idname) — Get a single node by its ID name
3. document.getElementsByTagName(tagname) — Get the node matching the element (such as h1, p, strong, etc.).
4. document.getElementsByClassName(class) — Get a node with a specific class name

The

getElementsByTagName and getElementsByClassName methods can also be applied to a single node to limit the result to descendants only, for example:

<code class="language-javascript">// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");</code>

Let's do some testing. I wrote some small scripts to get from my "Do you really need jQuery?" 》 Searches all comment nodes 10,000 times in the article. Results:

代码	时间
// jQuery 2.0<br>var c = $("#comments .comment");	4,649 ms
// jQuery 2.0<br>var c = $(".comment");	3,437 ms
// 原生 querySelectorAll<br>var c = document.querySelectorAll("#comments .comment");	1,362 ms
// 原生 querySelectorAll<br>var c = document.querySelectorAll(".comment");	1,168 ms
// 原生 getElementById / getElementsByClassName<br>var n = document.getElementById("comments");<br>var c = n.getElementsByClassName("comment");	107 ms
// 原生 getElementsByClassName<br>var c = document.getElementsByClassName("comment");	75 ms

I can't claim strict lab conditions, nor does it reflect real-world usage, but in this case native JavaScript is 60 times faster. It also states that getting nodes by ID, tag, or class is usually better than querySelectorAll.

DOM operation

jQuery provides several ways to add more to the DOM, such as:

<code class="language-javascript">// 在 ID 为“first”的文章中查找所有具有类“summary”的段落
var n = $("article#first p.summary");</code>

Below the surface, jQuery uses the native innerHTML method, for example:

<code class="language-javascript">var n = document.querySelectorAll("article#first p.summary");</code>

You can also use DOM build technology. These are safer, but rarely faster than innerHTML:

<code class="language-javascript">var n = document.getElementById("first");
var p = n.getElementsByTagName("p");</code>

We can also delete all child nodes in jQuery:

<code class="language-javascript">$("#container").append("<p>more content</p>");</code>

Native equivalents to use innerHTML:

<code class="language-javascript">document.getElementById("container").innerHTML += "<p>more content</p>";</code>

or a small function:

<code class="language-javascript">var p = document.createElement("p");
p.appendChild(document.createTextNode("more content"));
document.getElementById("container").appendChild(p);</code>

Finally, we can delete the entire element from the DOM in jQuery:

<code class="language-javascript">$("#container").empty();</code>

or native JavaScript:

<code class="language-javascript">document.getElementById("container").innerHTML = null;</code>

Scalable Vector Graphics (SVG)

Core jQuery library has been developed to process current documents. SVG also has DOM, but jQuery does not provide direct manipulation to these objects, as it usually requires methods such as createElementNS and getAttributeNS . It works and there are several plugins available, but it's more efficient to write your own code or use a dedicated SVG library like Raphaël or svg.js.

HTML5 Form

Even the most basic web applications will have one or two forms. You should always verify user data on the server side, but ideally you would supplement it with client verification so that the errors can be caught before submitting the form. Client verification is simple: 1. Run a function when the form is submitted. 2. If you encounter any problems, stop submitting and display an error.

You can use jQuery. You can use native JavaScript. Which one should you choose? Neither chooses . HTML5 supports a variety of commonly used input types, such as email, phone, URL, number, time, date, color, and custom fields based on regular expressions. For example, if you want to force a user to enter an email address, please use:

<code class="language-javascript">var c = document.getElementById("container");
while (c.lastChild) c.removeChild(c.lastChild);</code>

Unless you need more complex features (such as comparing two or more fields or displaying custom error messages), there is no need for additional JavaScript or jQuery code. Older browsers (including IE9 and below) do not understand the new type and will be restored to standard text input fields. These users will fall back to server-side verification; this is not a great experience, but you can apply a shim or hope these people see the light and upgrade. In my next post, we will look at native CSS class operations and animations.

FAQs about jQuery and native JavaScript

(The FAQ part is omitted here because the content of this part is weakly related to the picture and article subject, and the article is longer, so it can be processed separately.)

The above is the detailed content of Native JavaScript Equivalents of jQuery Methods: the DOM and Forms. For more information, please follow other related articles on the PHP Chinese website!