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
- autoloadoriginal
- 2021-04-07 15:09:211685parcourir
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('.list .item');
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!