Maison  >  Article  >  interface Web  >  Comment obtenir des éléments DOM à partir de HTML avec plus d'élégance

Comment obtenir des éléments DOM à partir de HTML avec plus d'élégance

autoload
autoloadoriginal
2021-04-07 15:09:211666parcourir

Comment obtenir des éléments DOM à partir de HTML avec plus délégance

Le JS dans DOM est une partie importante de l'apprentissage JavaScript La manière traditionnelle d'obtenir l'élément DOM est trop gênante. Comment peut-il être plus élégant. ? Comment obtenir des éléments de HTML ? Cet article vous montrera comment faire.

1. Utilisez la méthode querySelectorAll()

Retour Tous les éléments du document qui correspondent au sélecteur CSS spécifié

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
       <ul class="list">
           <li class="item">item1</li>
           <li class="item">item2</li>
           <li class="item">item3</li>
           <li class="item">item4</li>
           <li class="item">item5</li>
       </ul>

   <script>
       const items=document.querySelectorAll(".list .item");
       console.log(items);
   </script>
</body>
</html>

2. Utilisez la méthode querySelector()

pour renvoyer la sélection CSS qui correspond au sélecteur CSS spécifié Le premier élément de l'appareil

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
       <ul class="list">
           <li class="item">item1</li>
           <li class="item">item2</li>
           <li class="item">item3</li>
           <li class="item">item4</li>
           <li class="item">item5</li>
       </ul>

   <script>
         firstItem = document.querySelector(&#39;.list .item&#39;);
         firstItem.style.background ="yellow";
   </script>
</body>
</html>

Recommandé : "Questions et réponses de l'entretien js 2021 (grand résumé) "

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn