Home > Web Front-end > Front-end Q&A > What does javascript selector mean?

What does javascript selector mean?

WBOY
Release: 2022-03-02 16:25:56
Original
3487 people have browsed it

In JavaScript, the selector is a method used to obtain HTML page elements. You can save the page elements into an object and perWhat does javascript selector mean? corresponding operations on the attribute values ​​​​of this object, such as "getElementById()", "getElementsByName()" etc.

What does javascript selector mean?

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What does javascript selector mean?

JS selector is mainly used to obtain the elements in the HTML page, save the elements in the page to an object, and then modify the properties of these objects. PerWhat does javascript selector mean? corresponding operations on the values ​​to achieve some dynamic effects to make the page vivid and easy to use. One thing to note is that the operation must be an object. It is not possible to use elements directly as objects.

The JS selector directly operates the attributes of the element corresponding to the object, so the value of the style it changes directly changes the interline style. The priority is much higher than the CSS style, so when using it, you should pay attention to the Complete CSS styling options.

There are mainly four types of native selectors in js

  1. document.getElementById()
  2. document.getElementsByClassName()
  3. document.getElementsByName()
  4. document.getElementsByTagName()

Next I will briefly introduce the basic usage of several selectors

1.document.getElementById()
Id selector
Get the object through the Id attribute
HTML part

	<p>这是一个p标签</p>
Copy after login

JS part

	var d1 = document.getElementById("p1")
Copy after login

As shown in the picture Obtained content:
What does javascript selector mean?
In this way, an Element object can be obtained from HTML and can be operated on.

2.document.getElementsByClassName()
ClassName selector
Get the object through the ClassName attribute
HTML part

	<p>这是一个p标签</p>
    

这是一个p标签

    这是一个a标签     这是一个span标签
Copy after login

JS part

	var c1 = document.getElementsByClassName("c1")
Copy after login

As shown in the figure The obtained content:
What does javascript selector mean?
The class name selector obtains the HTMLCollection object, which is an object similar to an array. If you need to select a specific Element object, you need to do something similar to The operation of taking the array elements is as follows (taking the first item as an example):

 	var c1 =  document.getElementsByClassName("p1")[0]
Copy after login

In this way, you can get a specific Element object, as shown in the figure:
What does javascript selector mean?
Like this You can perWhat does javascript selector mean? specific operations on this Element object

3.document.getElementsByTagName()
TagName selector
Get the object through the element name
HTML part

	
Copy after login
            
  • 0
  •         
  • 1
  •         
  • 2
  •         
  • 3
  •         
  • 4
  •     

JS Part of

	var li = document.getElementsByTagName("li")
Copy after login

is shown in the figure:
What does javascript selector mean?
The content obtained by the TagName selector is the same as the ClassName selector, which is an HTMLCollection object. Therefore, if you need to select a specific An Element object also needs to perWhat does javascript selector mean? operations similar to fetching array elements, as follows (taking the first item as an example):

	var li = document.getElementsByTagName("li")[0]
Copy after login

In this way, a specific Element object can be obtained, as shown in the figure:
获取到What does javascript selector mean?

4.document.getElementsByName()
Name selector
Get the object through the Name attribute
HTML part

	<what does javascript selector mean>
        <input>1
        <input>2
        <input>3
    </what>does javascript selector mean?>
Copy after login

JS part

	 var What does javascript selector mean? = document.getElementsByName('xx')
Copy after login

The picture shows the obtained content:
What does javascript selector mean?
Name selector is mainly used to obtain tags that require the name attribute such as What does javascript selector mean? tags. What is obtained is a NodeList object. This type of object is the same as HTMLCollection The objects are similar, and the specific object operations to be obtained are also similar to arrays, as follows:

	var What does javascript selector mean? = document.getElementsByName("xx")[0]
Copy after login

What does javascript selector mean?
When the subscript is 0, take the first item

	var What does javascript selector mean? = document.getElementsByName('xx')[1]
Copy after login

What does javascript selector mean?
When the subscript is 1, take the second item

Related recommendations: javascript learning tutorial

The above is the detailed content of What does javascript selector mean?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template