Home > Article > Web Front-end > Does javascript have selectors?
Javascript has selectors. Commonly used js selectors include: getElementById(), getElementsByName(), getElementsByTagName(), querySelector(), querySelectorAll(), etc.
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
javascript has selectors.
JavaScript is most commonly used to obtain or modify the content or value of HTML elements and to apply certain effects.
To do this, you must first find the element. The javascript selector is used to match elements. The search method:
Find HTML elements by ID
Find HTML elements by tag name
Find HTML elements by class name
Find HTML elements by CSS selectors
By HTML Object collection to find HTML elements
Commonly used js selectors are: getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector(), querySelectorAll().
Find HTML elements by ID
You can use the getElementById() method to select elements based on their unique ID.
This is the easiest way to find HTML elements in the DOM tree.
The following example selects an element with the ID attribute id="msg":
var x = document.getElementById("msg");
If the element is found, the method will return the element as an object.
If the element is not found, myElement will contain null.
Find HTML elements by tag name
You can also select HTML elements by tag name using the getElementsByTagName() method.
This method returns an array-like list of all elements in the document with the specified tag name.
Example: Select all e388a4556c0f65e1904146cc1a846bee elements:
var x = document.getElementsByTagName("p");
Find HTML elements by class name
You can select using the getElementsByClassName() method All elements with a specific class name.
This method returns an array-like list of all elements in the document with the specified class name.
This example returns a list of all elements with class="demo":
var x = document.getElementsByClassName("demo");
Finding HTML elements via CSS selectors
You can Use the querySelectorAll() method to select elements (ID, class, type, etc.) that match a specified CSS selector.
This method returns an array-like list of all elements that match the specified selector.
CSS selectors provide a very powerful and effective way to select HTML elements in a document.
var x = document.querySelectorAll("div");
Finding HTML elements through a collection of HTML objects
The top-most element in an HTML document can be directly used as a document attribute.
For example, the 100db36a723c770d327fc0aef2ce13b1 element can be accessed using the attribute document.documentElement.
The element can be accessed with the document.body property.
var html = document.documentElement; var body = document.body;
Note: If document.body is used before a tag (e.g., inside a 93f0f5c25f18dab9d176bd4f6de5d30e), it will return null instead of the body element.
The following HTML objects (and object collections) can also be accessed:
Properties | Description |
---|---|
Returns all files with The name attribute of the 3499910bf9dac5ae3c52d5ede7383485 element | |
returns all 082dedeb30a00d0e6e2cdb74a392fac3 elements | (deprecated in HTML5) |
Returns the absolute base URI of the document | |
Returns | Element |
Returns the cookie of the document | |
Return the document type of the document | |
Return the 100db36a723c770d327fc0aef2ce13b1 element | |
Returns the mode used by the browser | |
Returns the URI of the document | |
Returns the domain name of the document server | |
is obsolete; Returns the DOM configuration | |
Return all d8e2720730be5ddc9c2a3782839e8eb6 elements | |
Return all ff9c23ada1bcecdd1a0fb5d5a0f18437 Element | |
Return93f0f5c25f18dab9d176bd4f6de5d30eElement | |
Return All a1f02c36ba31691bcfe87b2722de723b elements | |
Returns DOM implementation | |
Return the encoding (character set) of the document | |
Return the date and time the document was updated | |
Returns all 03fc64e1e502d5ba947b3a9af06d2d2a and 3499910bf9dac5ae3c52d5ede7383485 elements with href attributes | |
Returns the (loading) of the document Medium) Status | |
Returns the URI of the referrer (linked document) | |
Returns all 3f1c4e4b6b16bbbd69b2ee476dc4f83a elements | |
Returns whether error checking is enforced | |
Returns the b2386ffb911b14667cb8f0f91ea547a7 element | |
Returns the complete URL of the document |
The above is the detailed content of Does javascript have selectors?. For more information, please follow other related articles on the PHP Chinese website!