Собственные JavaScript-эквиваленты методов jQuery: DOM и формы

Дискуссия по-прежнему бушует о моем недавнем JQuery? В статье есть две причины, по которым использование jQuery является хорошей идеей:

1. вам нужно поддерживать IE6 / 7/8 (помните, что вы не можете перейти на jQuery 2.0), или
2. без jQuery вы бы потратили больше времени на написание jQuery-подобной библиотеки, чем на разработку своего приложения.

Во всем остальном будьте прагматичны. jQuery — это общая библиотека на 270 Кб. Вам вряд ли потребуется вся функциональность, которую он предоставляет, и, даже если вы пропустите определенные модули, он останется значительным количеством кода. Вы можете загрузить уменьшенную версию 30 КБ из CDN, но браузер должен остановить обработку и проанализировать код на каждой странице, прежде чем делать что-либо еще.

Это первая из серии статей, в которой показаны собственные эквиваленты JavaScript общих методов jQuery. Хотя вы можете захотеть обернуть некоторые из них в более короткие функции, подобные псевдонимам, вам, конечно, не нужно создавать свои собственные библиотеки, подобные jQuery.

DOM селекторы

jQuery разрешает выбор узла DOM с использованием синтаксиса селектора CSS, например

// find all paragraphs with the class "summary" in the article with ID "first"
var n = $("article#first p.summary");

Нативный эквивалент:

 var n = document.querySelectorAll("article#first p.summary");

document.querySelectorAll jQuery имеет дополнительную поддержку для более продвинутых селекторов, но, по большей части, он будет запускать document.querySelectorAll$()

Собственный JavaScript также предоставляет четыре альтернативы, которые почти наверняка будут быстрее, чем querySelectorAll, если вы сможете их использовать:

1. document.querySelector(selector)
2. document.getElementById(idname)
3. document.getElementsByTagName(tagname)
4. document.getElementsByClassName(class)

Методы getElementsByTagName и getElementsByClassName могут также применяться к отдельным узлам, чтобы ограничить результат только потомками, например

 var n = document.getElementById("first");
var p = n.getElementsByTagName("p");

Давайте сделаем некоторое тестирование. Я написал небольшую подборку сценариев для извлечения всех узлов комментариев из моего jQuery «Действительно ли вам нужен»? статья 10000 раз. Результат:

 // jQuery 2.0
var c = $("#comments .comment");

 // jQuery 2.0
var c = $(".comment");

 // native querySelectorAll
var c = document.querySelectorAll("#comments .comment");

 // native querySelectorAll
var c = document.querySelectorAll(".comment");

 // native getElementById / getElementsByClassName
var n = document.getElementById("comments");
var c = n.getElementsByClassName("comment");

 // native getElementsByClassName
var c = document.getElementsByClassName("comment");

Я не могу требовать строгих лабораторных условий, и это не отражает реального использования, но в этой ситуации нативный JavaScript был в 60 раз быстрее. Это также показывает, что выборка узлов по идентификатору, тегу или классу обычно предпочтительнее, чем querySelectorAll

DOM Manipulation

JQuery предлагает несколько методов для добавления дополнительного контента в DOM, например,

 $("#container").append("<p>more content</p>");

Под поверхностью jQuery использует собственный метод innerHTML, например

 document.getElementById("container").innerHTML += "<p>more content</p>";

Вы также можете использовать методы построения DOM. Это безопаснее, но редко быстрее, чем innerHTML:

 var p = document.createElement("p");
p.appendChild(document.createTextNode("more content");
document.getElementById("container").appendChild(p);

Мы также можем удалить все дочерние узлы в jQuery:

 $("#container").empty();

 document.getElementById("container").innerHTML = null;

 var c = document.getElementById("container");
while (c.lastChild) c.removeChild(c.lastChild);

 $("#container").remove();

 var c = document.getElementById("container");
c.parentNode.removeChild(c);

 <input type="email" name="email" required="required" />