Utilisation de base de js querySelector() (tutoriel graphique)-js tutoriel-php.cn

Utilisation de base de js querySelector() (tutoriel graphique)

亚连

Libérer： 2018-05-19 14:08:06

original

3386 Les gens l'ont consulté

La méthode querySelector() renvoie uniquement le premier élément correspondant au sélecteur spécifié. Si vous devez renvoyer tous les éléments, veuillez utiliser la méthode querySelectorAll() au lieu de la

définition et utilisation de querySelector

la méthode querySelector() renvoie les éléments correspondant au CSS spécifié sélecteur dans le document un élément.
Remarque : La méthode querySelector() renvoie uniquement le premier élément correspondant au sélecteur spécifié. Si vous devez renvoyer tous les éléments, utilisez plutôt la méthode querySelectorAll().

Support du navigateur

Le numéro dans le tableau indique le numéro de version du premier navigateur qui prend en charge cette méthode.

Syntaxedocument.querySelector(Sélecteurs CSS)

Valeur du paramètre

Paramètre Description

Chaîne de sélection CSS requise. Sélecteur CSS qui spécifie un ou plusieurs éléments correspondants. Les éléments peuvent être sélectionnés en utilisant leur identifiant, classe, type, attribut, valeur d'attribut, etc. Pour plusieurs sélecteurs, séparez-les par des virgules et renvoyez un élément correspondant.

Détails techniques

Version DOM : Objet de document Sélecteurs niveau 1

Valeur de retour : Correspond au CSS spécifié sélection du premier élément du conteneur. S'il n'est pas trouvé, renvoie null. Si un sélecteur illégal est spécifié, une exception SYNTAX_ERR est levée.

Exemple :
Récupérez le premier élément avec id="demo" dans le 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>

Copier après la connexion

Plus d'exemples

1. Obtenez le premier élément

du document :

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

Copier après la connexion

2. Obtenez le premier élément avec class="example" dans le 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>

Copier après la connexion

3. . Récupérez le premier élément

avec class="example" dans le document :

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

Copier après la connexion

4. Récupérez le premier élément avec l'attribut "target" dans le 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>

Copier après la connexion

5. L'exemple suivant montre l'utilisation de plusieurs sélecteurs.

Supposons que vous sélectionniez deux éléments :

Le code suivant ajoutera une couleur d'arrière-plan au premier élément

du document :

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

Copier après la connexion

6. Cependant, si l'élément

dans le document, l'élément

sera défini sur la couleur d'arrière-plan spécifiée.

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

Copier après la connexion

7. Réalisez le saut d'URL en obtenant le contenu sélectionné

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

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :