Maison > Article > interface Web > Analyse complète des sélecteurs js

Analyse complète des sélecteurs js

怪我咯original: 2017-04-01 09:13:491319parcourir

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 des éléments via l'attribut name)

Utilisation : document.getElementsByName("Name"); Cette méthode est généralement la valeur de l'attribut name de l'élément à obtenir. adapté à la soumission de données de formulaires, 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 l'objet Document. Vous pouvez donc référencer l'objet dom correspondant via document.domName

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

Utilisation : document.getElementsByTagName(TagName est le nom de la balise); élément à obtenir, lorsque TagName est *, cela signifie obtenir tous les éléments. Le document peut également être remplacé par un élément DOM, mais de cette façon, 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 classe CSS de l'élément à obtenir, si vous le souhaitez 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 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

Article précédent：Analyse des types booléens dans les types JavaScriptArticle suivant：Analyse des types booléens dans les types JavaScript

Articles Liés

Voir plus