How to use native JavaScript instead of jquery to manipulate the DOM in the MUI Project

Reproduced in: http://www.bcty365.com/content-146-3661-1.html

The recent use of MUI to write pages, of course, in mobile apps to introduce JQ or zepto these frameworks, is certainly very irrational.
Native JS is very simple, why need JQ?
The success of JQ was due to the incompatibility of browsers such as IE6, 7, 8, 9, 10, Chrome, FF, the developers crashed, and the browser performance on the PC was good, cross-platform compatibility did not affect performance. However, JQ is not designed for mobile phones at all.
There is only WebKit browser on the phone (ignoring WP, anyway MUI does not support WP), there is no need for JQ this packaging framework to operate the DOM.
Select Element
Jq
$ ('. El ');
Js
Document.queryselector ("div");
Div.queryselectorall ('. El ');
Mui
MUI (". El") [0];
parent, sibling element
Jq
$ ('. El '). Parent ();
$ ('. El '). Prev ();
$ ('. El '). Next ();
$ ('. El '). Last ();
$ ('. El '). First ();
Js
Document.queryselector ('. El '). parentnode;
Document.queryselector ('. El '). previouselementsibling;
Document.queryselector ('. El '). nextelementsibling;
Document.queryselector (". El"). Lastelementchild;
Document.queryselector (". El"). Children[0];
Get element text
Jq
$ ('. El '). html ();
$ ('. El '). Val ();
$ ('. El '). Text ();
$ (EL). ReplaceWith (string);
Js
document.getElementById (' El '). InnerHTML;
document.getElementById (' El '). Value;
document.getElementById (' El '). textcontent
document.getElementById (' El '). outerhtml = string;
Creating Elements
Jq
var newel = $ (' <div/> ');
Js
var newel = document.createelement (' div ');
Set/get Property
Jq
$ ('. El '). Filter (': First '). attr (' key ', ' value ');
$ ('. El '). Filter (': First '). attr (' key ');
$ ('. El '). addclass (' class ');
$ ('. El '). Removeclass (' class ');
$ ('. El '). Toggleclass (' class ');
$ (EL). css (' border-width ', ' 20px ');
Js
Document.queryselector ('. El '). SetAttribute (' key ', ' value ');
Document.queryselector ('. El '). getattribute (' key ');
Document.queryselector ('. El '). Classlist.add (' class ');
Document.queryselector ('. El '). Classlist.remove (' class ');
Document.queryselector ('. El '). Classlist.toggle (' class ');
Document.queryselector ('. El '). Style.borderwidth = ' 20px ';
additional
Jq
$ ('. El '). Append ($ (' <div/> '));
Js
Document.queryselector ('. El '). AppendChild (document.createelement (' div '));
Cloning
Jq
var Clonedel = $ ('. El '). Clone ();
Js
var Clonedel = Document.queryselector ('. El '). CloneNode (True);
removed from
Jq
$ ('. El '). Remove ();
Js
var toremove = Document.queryselector (EL);
ToRemove.parentNode.removeChild (Toremove);
Ajax
Jq
$.get (' url ', function (data) {

});
$.post (' url ', {data:data}, function (data) {

});
Js
Get
var xhr = new XMLHttpRequest ();

Xhr.open (' GET ', url);
Xhr.onreadystatechange = function (data) {

}
Xhr.send ();

Post
var xhr = new XMLHttpRequest ()

Xhr.open (' POST ', url);
Xhr.onreadystatechange = function (data) {

}
Xhr.send ({data:data});
Show and Hide
Jq
$ (EL). Show ();
$ (EL). Hide ();
Js
El.style.display = ";
El.style.display = ' None ';
Does it contain a class
Jq
$ (EL). Hasclass (ClassName);
Js
if (el.classlist)
El.classList.contains (ClassName);
Else
New RegExp (' (^|) ' + ClassName + ' (|$) ', ' GI '). Test (El.classname);
Add Class
Jq
$ (EL). addclass (ClassName);
Js
if (el.classlist)
El.classList.add (ClassName);
Else
El.classname + = "+ className;
Remove Class
Jq
$ (EL). Removeclass (ClassName);
Js
Removeclass, takes, Params:element and classname
function Removeclass (el, CLS) {
var reg = new RegExp ("(\\s|^)" + CLS + "(\\s|$)");
El.classname = El.className.replace (Reg, ""). Replace (/(^\s*) | ( \s*$)/g, "");
}

If you only need to support a more modern browser like Ie10+,chrome,firefox,opera and Safari, then you can start using HTML5 's classlist feature, which makes adding and removing classes easier
El.classList.add (ClassName);
El.classList.remove ("foo")
El.classList.contains ("foo");
El.classList.toggle ("active");
inserting HTML
Jq
$ (EL). Before (htmlstring);
$ (parent). Append (EL);
$ (EL). After (htmlstring);
Js
el.insertadjacenthtml (' Beforebegin ', htmlstring);
Parent.appendchild (EL);
el.insertadjacenthtml (' Afterend ', htmlstring);
Get child nodes
Jq
$ (EL). Children ();
Js
El.children
Trim
Select all copy and put it in the notes//JQ
$.trim (string);
Js
String.Trim ();

How to use native JavaScript instead of jquery to manipulate the DOM in the MUI Project