Detailed explanation of native JS and JQ acquisition elements

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

原生JS与JQ获取元素的区别详解 (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?

原生JS与JQ获取元素的区别详解 This will be combined to the way we just acquire the element. Specific examples are as follows:

The console output is as follows:

原生JS与JQ获取元素的区别详解 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:


Console output:

原生JS与JQ获取元素的区别详解 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)”; 原生JS与JQ获取元素的区别详解

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; 原生JS与JQ获取元素的区别详解


( 3) Element selector (return is a collection), match the element according to the element name;

原生JS与JQ获取元素的区别详解 OK, JS and JQ acquire the element Difference to this

If there is a wrong place, I hope everyone pointed out! 原生JS与JQ获取元素的区别详解

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment