


JavaScript method to get dom element querySelector() instead of getElementById()
The content of this article is about the JavaScript method of obtaining dom elements querySelector() instead of getElementById(). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Native js gets the dom element querySelector() instead of getElementById()
Instead of getElementById()
For a long time, in addition to jQuery's selector, I have been After using the following methods to obtain dom elements
document.getElementById()document.getElementsByClassName()document.getElementsByTagName()document.getElementsByName()
I later discovered the querySelector() method , this method is the same as jquery's method of getting elements. Filled in is the css selector.
For example, the following elements are the same:
// getElementById() 方式 document.getElementById('username'); // querySelector() 方式 document.querySelector('#username'); // jquery 方式 $('#username')[0] // 不理解这个可以百度 `jquery 与 dom 相互转换`
querySelector() There are two ways
querySelector( css选择器字符串 ) // 获取第一个匹配元素 querySelectorAll( css选择器字符串 ) // 获取所有匹配元素
The effect is as shown:
The way to obtain elements is very similar to jquery, but the elements obtained are different. jquery obtains jquery elements, while querySelector()
What is obtained is the dom object.
Example
For selectors, please refer to: http://www.w3school.com.cn/cs...
For example, now we need to get all classes to# Elements starting with ##text-, that is to say, containing elements such as
text-success,
text-danger,
text-warning, etc., just write like this :
document.querySelectorAll("[class^='text-']")
The above is the detailed content of JavaScript method to get dom element querySelector() instead of getElementById(). For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
