Home  >  Article  >  Web Front-end  >  Does javascript have selectors?

Does javascript have selectors?

青灯夜游
青灯夜游Original
2022-02-21 17:52:271808browse

Javascript has selectors. Commonly used js selectors include: getElementById(), getElementsByName(), getElementsByTagName(), querySelector(), querySelectorAll(), etc.

Does javascript have selectors?

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:

##document.anchorsReturns all files with The name attribute of the 3499910bf9dac5ae3c52d5ede7383485 element document.applets returns all 082dedeb30a00d0e6e2cdb74a392fac3 elements document.baseURIReturns the absolute base URI of the documentdocument.bodyReturnsdocument.cookieReturns the cookie of the documentdocument.doctypeReturn the document type of the documentdocument.documentElementReturn the 100db36a723c770d327fc0aef2ce13b1 elementdocument.documentModeReturns the mode used by the browserdocument.documentURIReturns the URI of the documentdocument. domainReturns the domain name of the document serverdocument.domConfigdocument.embedsReturn all d8e2720730be5ddc9c2a3782839e8eb6 elementsdocument.formsReturn all ff9c23ada1bcecdd1a0fb5d5a0f18437 Elementdocument.headReturn93f0f5c25f18dab9d176bd4f6de5d30eElementdocument.imagesReturn All a1f02c36ba31691bcfe87b2722de723b elementsdocument.implementationReturns DOM implementationdocument.inputEncodingReturn the encoding (character set) of the document document.lastModifiedReturn the date and time the document was updateddocument .linksReturns all 03fc64e1e502d5ba947b3a9af06d2d2a and 3499910bf9dac5ae3c52d5ede7383485 elements with href attributesdocument.readyStateReturns the (loading) of the document Medium) Statusdocument.referrerReturns the URI of the referrer (linked document)document.scriptsReturns all 3f1c4e4b6b16bbbd69b2ee476dc4f83a elementsdocument.strictErrorCheckingReturns whether error checking is enforced document.titleReturns the b2386ffb911b14667cb8f0f91ea547a7 elementdocument.URLReturns the complete URL of the document
Properties Description
(deprecated in HTML5)
Element
is obsolete; Returns the DOM configuration
[Related recommendations:

javascript learning tutorial]

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

Statement:
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