js name选择器

在HTML中，我们常常通过id或class来选取特定的元素，并为其设置样式或添加事件。然而，当我们需要选取多个具有相同名称的元素时，使用name选择器将更为方便和高效。

name选择器的语法

name选择器采用[name=”value”]的形式来选取元素，其中name表示要选择的元素的属性名，value为属性值。

例如，要选取所有name属性值为”email”的元素，可以使用[name="email"]的选择器。

在HTML中使用name选择器

在HTML标签中添加name属性，然后通过name选择器选取元素。示例如下：

<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="email" name="email" placeholder="请输入邮箱">

<!-- 示例代码中的输入框添加了name属性 -->

在CSS中使用name选择器

在CSS样式表中，使用name选择器来为特定的元素设置样式。示例如下：

<style>
[name="email"] {
  background-color: lightblue;
  color: white;
}
</style>

<input type="email" name="email" placeholder="请输入邮箱">

<!-- 示例代码中的输入框添加了name属性，并通过name选择器设置了样式 -->

在JavaScript中使用name选择器

在JavaScript中，我们可以通过name选择器来操作选中的元素。例如，我们可以使用document.getElementsByName()方法来选取具有指定name属性值的元素。

示例如下：

<script>
  var emails = document.getElementsByName("email");
  console.log(emails);

  // 示例代码中选取了所有name属性值为"email"的元素，并通过console.log输出

  // 运行结果：
  // NodeList [input]
</script>

name选择器的高级用法

具体属性值匹配

name选择器还支持匹配具体属性值的方式。例如，使用[name^="value"]来选取属性值以”value”开头的元素。

示例代码如下：

<input type="text" name="user10" placeholder="请输入用户名">
<input type="text" name="user11" placeholder="请输入用户名">
<input type="text" name="user12" placeholder="请输入用户名">

<!-- 示例代码中的输入框的name属性值以"user"开头 -->

我们可以使用[name^="user"]选择器来选取所有name属性值以”user”开头的元素。

多个属性值匹配

name选择器还支持多个属性值匹配的方式。例如，使用[name~="value"]来选取属性值包含”value”的元素。

示例代码如下：

<input type="checkbox" name="fruit" value="apple">
<input type="checkbox" name="fruit" value="banana">
<input type="checkbox" name="fruit" value="pear">

<!-- 示例代码中的复选框的name属性值为"fruit" -->

我们可以使用[name~="fruit"]选择器来选取所有name属性值包含”fruit”的元素。

正则表达式匹配

name选择器还支持使用正则表达式来匹配属性值。例如，使用[name|="value"]来选取属性值为”value”或以”value-“开头的元素。

示例代码如下：

<input type="text" name="user-7" placeholder="请输入用户名">
<input type="text" name="user-8" placeholder="请输入用户名">
<input type="text" name="user-9" placeholder="请输入用户名">

<!-- 示例代码中的输入框的name属性值以"user-"开头 -->

我们可以使用[name|="user"]选择器来选取所有name属性值为”user”或以”user-“开头的元素。