Maison > Article > interface Web > Analyse complète des sélecteurs js pour vous (tutoriel de base)

Analyse complète des sélecteurs js pour vous (tutoriel de base)

亚连original: 2018-05-21 09:25:591292parcourir

Je vais maintenant vous proposer une analyse complète des sélecteurs js. Permettez-moi de le partager avec vous maintenant et de le donner comme référence pour tout le monde.

Les sélecteurs JS natifs incluent getElementById, getElementsByName, getElementsByTagName et getElementsByClassName Ci-dessous, je présenterai l'utilisation de ces quatre sélecteurs un par un.

1.getElementById (obtenir l'élément par ID)

Utilisation : document.getElementById("Id"); .

2.getElementsByName (obtenir les éléments par attribut de nom)

Utilisation : document.getElementsByName("Name"); obtenu, cette méthode convient généralement à la soumission de données de formulaire. Lorsque l'attribut name est défini lorsque l'élément est form, img, iframe, applet, embed ou object, un attribut nommé d'après la valeur de l'attribut name sera automatiquement créé dans le fichier. Objet de document. Par conséquent, l'objet dom correspondant peut être référencé via document.domName

3.getElementsByTagName (obtenir les éléments par nom d'élément)

Utilisation : document.getElementsByTagName(TagName); TagName est Pour obtenir le nom de balise d'un élément, lorsque TagName est *, cela signifie obtenir tous les éléments. Le document peut également être remplacé par un élément DOM, mais de cette manière, seul le sous-ensemble d'éléments derrière l'élément DOM peut être obtenu. .

4.getElementsByClassName (obtenir des éléments via des classes CSS)

Utilisation : document.getElementsByClassName(ClassName); est le nom de la classe CSS de l'élément à obtenir. Si vous souhaitez en obtenir plusieurs en même temps, séparez-les par des espaces après chaque classe CSS. Par exemple, document.getElementsByClassName("class2 class1") obtiendra des éléments de styles class1 et class2. Le document peut également être remplacé par un élément DOM, de sorte que seul un sous-ensemble d'éléments derrière l'élément DOM puisse être obtenu.

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<body>
<p>我是通过标签获取</p>
<p id="box">我是通过id获取</p>
<p class="box1">我是通过class获取</p>
<form action="" name="box2">
  我是通过name获取
</form>
</body>
<script type="text/javascript">
  var p = document.getElementsByTagName("p");
  var box = document.getElementById("box");
  var box1 = document.getElementsByClassName("box1");
  var box2 = document.getElementsByName("box2");
</script>
</html>

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles Liés

Voir plus