Basic usage of js querySelector() (graphic tutorial)-JS Tutorial-php.cn

Basic usage of js querySelector() (graphic tutorial)

亚连

Release： 2018-05-19 14:08:06

Original

3344 people have browsed it

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>

Copy after login

More examples

1. Get the first

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>

Copy after login

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>

Copy after login

3. Get the class in the document The first

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>

Copy after login

4. Get the first 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>

Copy after login

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

Suppose you select two selectors:

and

elements.
The following code will add a background color to the first

element in the document:

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

Copy after login

6. However, if the

element is before the

element in the document, < The h3> element will be set to the specified background color.

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

Copy after login

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>

Copy after login

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!