The use of native JS, including jquery and native JS acquisition node, jquery and native JS modified properties Comparison

First, preface

Compared to JS this direct end, full of thorny path, jquery is undoubtedly a broad road, enough concise, easy-to-use gave it a glorious position. However, after all, is a plug-in around the road, when the path to walk to become a road, the road has lost his own advantage.

Native JS is not as good as jquery, convenient, or not so easy for us to use as jquery, or even a dependency that cannot be discarded. But we still have to throw away the hand that accompanies us for many years crutches, we are not lame, we have not decayed, we can also move forward independently.

Second, the body 1. Comparison of jquery and native JS acquisition nodes

// This is the HTML code that provides the node for getting <div id= "divID" class= "Divclass" >    <input type= "text" Name= "nickname" Placeholder= "Please enter user name" >    <input type= "password" name= "pwd" placeholder= "Please enter your password" ></div>

// jquery gets the node via $/jquery, which is the CSS selector $ ("#divId")$ (". Divclass")$("Input[name= ' nickname ')")

// native JS, get node document.getElementById ("divID") via ID and Classname,tagname,name Document.getelementsbyclassname ("Divclass") document.getelementsbytagname ("div") Document.getelementsbyname ("nickname")// This item must have a Name property on the node itself to get

IE8 also has a node that gets through the CSS selector.
Document.queryselector ("#divId input")
Document.queryselectorall ("div")

A few notes and notes:

• Note that the "Element" in getElementById does not have a complex number, since the node obtained through the ID is unique only if the ID is unique, so there is no plural
• The "Element" that gets the node by classname, TagName, and name has a complex number relative to its ID, which means that the obtained node is stored in the array, whether unique or not, so the array's subscript must be used when using the Node object. Example: Document.getelementsbyclassname ("Divclass") [0]
• Document.queryselector ("div") is also a CSS selector to get a node, similar to jquery, but when the conditions are met with multiple nodes, only the first one;
• Document.queryselectorall ("div") can get a collection of nodes that satisfy the condition, whether or not it is a node collection (NodeList);
• The $ ("div") is able to get all the nodes that satisfy the condition, and the Document.queryselectorall ("div") must use subscript without using the array subscript to manipulate all the satisfied node objects.
• The performance of getElementById is better compared to using document.queryselector, so using the latter can improve performance when selecting nodes is relatively straightforward (finding nodes faster).

2. Use comparison of jquery and native JS node objects

//jquery Add and remove classname$ (selector). addclass ("Active"); $ (selector) Removeclass ("Active");//Native JS Add and remove classname//to add a class to the <div> element:document.getElementById ("Mydiv"). Classlist.add ("MyStyle"));//to add multiple classes for the <div> element:document.getElementById ("Mydiv"). Classlist.add ("MyStyle", "Anotherclass", "Thirdclass");//to remove a class for the <div> element:document.getElementById ("Mydiv"). Classlist.remove ("MyStyle"));//to remove multiple classes for the <div> element:document.getElementById ("Mydiv"). Classlist.remove ("MyStyle", "Anotherclass", "Thirdclass");//Check if a CSS class is includedMyDiv.classList.contains (' Mycssclass ');//return True or False

Link: How to delete the class name and add class name in the tag with native JS?

 // jquery attr using Modify and Add properties  $ (selector) . attr ("name", "nickname"); //  $ (selector). attr ("name"); //  Gets the Name property value  //  Native JS Modify and get the property value  document.queryselector ("input[type= ' text ']"). SetAttribute (" Name "," Account ");d Ocument.queryselector (" input[type= ' text '] "). getattribute ("name"); 

// jquery modifies and gets CSS properties $ (selector). CSS ("display", "none"); // Add or set CSS to display$ (selector). CSS ("display"); // gets the value of the current play on the ground // native JS modifies and gets the CSS property value document.queryselector ("input[type= ' text ']"). style.backgroundcolor= "Red";; Document.queryselector ("input[type= ' text ']"). Style.backgroundcolor;

You can also modify the classname way to achieve the purpose of modifying CSS

Third, conclusion

Come here first, there are additions to continue.

The use of native JS, including jquery and native JS acquisition node, jquery and native JS modified properties Comparison