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

This article mainly explains "What is JavaScript's selector". The explanation in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian slowly and deeply to study and learn "What is JavaScript's selector" together!

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

Operating environment of this tutorial: Windows 7 system, Javascript version 1.8.5, Dell G3 computer.

What are JavaScript selectors?

JavaScript selectors commonly used are getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector(), querySelectorAll().

1、document.querySelector()

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

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

document.querySelector("#demo");

(2) Get the first p element in the document

document.querySelector("p");

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

document.querySelector(".example");

(4) Get the first p element of class="example" in the document:

document.querySelector("p.example");

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

document.querySelector("a[target]");

(6) When there are multiple selectors

document.querySelectorAll('.ynqc')

2、document.getElementById()

This method will return a node object corresponding to its id attribute, which is a function specific to document object and can only be invoked through it, using the method under:document.getElementById ('idName ');

3、getElementsByTagName()

This method returns an array of objects (htmlCollection to be precise), the order of the elements returned is their order in the document, the string passed to getElementsByTagName() method can be case-insensitive, using the following methods:document.getElementsByTagName(tagName);

4、getElementsByClassName()

This method takes the element with the specified class name and returns the collection of all elements of the specified class name in the document as a NodeList object. The NodeList object represents an ordered list of nodes. NodeList object We can access the nodes in the list by the node index number in the node list (index number starts with 0), so sometimes we need to specify subscripts when using it, using the following method: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 name attribute of the element instead of the id attribute.

Also, because the name attribute may not be unique within a document (e.g., radio buttons in HTML forms often have the same name attribute), all getElementsByName() methods return an array of elements, not an element.

6、document.querySelectorAll()

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

NodeList objects represent collections of nodes. It can be accessed via an index, which starts at 0.

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

Thank you for reading, the above is "JavaScript selector is what" content, after the study of this article, I believe we have a deeper understanding of JavaScript selector is what this problem, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

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.