js 获取name属性的值|极客笔记

js 获取name属性的值

在网页开发中，经常会使用到元素的各种属性，其中name属性是一个比较常见且有一定特殊用途的属性。在JavaScript中，我们可以通过一些方法来获取元素的name属性的值。本文将详细介绍如何使用JavaScript获取元素的name属性的值。

1. 通过id获取元素

首先，我们可以通过元素的id来获取到对应的元素，然后再获取其name属性的值。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Get Element Name Example</title>
</head>
<body>

<input type="text" id="myInput" name="username">

<script>
    var element = document.getElementById('myInput');
    var nameValue = element.name;
    console.log(nameValue);
</script>

</body>
</html>

在上面的示例中，我们通过getElementById方法获取了id为myInput的元素，然后使用name属性来获取其name属性的值。最后使用console.log打印出来。

运行上面的代码，在浏览器控制台中会输出username，即该元素的name属性的值。

2. 通过name获取元素

除了通过id获取元素外，我们还可以通过元素的name属性来获取到对应的元素。下面是另一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Get Element Name Example</title>
</head>
<body>

<input type="text" name="email">

<script>
    var element = document.getElementsByName('email')[0];
    var nameValue = element.name;
    console.log(nameValue);
</script>

</body>
</html>

在上面的示例中，我们通过getElementsByName方法获取name为email的元素，然后同样使用name属性来获取其name属性的值。

运行上面的代码，会在浏览器控制台中输出email，即该元素的name属性的值。

3. 通过querySelector获取元素

还可以使用querySelector方法来获取元素，并进一步获取其name属性的值。以下是示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Get Element Name Example</title>
</head>
<body>

<input type="text" name="password" id="passwordInput">

<script>
    var element = document.querySelector('input[name="password"]');
    var nameValue = element.name;
    console.log(nameValue);
</script>

</body>
</html>

在上面的示例中，我们使用querySelector方法选择name属性为password的元素，并通过name属性获取其值。

运行上面的代码，会在浏览器控制台中输出password，即该元素的name属性的值。

4. 通过事件对象获取元素

在事件处理函数中，我们可以通过事件对象来获取到当前触发事件的元素，然后再获取其name属性的值。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Get Element Name Example</title>
</head>
<body>

<input type="text" name="phone" id="phoneInput" oninput="getName(event)">

<script>
    function getName(event) {
        var element = event.target;
        var nameValue = element.name;
        console.log(nameValue);
    }
</script>

</body>
</html>

在上面的示例中，oninput事件触发时，调用getName函数并传入事件对象。在函数内部通过事件对象event.target获取到当前输入框元素，然后再通过name属性获取其值。

运行上面的代码，在输入框输入内容时，会在浏览器控制台中输出phone，即该元素的name属性的值。

总结

通过上面的几个示例，我们学习了如何使用JavaScript获取元素的name属性的值。无论是通过id获取元素、通过name获取元素、通过querySelector获取元素，还是通过事件对象获取元素，都可以轻松地获取到元素的name属性值。在实际开发中，根据具体需求选择合适的方法来获取元素的属性值，有助于提高开发效率和代码质量。