Home > Article > Web Front-end > Basic usage of js querySelector() (graphic tutorial)

Basic usage of js querySelector() (graphic tutorial)

亚连Original: 2018-05-19 14:08:063310browse

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

querySelector Definition and Usage

querySelector() method returns the elements in the document that match the specified CSS selector an element.
Note: The querySelector() method only returns the first element matching the specified selector. If you need to return all elements, use the querySelectorAll() method instead.

Browser support

The number in the table indicates the version number of the first browser that supports this method.

Syntaxdocument.querySelector(CSS selectors)

Parameter value

Parameter
##CSS Selector String Required. CSS selector that specifies one or more matching elements. Elements can be selected using their id, class, type, attribute, attribute value, etc. For multiple selectors, separate them with commas and return a matching element.

Technical details

##DOM version: Selectors Level 1 Document Object

Return value: Matches the specified CSS selection The first element of the container. If not found, returns null. If an illegal selector is specified, a SYNTAX_ERR exception is thrown.

Example:

Get the first element with id="demo" in the document:

<p id="demo">id="demo" 的 p 元素</p>
<p id="demo">id="demo" 的 p 元素</p>
<p> 点击按钮修改过第一个 id="demo" 的 p元素内容</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
 document.querySelector("#demo").innerHTML = "Hello World!";
}
</script>

More examples

1. Get the first e388a4556c0f65e1904146cc1a846bee element in the document:

<p>这是一个 p 与元素。</p>
<p>这也是一个 p 与元素。</p>
<p>点击按钮修改文档中第一个 p 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
 document.querySelector("p").style.backgroundColor = "red";
}
</script>

2. Get the first element with class="example" in the document:

<h2 class="example">class="example" 的标题</h2>
<p class="example"> class="example" 的段落。</p> 
<p>点击按钮为第一个 class="example" 的元素添加背景颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
 document.querySelector(".example").style.backgroundColor = "red";
}
</script>

3. Get the class in the document The first e388a4556c0f65e1904146cc1a846bee element of ="example":

<h2 class="example">class="example" 的标题</h2>
<p class="example">class="example" 的段落。</p> 
<p>点击按钮为第一个带有 class="example" 的 p 元素添加背景颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
 document.querySelector("p.example").style.backgroundColor = "red";
}
</script>

4. Get the first 3499910bf9dac5ae3c52d5ede7383485 element with the "target" attribute in the document:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style>
a[target] {
 background-color: yellow;
}
</style>
</head>
<body>

<p> CSS 选择器 a[target] 确保所有有 target 属性的链接背景颜色为黄色：</p>
<a href="//www.jb51.net">jb51.net</a>
<a href="//www.disney.com" target="_blank">disney.com</a>
<a href="//www.wikipedia.org" target="_top">wikipedia.org</a>
<p>点击按钮为带有 target 属性的链接添加红色背景。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
 document.querySelector("a[target]").style.border = "10px solid red";
}
</script>
</body>
</html>

5. The following example demonstrates the use of multiple selectors.

Suppose you select two selectors: c1a436a314ed609750bd7c7d319db4da and 684271ed9684bde649abda8831d4d355 elements.

The following code will add a background color to the first c1a436a314ed609750bd7c7d319db4da element in the document:

<h2> h2 元素</h2>
<h3> h3 元素</h3>
<script>
document.querySelector("h2,h3").style.backgroundColor = "red";
</script>

6. However, if the 684271ed9684bde649abda8831d4d355 element is before the c1a436a314ed609750bd7c7d319db4da element in the document, 654c27e85740a822034a7c9e7ad2d7cb element will be set to the specified background color.

<h3> h3 元素</h3>
<h2> h2 元素</h2>
<script>
document.querySelector("h2, h3").style.backgroundColor = "red";
</script>

7. Realize URL jump by getting the selected content

<select id="language-picker">
<option value="cs">Česky</option>
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="jp">日本語</option>
<option value="pl">Polski</option>
<option value="pt">Português</option>
<option value="zh" selected>中国的</option>
</select>
<script>
 var lang = document.querySelector(&#39;#language-picker&#39;);
 lang.addEventListener(&#39;change&#39;, function(e) {
 if (e.target.value === &#39;en&#39;) {
  window.location = &#39;/&#39;;
 } else {
  window.location = &#39;/&#39; + e.target.value;
 }
 });
</script>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Loading jquery in JS.

Detailed method explanation##JS synchronization, Summary of asynchronous and lazy loading implementation

Detailed explanation of JS's method of generating random numbers and random sequences in a specified range

The above is the detailed content of Basic usage of js querySelector() (graphic tutorial). 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

Previous article：Detailed introduction to the native and powerful DOM selector querySelector (code attached)Next article：Detailed introduction to the native and powerful DOM selector querySelector (code attached)

See more

Basic usage of js querySelector() (graphic tutorial)

Parameter value

Related articles