What selectors does JavaScript have?

JavaScript selectors include: getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector(), etc.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

What selectors are there in JavaScript

Commonly used JavaScript selectors include getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName() , querySelector(), querySelectorAll().

1. document.querySelector()

querySelector() method only returns the first element that matches the specified selector. If you need to return all elements, please use the querySelectorAll() method instead of

(1) Get the element with id="demo" in the document:

document.querySelector("#demo");

(2) Get the first element in the document Elements of p

document.querySelector(“p”);

(3) Get the first element with class="example" in the document

document.querySelector(".example");

(4) Get the first p with class="example" in the document Element:

document.querySelector(“p.example”);

(5) Get the first a element with the "target" attribute in the document:

document.querySelector(“a[target]”);

(6) When using multiple selectors

document.querySelectorAll(’.ynqc’)

2. document.getElementById()

This method will return a node object corresponding to the id attribute. It is a function unique to the document object. This method can only be called through it. Use the method Next: document.getElementById('idName');

3. getElementsByTagName()

This method returns an object array (to be precise, the htmlCollection collection), returns The order of elements is their order in the document. The string passed to the getElementsByTagName() method can be case-insensitive. The usage method is as follows: document.getElementsByTagName(tagName);

4. getElementsByClassName( )

This method is used to obtain the element with the specified class name. This method returns a collection of all elements with the specified class name in the document as a NodeList object. A NodeList object represents an ordered list of nodes. For the NodeList object, we can access the nodes in the list through the node index number in the node list (the index number starts from 0), so sometimes we need to specify the subscript when using it. The usage method is as follows: document.getElementsByClassName('className');

5. document.getElementsByName()

The getElementsByName() method returns a collection of objects with the specified name.

This method is similar to the getElementById() method, but it queries the element's name attribute instead of the id attribute.

In addition, because the name attribute in a document may not be unique (for example, radio buttons in HTML forms usually have the same name attribute), all getElementsByName() methods return an array of elements, not an element.

6. document.querySelectorAll()

querySelectorAll() method returns all elements in the document that match the specified CSS selector and returns a NodeList object.

NodeList object represents a collection of nodes. It can be accessed by index, starting from 0.

Tip: You can use the length property of the NodeList object to get the element properties that match the selector, and then you can iterate through all the elements to get the information you want.

[Recommended learning:javascript advanced tutorial]

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