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
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 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
), 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 element | |
| returns all | |
| 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 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 | |
| Return all | |
| ReturnElement | |
| Return All | |
| Returns DOM implementation | |
| Return the encoding (character set) of the document | |
| Return the date and time the document was updated | |
| Returns all and elements with href attributes | |
| Returns the (loading) of the document Medium) Status | |
| Returns the URI of the referrer (linked document) | |
| Returns all |
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
