This article mainly introduces the distinction details of native JS and JQ acquisition elements. The text is very detailed in the paper. It has a certain reference value for everyone’s learning or work. Friends needed can be referred to
Soon after JQ, sometimes JS and JQ can get the elements of JS and JQ to make mistakes. Next, get the property method what is unpacking, and now gets the two acquisition elements.
1. Native JS acquisition element.
1. Generally used three ways to acquire element objects (encapsulate specified elements into DOM objects):
(1) acquisition by element ID: Document.getElementByid (), example below:
We have output in the console, as follows:
We can see the element we get the ID Div1 Code
(2) Get: Document.getElementsByTagName (), which is returned in the form of an array, with specific examples:
control The output is as follows:
Is there a LI in the two ULs and displayed in the form of an array; then if we want to get the specified LI, such as I will How to do only the first UL’s li?
This will be combined to the way we just acquire the element. Specific examples are as follows:
The console output is as follows:
In this way, we get LI under the first UL without including the second UL’s Li
(3) acquired by element class name: Document.GetElementByClassName (); It is also an array of arrays, examples:
The elements called SP We have obtained
II .jq acquire element.
1.jq gets the code syntax of the element is more concise than the native JS, and the code in the above native JS gets the element. We found that the code is relatively long;
now JQ provides a factory function: $ () We can create JQ instance objects (JQ objects) through “$ (parameter)”;
JQ provides a lot of selectors for us to get elements, here is common three selectors
(1) ID selector (return an element)
It can be seen that the DIV1 is packaged into a JQ object.
(2) Class selector (returned is a collection), according to the class name matching element;
( 3) Element selector (return is a collection), match the element according to the element name;
OK, JS and JQ acquire the element Difference to this
If there is a wrong place, I hope everyone pointed out!
The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.