Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you what javascript selectors have and how to use the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

In JavaScript, a selector is a method for getting HTML page elements. You can save the page elements to an object and manipulate the attribute values of that object accordingly, such as "getElementById ()", "getElementsByName ()", and so on.

The operating environment of this tutorial: windows10 system, javascript1.8.5 version, Dell G3 computer.

What does javascript selector mean?

JS selector is mainly used to get the elements in the HTML page, save the elements in the page to an object, and then operate the attribute values of these objects to achieve some dynamic effects, so as to achieve the vividness and ease of use of the page. It is important to note that the operation must be an object, and it is not possible to use the element as an object directly.

The JS selector manipulates the attributes of the corresponding elements of the object directly, so the value of the changed style directly changes the interline style, and the priority is much higher than the CSS style, so you should pay attention to the trade-off with the completed CSS style when you use it.

There are four main types of native selectors in js

Document.getElementById ()

Document.getElementsByClassName ()

Document.getElementsByName ()

Document.getElementsByTagName ()

Next, I will briefly introduce the basic usage of several selectors.

1.document.getElementById ()

Id selector

Get the object through the Id property

HTML part

This is a p tag.

JS part

Var D1 = document.getElementById ("p1")

As shown in the figure, the obtained content:

This allows you to get an Element object from HTML and manipulate it.

2.document.getElementsByClassName ()

ClassName selector

Get the object through the ClassName property

HTML part

This is a p tag.

This is a p tag.

This is an a tag. This is a span tag.

JS part

Var C1 = document.getElementsByClassName ("C1")

As shown in the figure, the obtained content:

The class name selector gets the HTMLCollection object, which is similar to an array. If you need to select a specific Element object, you need to do something similar to fetching array elements, as follows (take the first item as an example):

Var C1 = document.getElementsByClassName ("p1") [0]

In this way, you can get one of the specific Element objects, as shown in the figure:

This allows you to perform specific operations on this Element object

3.document.getElementsByTagName ()

TagName selector

Get the object through the element name

HTML part

0 1 2 3 4

JS part

Var li = document.getElementsByTagName ("li")

As shown in the figure, the obtained content:

The content obtained by the TagName selector is the same as the ClassName selector, which is a HTMLCollection object, so if you need to select a specific Element object, you need to do something similar to fetching array elements, as follows (take the first item as an example):

Var li = document.getElementsByTagName ("li") [0]

In this way, you can get one of the specific Element objects, as shown in the figure:

4.document.getElementsByName ()

Name selector

Get the object through the Name property

HTML part

1 2 3

JS part

Var form = document.getElementsByName ('xx')

As shown in the figure, the obtained content:

Name selector is mainly used to obtain tags that require name attributes, such as form tags, to obtain NodeList objects, which are similar to HTMLCollection objects, and the specific object operations to be obtained are also similar to arrays, as shown below:

Var form = document.getElementsByName ("xx") [0]

Take the first item when the subscript is 0

Var form = document.getElementsByName ('xx') [1]

Take the second item when the subscript is 1

These are all the contents of this article entitled "what are the selectors of javascript and how to use them?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.