vanilla-js-dom
Advanced tools
Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications.
Vous êtes français ? Le README derrière ce lien vous sera peut-être plus agréable.
Vanilla JS is a fast, lightweight, cross-platform tool for building incredible, powerful JavaScript applications.
Just put the following code:
<!-- <script src="path/to/vanilla.js"></script> -->
The much faster method:
When Vanilla JS perform 100 operations, others do:
| Code | 100 ops Vanilla JS | |
|---|---|---|
| Vanilla JS | document.getElementById("vanilla"); | 100 |
| Dojo | dojo.byId("dojo"); | 92 |
| Prototype JS | $("prototype"); | 57 |
| jQuery | $("#jquery"); | 42 |
| MooTools | document.id("mootools"); | 24 |
| Code | 100 ops Vanilla JS | |
|---|---|---|
| Vanilla JS | document.getElementsByTagName("div"); | 100 |
| Prototype JS | Prototype.Selector.select("div", document); | 25 |
| jQuery | $("div"); | 21 |
| jQuery | dojo.query("div"); | 3 |
| MooTools | Slick.search(document, "div", new Elements); | 2 |
| Code | 100 ops Vanilla JS | |
|---|---|---|
| Vanilla JS | document.getElementsByClassName("vanilla"); | 100 |
| jQuery | $(".jquery"); | 25 |
<#id> .inner span selector| Code | 100 ops Vanilla JS | |
|---|---|---|
| Vanilla JS | document.querySelector("#vanilla .inner span"); | 100 |
| jQuery | $("#jquery .inner span"); | 17 |
<.className> .inner span selector| Code | 100 ops Vanilla JS | |
|---|---|---|
| Vanilla JS | document.querySelectorAll(".vanilla .inner span"); | 100 |
| jQuery | $(".jquery .inner span"); | 51 |
All tests are based on <section id="vanilla" class="vanilla"><article class="inner"><div class="target" id="target"></div></article></section> HTML.
Select node <div class="target" id="target"></div> | 100 ops Vanilla JS |
|---|---|
| document.getElementsByTagName("div"); | 100 |
| document.getElementById("target"); | 99 |
| document.getElementsByClassName("target"); | 96 |
| document.querySelector(".vanilla .inner div"); | 68 |
| document.querySelectorAll(".vanilla .inner div"); | 35 |
Legend
Understand each type of DOM Object:
<div class="example">
<span>(Text into) Html Element</span>
<!-- Comment Element -->
Text Element
<span>(Text into) Html Element</span>
</div>
querySelector(".example") return a HTMLElement.querySelector(".example").children return a HTMLCollection, each collection's item is a HTMLElement, two [span, span] here.querySelector(".example").childNodes return a NodeList, each collection's item is a Node, seven [text, span, text, comment, text, span, text] here.querySelector(".example").childNodes[0] return a Text (Node) of typeNode 3, as a text. (...nodeList[3] is typeNode 8 as a Comment (Node too)).From jQuery
var htmlElement = $("#id")[0];
to Vanilla JS
var htmlElement = document.getElementById("id");
From jQuery
var htmlElement = $("#id .classname tagname")[0];
to Vanilla JS
document.querySelector("#id .classname tagname");
From jQuery
$("#id .classname tagname").each(function (i, htmlElement) {
htmlElement;
});
to Vanilla JS
var nodeList = document.querySelectorAll("#id .classname tagname"); // Not Live (Snapshot)
[].forEach.call(nodeList, function (node) {
node;
});
From jQuery
$(".classname").each(function (i, htmlElement) {
htmlElement;
});
to Vanilla JS
var htmlCollection = document.getElementsByClassName("classname"); // Live
// var nodeList = document.querySelectorAll(".classname"); // Not Live (Snapshot)
[].forEach.call(htmlCollection, function (htmlElement) {
htmlElement;
});
From jQuery
$('[name="name"]').each(function (i, htmlElement) {
htmlElement;
});
to Vanilla JS
var nodeList = document.getElementsByName("name"); // Live
// var nodeList = document.querySelectorAll("[name=name]"); // Not Live (Snapshot)
[].forEach.call(nodeList, function (node) {
node;
});
From jQuery
$("tagname").each(function (i, htmlElement) {
htmlElement;
});
to Vanilla JS
var htmlCollection = document.getElementsByTagName("tagname"); // Live
// var nodeList = document.querySelectorAll("tagname"); // Not Live (Snapshot)
[].forEach.call(htmlCollection, function (htmlElement) {
htmlElement;
});
From jQuery
$($(".className").get().reverse()).each(function (i, htmlElement) {
htmlElement;
});
to Vanilla JS
var htmlCollection = document.getElementsByClassName("className"), // Live
i = htmlCollection.length;
while (htmlElement = htmlCollection[--i]) {
htmlElement;
}
From jQuery
$.ajax({
type: "GET",
url: <url>,
data: <data>
});
to Vanilla JS
var get = new XMLHttpRequest();
get.open("GET", <url>, true);
get.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
get.send(<data>);
From jQuery
function getJSON(url, next) {
$.getJSON(url, function (data) {
next(null, data);
}).error(function () {
next(new Error("There was a connection error of some sort."));
});
}
getJSON(<url>, function (err, data) {
if (err) {
return err;
}
data;
});
to Vanilla JS
function getJSON(url, next) {
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.send();
request.addEventListener("load", function () {
if (request.status < 200 && request.status >= 400) {
return next(new Error("We reached our target server, but it returned an error."));
}
next(null, JSON.parse(request.responseText));
});
request.addEventListener("error", function () {
next(new Error("There was a connection error of some sort."));
});
}
getJSON(<url>, function (err, data) {
if (err) {
return err;
}
data;
});
From jQuery
$.ajax({
type: "POST",
url: <url>,
data: <data>
});
to Vanilla JS
var post = new XMLHttpRequest();
post.open("POST", <url>, true);
post.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
post.send(<data>);
From jQuery
function request(url, next) {
$.ajax({
type: 'GET',
url: url,
success: function(response) {
next(null, response);
},
error: function() {
next(new Error("There was a connection error of some sort."));
}
});
}
request(>url>, function (err, response) {
if (err) {
return err;
}
response;
});
to Vanilla JS
function request(url, next) {
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.send();
request.addEventListener("load", function () {
if (request.status < 200 && request.status >= 400) {
return next(new Error("We reached our target server, but it returned an error."));
}
next(null, request.responseText);
});
request.addEventListener("error", function () {
return next(new Error("There was a connection error of some sort."));
});
}
request(>url>, function (err, response) {
if (err) {
return err;
}
response;
});
From jQuery
$(<htmlElement>).addClass(<className>);
to Vanilla JS
<htmlElement>.classList.add(<className>);
From jQuery
$(<htmlElement>).attr(<attributeName>);
to Vanilla JS
<htmlElement>.getAttribute(<attributeName>);
From jQuery
$(<htmlElement>).data(<dataName>);
to Vanilla JS
<htmlElement>.getAttribute(<"data-" + dataName>);
From jQuery
$(<htmlElement>).value();
to Vanilla JS
<htmlElement>.value;
From jQuery
$(<htmlElement>).hasClass(<className>);
to Vanilla JS
<htmlElement>.classList.contains(<className>);
From jQuery
$(<htmlElement>).removeAttr(<attributeName>);
to Vanilla JS
<htmlElement>.removeAttribute(<attributeName>);
From jQuery
$(<htmlElement>).removeClass(<className>);
to Vanilla JS
<htmlElement>.classList.remove(<className>);
From jQuery
$(<htmlElement>).removeData(<dataName>);
to Vanilla JS
<htmlElement>.removeAttribute(<"data-" + dataName>);
From jQuery
$(<htmlElement>).attr(<attributeName>, <value>);
to Vanilla JS
<htmlElement>.setAttribute(<attributeName>, <value>);
From jQuery
$(<htmlElement>).data(<dataName>, <value>);
to Vanilla JS
<htmlElement>.setAttribute(<"data-" + dataName>, <value>);
From jQuery
$(<htmlElement>).value(<value>);
to Vanilla JS
<htmlElement>.value = <value>;
From jQuery
$(<htmlElement>).toggleClass(<className>);
to Vanilla JS
<htmlElement>.classList.toggle(<className>);
From jQuery
function fadeIn($htmlElement, speed, next) {
$htmlElement.css("opacity", "0").animate({ opacity: 1 }, speed, next);
}
fadeIn($(<htmlElement>), 2000, function () {
$(this).css("opacity", "");
});
to Vanilla JS
function fadeIn(htmlElement, speed, next) {
var last = +new Date(),
tick = function () {
htmlElement.style.opacity = +htmlElement.style.opacity + (new Date() - last) / speed;
last = +new Date();
if (+htmlElement.style.opacity < 1) {
requestAnimationFrame(tick);
} else if (next) {
next.call(htmlElement);
}
};
htmlElement.style.opacity = 0;
tick();
}
fadeIn(<htmlElement>, 2000, function () {
this.style.opacity = '';
});
From jQuery
$(<htmlElement>).hide();
to Vanilla JS
<htmlElement>.style.display = "none";
From jQuery
$(<htmlElement>).show();
to Vanilla JS
<htmlElement>.style.display = "";
From jQuery
$(<htmlElement>).hover(<eventHandlerMouseIn>, <eventHandlerMouseOut>);
to Vanilla JS
<htmlElement>.addEventListener("mouseenter", <eventHandlerMouseIn>);
<htmlElement>.addEventListener("mouseleave", <eventHandlerMouseOut>);
From jQuery
$(<htmlElement>).load(function () {
// I am full loaded.
});
to Vanilla JS
<htmlElement>.addEventListener("load", function () {
// I am full loaded.
});
From jQuery
$(<htmlElement>).off(<eventName>, <eventHandler>);
to Vanilla JS
<htmlElement>.removeEventListener(<eventName>, <eventHandler>);
From jQuery
$(<htmlElement>).on(<eventName>, <eventHandler>);
to Vanilla JS
<htmlElement>.addEventListener(<eventName>, <eventHandler>);
From jQuery
$(<htmlElement>).one(<eventName>, <eventHandler>);
to Vanilla JS
<htmlElement>.addEventListener(<eventName>, function callee(event) {
event.target.removeEventListener(e.type, callee);
});
From jQuery
$(document).ready(function () {
// I am ready to be manipulate.
});
to Vanilla JS
document.addEventListener("DOMContentLoaded", function () {
// I am ready to be manipulate.
});
From jQuery
var event = jQuery.Event("click");
event.test = true;
$(<htmlElement>).click(function (event) {
event.test; // undefined by click, true by trigger.
});
$(<htmlElement>).trigger(event);
// $(<htmlElement>).trigger("click"); // Shortcut without test property.
to Vanilla JS
var event = new Event("click");
event.test = true;
<htmlElement>.addEventListener("click", function (event) {
event.test; // undefined by click, true by trigger.
});
<htmlElement>.dispatchEvent(event);
From jQuery
filterCondition
$(<selector>).filter(function (i, htmlElement) {
return <filterCondition>;
}).each(function (i, htmlElement) {
htmlElement;
});
to Vanilla JS
var nodeList = document.querySelectorAll(<selector>);
nodeList = [].filter.call(nodeList, function (node) {
return <filterCondition>;
});
[].forEach.call(nodeList, function (node) {
node;
});
From jQuery
$(<selector>).first();
to Vanilla JS
<htmlCollection>.item(0);
// <htmlCollection>[0];
From jQuery
$(<selector>).has(<matchesChildSelector>);
to Vanilla JS
var nodeList = document.querySelectorAll(<selector>);
[].filter.call(nodeList, function (node) {
return node.querySelector(<matchesChildSelector>);
});
From jQuery
$(<selector>).is(<matchesSelector>);
to Vanilla JS
var nodeList = document.querySelectorAll(<selector>);
[].some.call(nodeList, function (node) {
return node.matches(<matchesSelector>);
});
From jQuery
$(<selector>).eq(<index>);
to Vanilla JS
<htmlCollection>.item(<index>);
// <htmlCollection>[<index>];
From jQuery
$(<selector>).last();
to Vanilla JS
<htmlCollection>.item(<htmlCollection>.length - 1);
// <htmlCollection>[<htmlCollection>.length - 1];
From jQuery
$(<selector>).not(<matchesSelector>);
to Vanilla JS
var nodeList = document.querySelectorAll(<selector>);
[].filter.call(nodeList, function (node) {
return !node.matches(<matchesSelector>);
});
From jQuery
$(<selector>).slice(<startIndex>, <endIndex>);
to Vanilla JS
var nodeList = document.querySelectorAll(<selector>);
[].slice.call(nodeList, <startIndex>, <endIndex>);
From jQuery
$(<htmlElement>).append($(<appendHtmlElement>));
// $(<htmlElement>).append(<appendHtmlElement>);
to Vanilla JS
<htmlElement>.appendChild(<appendHtmlElement>);
// <htmlElement>.insertAdjacentHTML("beforeEnd", "<htmlString>");
From jQuery
$(<htmlElement>).clone();
to Vanilla JS
<htmlElement>.cloneNode(true);
From jQuery
var $a = $(<selectorToFirstHtmlElement>).find(<selectorToSecondHtmlElement>);
$b = $(<selectorToSecondHtmlElement>);
$a.is($b);
to Vanilla JS
var temp = document.getElementsByTagName(<selectorToFirstHtmlElement>)[0],
a = temp.getElementsByTagName(<selectorToSecondHtmlElement>)[0],
b = document.querySelector(<selectorToSecondHtmlElement>);
(a === b);
From jQuery
$.contains($(<htmlElement>), $(<childHtmlElement>));
to Vanilla JS
(<htmlElement> !== <childHtmlElement>) && <htmlElement>.contains(<childHtmlElement>);
From jQuery
$(<<tagString>>);
to Vanilla JS
document.createElement(<tagString>);
From jQuery
$(<htmlElement>).empty();
to Vanilla JS
<htmlElement>.innerHTML = "";
From jQuery
$(<htmlElement>).html();
to Vanilla JS
<htmlElement>.innerHTML;
From jQuery
$("<div>").append($(<htmlElement>).clone()).html();
to Vanilla JS
<htmlElement>.outerHTML;
From jQuery
$(<htmlElement>).text();
to Vanilla JS
<htmlElement>.textContent;
From jQuery
$(<htmlElement>).index();
to Vanilla JS
[].slice.call(<htmlElement>.parentNode.children).indexOf(<htmlElement>);
From jQuery
$(<htmlElement>).after($(<afterHtmlElement>));
// $(<htmlElement>).after(<htmlString>);
to Vanilla JS
<htmlElement>.parentNode.insertBefore(<afterHtmlElement>, <htmlElement>.nextSibling);
// <htmlElement>.insertAdjacentHTML("afterend", <htmlString>);
From jQuery
$(<htmlElement>).before($(<beforeHtmlElement>));
// $(<htmlElement>).before(<htmlString>);
to Vanilla JS
<htmlElement>.parentNode.insertBefore(<beforeHtmlElement>, <htmlElement>);
// <htmlElement>.insertAdjacentHTML("beforebegin", <htmlString>);
From jQuery
$(<htmlElement>).prepend($(<prependHtmlElement>));
// $(<htmlElement>).prepend(<htmlString>);
to Vanilla JS
<htmlElement>.insertBefore(<prependHtmlElement>, <htmlElement>.firstChild);
// <htmlElement>.insertAdjacentHTML("afterBegin", "<htmlString>");
From jQuery
$(<htmlElement>).remove();
to Vanilla JS
<htmlElement>.parentNode.removeChild(<htmlElement>);
From jQuery
$(<htmlElement>).empty();
to Vanilla JS
while (<htmlElement>.firstChild) {
<htmlElement>.removeChild(<htmlElement>.firstChild);
}
// <htmlElement>.innerHTML = '';
From jQuery
$(<htmlElement>).replaceWith($(<newHtmlElement>));
to Vanilla JS
<htmlElement>.parentNode.replaceChild(<newHtmlElement>, <htmlElement>);
From jQuery
$(<htmlElement>).html(<htmlString>);
to Vanilla JS
<htmlElement>.innerHTML = <htmlString>;
From jQuery
$(<htmlElement>).replaceWith(<htmlString>);
to Vanilla JS
<htmlElement>.outerHTML = <htmlString>;
From jQuery
$(<htmlElement>).text(<string>);
to Vanilla JS
<htmlElement>.textContent = <string>;
From jQuery
$(<htmlElement>).unwrap();
to Vanilla JS
while (<htmlElement>.firstChild) {
<unwrapHtmlElement>.insertBefore(<htmlElement>.firstChild, <htmlElement>);
}
<unwrapHtmlElement>.removeChild(<htmlElement>);
From jQuery
$(<htmlElement>).wrap($(<wrapHtmlElement>));
to Vanilla JS
<htmlElement>.parentNode.insertBefore(<wrapHtmlElement>, <htmlElement>);
<wrapHtmlElement>.appendChild(<htmlElement>);
From jQuery
$(<htmlElement>).nextAll();
to Vanilla JS
var nextAll = false;
nextAll = [].filter.call(<htmlElement>.parentNode.children, function (htmlElement) {
return (htmlElement.previousElementSibling === <htmlElement>) ? nextAll = true : nextAll;
});
From jQuery
var parents = $(<htmlElement>).parents();
to Vanilla JS
var htmlElement = <htmlElement>,
parents = [];
while (htmlElement = htmlElement.parentNode) {
parents.push(htmlElement);
}
parents;
From jQuery
$(<htmlElement>).prevAll();
to Vanilla JS
var prevAll = true;
prevAll = [].filter.call(<htmlElement>.parentNode.children, function (htmlElement) {
return (htmlElement === <htmlElement>) ? prevAll = false : prevAll;
});
From jQuery
$(<htmlElement>).children();
to Vanilla JS
<htmlElement>.children;
From jQuery
$(<htmlElement>).closest(<parentSelector>);
to Vanilla JS
var htmlElement = <htmlElement>,
parents = [];
while (htmlElement = htmlElement.parentNode) {
(htmlElement.matches && htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : "";
}
parents[0];
// <htmlElement>.closest(<parentSelector>); // More fast but not supported by IE/EDGE
From jQuery
$(<htmlElement>).find(<childrenSelector>);
to Vanilla JS
<htmlElement>.querySelectorAll(<childrenSelector>);
From jQuery
$(<htmlElement>).children().first();
to Vanilla JS
<htmlElement>.firstChild();
From jQuery
$(<htmlElement>).children().last();
to Vanilla JS
<htmlElement>.lastChild();
From jQuery
$(<htmlElement>).is(<selector>);
to Vanilla JS
<htmlElement>.matches(<selector>);
From jQuery
$(<htmlElement>).next();
to Vanilla JS
<htmlElement>.nextElementSibling; // HTMLElement
// <htmlElement>.nextSibling; // Node
From jQuery
$(<htmlElement>).nextUntil(<nextSelector>);
to Vanilla JS
var htmlElement = <htmlElement>,
nextUntil = [],
until = true;
while (htmlElement = htmlElement.nextElementSibling) {
(until && htmlElement && !htmlElement.matches(<nextSelector>)) ? nextUntil.push(htmlElement) : until = false;
}
nextUntil;
From jQuery
$(<htmlElement>).parent();
to Vanilla JS
<htmlElement>.parentNode;
From jQuery
var parents = $(<htmlElement>).parents(<parentSelector>);
to Vanilla JS
var htmlElement = <htmlElement>,
parents = [];
while (htmlElement = htmlElement.parentNode) {
(htmlElement.matches && htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : "";
/* // More fast alternative but not supported by IE/Edge
while (htmlElement = htmlElement.parentNode.closest(<parentSelector>)) {
parents.push(htmlElement); */
}
parents;
From jQuery
var parents = $(<htmlElement>).parentsUntil(<parentSelector>);
to Vanilla JS
var htmlElement = <htmlElement>,
parentsUntil = [],
until = true;
while (htmlElement = htmlElement.parentNode) {
(until && htmlElement.matches && !htmlElement.matches(<parentSelector>)) ? parents.push(htmlElement) : until = false;
/* // More fast alternative but not supported by IE/Edge
while (htmlElement = htmlElement.parentNode.closest(<parentSelector>)) {
(until) ? parents.push(htmlElement) : until = false; */
}
parentsUntil;
From jQuery
$(<htmlElement>).prev();
to Vanilla JS
<htmlElement>.previousElementSibling; // HTMLElement
// <htmlElement>.previousSibling // Node;
From jQuery
$(<htmlElement>).prevUntil(<previousSelector>);
to Vanilla JS
var htmlElement = <htmlElement>,
previousUntil = [],
until = true;
while (htmlElement = htmlElement.previousElementSibling) {
(until && htmlElement && !htmlElement.matches(<previousSelector>)) ? previousUntil.push(htmlElement) : until = false;
}
previousUntil;
From jQuery
$(<htmlElement>).siblings();
to Vanilla JS
[].filter.call(<htmlElement>.parentNode.children, function (htmlElement) {
return htmlElement !== <htmlElement>;
});
From jQuery
$(<htmlElement>).css(<property>);
to Vanilla JS
getComputedStyle(<htmlElement>)[<property>];
From jQuery
$(<htmlElement>).scrollLeft();
to Vanilla JS
<htmlElement>.scrollLeft;
From jQuery
$(<htmlElement>).scrollTop();
to Vanilla JS
<htmlElement>.scrollTop;
From jQuery
$(<htmlElement>).innerHeight();
to Vanilla JS
<htmlElement>.clientHeight
From jQuery
$(<htmlElement>).innerWidth();
to Vanilla JS
<htmlElement>.clientWidth
From jQuery
$(<htmlElement>).offset();
to Vanilla JS
var rect = <htmlElement>.getBoundingClientRect()
{
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}
From jQuery
$(<htmlElement>).position();
to Vanilla JS
{
left: <htmlElement>.offsetLeft,
top: <htmlElement>.offsetTop
}
From jQuery
$(<htmlElement>).offset();
to Vanilla JS
var rect = <htmlElement>.getBoundingClientRect()
{
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}
From jQuery
$(<htmlElement>).outerHeight();
to Vanilla JS
<htmlElement>.offsetHeight
From jQuery
$(<htmlElement>).outerWidth();
to Vanilla JS
<htmlElement>.offsetWidth
From jQuery
$(<htmlElement>).offsetParent();
to Vanilla JS
(<htmlElement>.offsetParent || <htmlElement>)
From jQuery
$(<htmlElement>).css(<property>, <value>);
to Vanilla JS
<htmlElement>.style.<property> = <value>;
From jQuery
$(<htmlElement>).scrollLeft(<distance>);
to Vanilla JS
<htmlElement>.scrollLeft = <distance>;
From jQuery
$(<htmlElement>).scrollTop(<distance>);
to Vanilla JS
<htmlElement>.scrollTop = <distance>;
From jQuery
$.each(<array>, function (i, item) {
(item === <array>[i]); // true
});
to Vanilla JS
<array>.forEach(function (item, i) {
(item === <array>[i]); // true
});
From jQuery
$.proxy(<fn>, <context>);
to Vanilla JS
<fn>.bind(<context>);
From jQuery
<object> = $.extend(<extendingObject>, <object>);
to Vanilla JS
// <object> = Object.assign(<object>, <extendingObject>); // Deep extend but not supported by IE
Object.keys(<object>).forEach(function (key) {
<object>[key] = (<extendingObject>[key]) ? <extendingObject>[key] : <object>[key];
});
<object>;
From jQuery
$.inArray(<item>, <array>);
to Vanilla JS
<array>.indexOf(<item>);
From jQuery
$.isArray(<array>);
to Vanilla JS
Array.isArray(<array>);
From jQuery
$.map(<array>, function (item, i) {
return <operations>;
});
to Vanilla JS
<array>.map(function (item, i) {
return <operations>;
});
From jQuery
$.now();
to Vanilla JS
Date.now();
From jQuery
$.parseHTML(<htmlString>);
to Vanilla JS
function parseHTML(htmlString) {
var body = document.implementation.createHTMLDocument().body;
body.innerHTML = htmlString;
return body.childNodes;
}
parseHTML(<htmlString>);
From jQuery
$.parseJSON(<jsonString>);
to Vanilla JS
JSON.parse(<jsonString>);
From jQuery
$.parseXML(<xmlString>);
to Vanilla JS
function parseXML(xmlString) {
return (new DOMParser()).parseFromString(xmlString, "text/xml");
}
parseXML(<xmlString>);
From jQuery
$.serializeArray(<form>);
to Vanilla JS
function serializeArray(form) {
var field, length, output = [];
if (typeof form === "object" && form.nodeName === "FORM") {
var length = form.elements.length;
for (i = 0; i < length; i++) {
field = form.elements[i];
if (field.name && !field.disabled && field.type !== "file" && field.type != "reset" && field.type != "submit" && field.type != "button") {
if (field.type === "select-multiple") {
length = form.elements[i].options.length;
for (j = 0; j < length; j++) {
if(field.options[j].selected)
output[output.length] = { name: field.name, value: field.options[j].value };
}
} else if ((field.type !== "checkbox" && field.type !== "radio") || field.checked) {
output[output.length] = { name: field.name, value: field.value };
}
}
}
}
return output;
}
serializeArray(<form>);
From jQuery
$.serialize(<form>);
to Vanilla JS
function serialize(form) {
var field, length, output = [];
if (typeof form === "object" && form.nodeName === "FORM") {
var length = form.elements.length;
for (var i = 0; i < length; i++) {
field = form.elements[i];
if (field.name && !field.disabled && field.type !== "file" && field.type !== "reset" && field.type !== "submit" && field.type !== 'button') {
if (field.type === "select-multiple") {
length = form.elements[i].options.length;
for (var j=0; j < length; j++) {
if (field.options[j].selected) {
output[output.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.options[j].value);
}
}
} else if ((field.type !== "checkbox" && field.type !== "radio") || field.checked) {
output[output.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value);
}
}
}
}
return output.join("&").replace(/%20/g, "+");
}
serialize(<form>);
From jQuery
$.trim(<string>);
to Vanilla JS
<string>.trim();
FAQs
Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications.
We found that vanilla-js-dom demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.